<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue文字动画</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Fredoka+One|Open+Sans:300");
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: "Fredoka One", cursive;
font-size: 16px;
}
#app {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 100vh;
background: rgba(0, 0, 0, 0.9);
overflow: hidden;
}
.text-wrapper {
padding: 0 1rem;
max-width: 50rem;
width: 100%;
text-align: center;
}
.text {
font-size: 8em;
text-transform: uppercase;
letter-spacing: -14px;
}
.text .letter {
position: relative;
display: inline-block;
-webkit-transition: all .4s;
transition: all .4s;
}
.text .letter .character {
opacity: 0.65;
-webkit-transition: color .4s;
transition: color .4s;
cursor: pointer;
}
.text .letter span {
position: absolute;
bottom: .8rem;
left: .4rem;
display: block;
width: 100%;
height: 15px;
}
.text .letter span::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgba(0, 0, 0, 0.25);
}
.text .letter:hover .character {
color: #fff !important;
}
.text.part1 .letter:nth-child(1).poofed {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: poofing1 1.4s ease-in-out infinite alternate;
animation: poofing1 1.4s ease-in-out infinite alternate;
}
@-webkit-keyframes poofing1 {
0% {
-webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
}
50% {
-webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
}
56% {
-webkit-transform: rotateZ(459deg) rotateY(360deg) translateY(0px) scale(1);
transform: rotateZ(459deg) rotateY(360deg) translateY(0px) scale(1);
}
100% {
-webkit-transform: rotateZ(459deg) rotateY(360deg) translateY(-700px) scale(0.01);
transform: rotateZ(459deg) rotateY(360deg) translateY(-700px) scale(0.01);
}
}
@keyframes poofing1 {
0% {
-webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
}
50% {
-webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
}
56% {
-webkit-transform: rotateZ(459deg) rotateY(360deg) translateY(0px) scale(1);
transform: rotateZ(459deg) rotateY(360deg) translateY(0px) scale(1);
}
100% {
-webkit-transform: rotateZ(459deg) rotateY(360deg) translateY(-700px) scale(0.01);
transform: rotateZ(459deg) rotateY(360deg) translateY(-700px) scale(0.01);
}
}
.text.part1 .letter:nth-child(1) .character {
color: #4e2a84;
-webkit-animation: wave 1.2s linear infinite;
animation: wave 1.2s linear infinite;
-webkit-animation-delay: 0.33333s;
animation-delay: 0.33333s;
}
.text.part1 .letter:nth-child(1) span::before {
-webkit-animation: shadow 1.2s linear infinite;
animation: shadow 1.2s linear infinite;
-webkit-animation-delay: 0.33333s;
animation-delay: 0.33333s;
}
.text.part1 .letter:nth-child(2).poofed {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: poofing2 1.4s ease-in-out infinite alternate;
animation: poofing2 1.4s ease-in-out infinite alternate;
}
@-webkit-keyframes poofing2 {
0% {
-webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
}
50% {
-webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
}
56% {
-webkit-transform: rotateZ(540deg) rotateY(360deg) translateY(0px) scale(1);
transform: rotateZ(540deg) rotateY(360deg) translateY(0px) scale(1);
}
100% {
-webkit-transform: rotateZ(540deg) rotateY(360deg) translateY(-700px) scale(0.01);
transform: rotateZ(540deg) rotateY(360deg) translateY(-700px) scale(0.01);
}
}
@keyframes poofing2 {
0% {
-webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
}
50% {
-webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
}
56% {
-webkit-transform: rotateZ(540deg) rotateY(360deg) translateY(0px) scale(1);
transform: rotateZ(540deg) rotateY(360deg) translateY(0px) scale(1);
}
100% {
-webkit-transform: rotateZ(540deg) rotateY(360deg) translateY(-700px) scale(0.01);
transform: rotateZ(540deg) rotateY(360deg) translateY(-700px) scale(0.01);
}
}
.text.part1 .letter:nth-child(2) .character {
color: #ff5a5f;
-webkit-animation: wave 1.2s linear infinite;
animation: wave 1.2s linear infinite;
-webkit-animation-delay: 0.66667s;
animation-delay: 0.66667s;
}
.text.part1 .letter:nth-child(2) span::before {
-webkit-animation: shadow 1.2s linear infinite;
animation: shadow 1.2s linear infinite;
-webkit-animation-delay: 0.66667s;
animation-delay: 0.66667s;
}
.text.part1 .letter:nth-child(3).poofed {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-animation: poofing3 1.4s ease-in-out infinite alternate;
animation: poofing3 1.4s ease-in-out infinite alternate;
}
@-webkit-keyframes poofing3 {
0% {
-webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
}
50% {
-webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
}
56% {
-webkit-transform: rotateZ(264deg) rotateY(360deg) translateY(0px) scale(1);
transform: rotateZ(264deg) rotateY(360deg) translateY(0px) scale(1);
}
100% {
-webkit-transform: rotateZ(264deg) rotateY(360deg) translateY(-700px) scale(0.01);
transform: rotateZ(264deg) rotateY(360deg) translateY(-700px) scale(0.01);
}
}
@keyframes poofing3 {
0% {
-webkit-transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
transform: rotateZ(0deg) rotateY(0) translateY(0px) scale(1);
}
50% {
-webkit-transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
transform: rotateZ(0deg) rotateY(360deg) translateY(0px) scale(1);
}
56% {
-webkit-transform: rotateZ(264deg) rotateY(360deg) translateY(0px) scale(1);
transform: rotateZ(264deg) rotateY(360deg) translateY(0px) scale(1);
}
100% {
-webkit-transform: rotateZ(264deg) rotateY(360deg) translateY(-700px) scale(0.01);
transform: rotateZ(264deg) rotateY(360deg) translateY(-700px) scale(0.01);
}
}
.text.part1 .letter:nth-child(3) .character {
color: #f99b0c;
-webkit-animation: wave 1.2s linear infinite;
animation: wave 1.2s linear infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.text.part1 .letter:nth-child(3) span::before {
-we
Vue+CSS3实现文字飞入飞出动画特效代码.zip
版权申诉
77 浏览量
2022-11-01
00:02:57
上传
评论
收藏 34KB ZIP 举报
Vue+CSS3实现文字飞入飞出动画特效代码.zip （4个子文件） 
132674321497260716 likecs.com_132674321499532894 js 
vue.min.js 77KB 服务器软件.url 112B
demo.html 39KB 每日特卖_淘宝购物返利.url 117B资源评论
