使用 css animate 製作 Loading 文字動態效果
使用 css動畫﹙css animate﹚製作 Loading 文字動態效果
效果演示：
HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Loading Page 預載文字動畫</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="dailycss_20200802">
<div class="container loader">
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</div>
</body>
</html>
CSS：
#dailycss_20200802 {
background-color: #2b2b2b;
margin: 0;
padding: 0;
}
#dailycss_20200802 .loader {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
#dailycss_20200802 .loader span {
color: #fff;
font-family: Arial;
font-size: 24px;
color: rgba(255, 255, 255, .1);
display: inline-block;
transition: all .5s;
animation: animate_dailycss_20200802 2s infinite;
-webkit-animation: animate_dailycss_20200802 2s infinite;
}
#dailycss_20200802 .loader span:nth-child(1) {
animation-delay: .1s;
}
#dailycss_20200802 .loader span:nth-child(2) {
animation-delay: .2s;
}
#dailycss_20200802 .loader span:nth-child(3) {
animation-delay: .3s;
}
#dailycss_20200802 .loader span:nth-child(4) {
animation-delay: .4s;
}
#dailycss_20200802 .loader span:nth-child(5) {
animation-delay: .5s;
}
#dailycss_20200802 .loader span:nth-child(6) {
animation-delay: .6s;
}
#dailycss_20200802 .loader span:nth-child(7) {
animation-delay: .7s;
}
@keyframes animate_dailycss_20200802 {
0% {
color: rgba(255, 255, 255, .1);
transform: translateY(0);
margin-left: 0;
}
25% {
color: yellow;
yellowtransform: translateY(-15px);
margin-left: 10px;
text-shadow: 0 15px 5px rgba(0, 0, 0, 1);
}
100% {
color: rgba(255, 255, 255, .1);
transform: translateY(0);
}
}
來源：
迴響列表
目前還沒有任何留言
留言表單