验证中...
语言: HTML
分类: CSS 技巧
最后更新于 2018-12-13 16:50
片段 1 片段 2
HTML部分
原始数据 复制代码
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS3文字烟雾散开动画特效</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<span>啊</span><span>啊</span><span>哇</span><span>哇</span><span>哇</span><span>n呀</span><span>呀</span><span>呀</span><span>啊</span><span>啦</span><span>哇</span><span>啊</span>
</body>
</html>
CSS部分
原始数据 复制代码
@import url(https://fonts.googleapis.com/css?family=Finger+Paint);
body {
background: black;
overflow: hidden;
font: 5vw/100vh "Finger Paint";
text-align: center;
color: transparent;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
span {
display: inline-block;
text-shadow: 0 0 0 whitesmoke;
-webkit-animation: smoky 5s 3s both;
animation: smoky 5s 3s both;
}
span:nth-child(even) {
-webkit-animation-name: smoky-mirror;
animation-name: smoky-mirror;
}
@-webkit-keyframes smoky {
60% {
text-shadow: 0 0 40px whitesmoke;
}
to {
-webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
text-shadow: 0 0 20px whitesmoke;
opacity: 0;
}
}
@keyframes smoky {
60% {
text-shadow: 0 0 40px whitesmoke;
}
to {
-webkit-transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
text-shadow: 0 0 20px whitesmoke;
opacity: 0;
}
}
@-webkit-keyframes smoky-mirror {
60% {
text-shadow: 0 0 40px whitesmoke;
}
to {
-webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
text-shadow: 0 0 20px whitesmoke;
opacity: 0;
}
}
@keyframes smoky-mirror {
60% {
text-shadow: 0 0 40px whitesmoke;
}
to {
-webkit-transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
text-shadow: 0 0 20px whitesmoke;
opacity: 0;
}
}
span:nth-of-type(1) {
-webkit-animation-delay: 2.1s;
animation-delay: 2.1s;
}
span:nth-of-type(2) {
-webkit-animation-delay: 2.2s;
animation-delay: 2.2s;
}
span:nth-of-type(3) {
-webkit-animation-delay: 2.3s;
animation-delay: 2.3s;
}
span:nth-of-type(4) {
-webkit-animation-delay: 2.4s;
animation-delay: 2.4s;
}
span:nth-of-type(5) {
-webkit-animation-delay: 2.5s;
animation-delay: 2.5s;
}
span:nth-of-type(6) {
-webkit-animation-delay: 2.6s;
animation-delay: 2.6s;
}
span:nth-of-type(7) {
-webkit-animation-delay: 2.7s;
animation-delay: 2.7s;
}
span:nth-of-type(8) {
-webkit-animation-delay: 2.8s;
animation-delay: 2.8s;
}
span:nth-of-type(9) {
-webkit-animation-delay: 2.9s;
animation-delay: 2.9s;
}
span:nth-of-type(10) {
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
span:nth-of-type(11) {
-webkit-animation-delay: 4.1s;
animation-delay: 4.1s;
}
span:nth-of-type(12) {
-webkit-animation-delay: 4.2s;
animation-delay: 4.2s;
}
span:nth-of-type(13) {
-webkit-animation-delay: 4.3s;
animation-delay: 4.3s;
}
span:nth-of-type(14) {
-webkit-animation-delay: 4.4s;
animation-delay: 4.4s;
}
span:nth-of-type(15) {
-webkit-animation-delay: 4.5s;
animation-delay: 4.5s;
}
span:nth-of-type(16) {
-webkit-animation-delay: 4.6s;
animation-delay: 4.6s;
}
span:nth-of-type(17) {
-webkit-animation-delay: 4.7s;
animation-delay: 4.7s;
}
span:nth-of-type(18) {
-webkit-animation-delay: 4.8s;
animation-delay: 4.8s;
}
span:nth-of-type(19) {
-webkit-animation-delay: 4.9s;
animation-delay: 4.9s;
}
span:nth-of-type(20) {
-webkit-animation-delay: 5s;
animation-delay: 5s;
}
span:nth-of-type(21) {
-webkit-animation-delay: 5.1s;
animation-delay: 5.1s;
}

评论列表( 0 )

你可以在登录后,发表评论

搜索帮助