共计 4627 个字符，预计需要花费 12 分钟才能阅读完成。
这是在手机上写的，纯 HTML 和 css。用 WebCat 写的，挺好用的一个软件，上课打发时间蛮不错的
效果如下：（懒得加动图了，随便截的）
有很多重复的地方，还可以缩减，以后在看吧。
content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes”>
body {
background-color: red;
}
#dv_01 {
width: 300px;
height: 300px;
position: absolute;
top: 150px;
left: 25px;
border: 10px solid #000000;
animation: dv 1.5s cubic-bezier(1, 0, 0, 0.5) infinite;
}
@keyframes dv {
0% {
opacity: 0.3;
transform: rotate(0deg) scale(0.5);
}
50% {
width: 330px;
height: 330px;
top: 135px;
left: 10px;
opacity: 0.9;
transform: rotate(0deg) scale(0.5);
}
100% {
opacity: 0.3;
transform: rotate(0deg) scale(0.5);
}
}
#dv_02 {
width: 300px;
height: 300px;
position: absolute;
top: 150px;
left: 25px;
border: 10px solid #000000;
animation: dv2 1.5s cubic-bezier(1, 0, 0, 0.5) infinite;
}
@keyframes dv2 {
0% {
opacity: 0.3;
transform: rotate(0deg) scale(0.5);
}
50% {
width: 360px;
height: 360px;
top: 120px;
left: -5px;
opacity: 0.9;
transform: rotate(45deg) scale(0.5);
}
100% {
opacity: 0.3;
transform: rotate(0deg) scale(0.5);
}
}
#dv_03 {
width: 300px;
height: 300px;
position: absolute;
top: 150px;
left: 25px;
border: 10px solid #000000;
animation: dv3 1.5s cubic-bezier(1, 0, 0, 0.5) infinite;
}
@keyframes dv3 {
0% {
opacity: 0.3;
transform: rotate(0deg) scale(0.5);
}
50% {
width: 390px;
height: 390px;
top: 105px;
left: -20px;
opacity: 0.9;
transform: rotate(90deg) scale(0.5);
}
100% {
opacity: 0.3;
transform: rotate(0deg) scale(0.5);
}
}
#tx_01 {
font-size: 30px;
color: #ffffff;
width: 40px;
height: 40px;
border: 3px solid #ffffff;
position: absolute;
top: 290px;
left: 75px;
opacity: 1;
animation: tx1 1.5s cubic-bezier(1, 0, 0, 0.5) infinite;
}
@keyframes tx1 {
0% {
width: 0px;
height: 0px;
border: 0px;
top: 300px;
left: 175px;
opacity: 0;
}
50% {
width: 40px;
height: 40px;
border: 3px solid #ffffff;
position: absolute;
top: 290px;
left: 75px;
opacity: 1;
}
100% {
width: 0px;
height: 0px;
border: 0px;
top: 300px;
left: 175px;
opacity: 0;
}
}
#tx_02 {
font-size: 30px;
color: #ffffff;
width: 40px;
height: 40px;
border: 3px solid #ffffff;
position: absolute;
top: 290px;
left: 137px;
opacity: 1;
animation: tx2 1.5s cubic-bezier(1, 0, 0, 0.5) infinite;
}
@keyframes tx2 {
0% {
width: 0px;
height: 0px;
border: 0px;
top: 300px;
left: 175px;
opacity: 0;
}
50% {
width: 40px;
height: 40px;
border: 3px solid #ffffff;
position: absolute;
top: 290px;
left: 137px;
opacity: 1;
}
100% {
width: 0px;
height: 0px;
border: 0px;
top: 300px;
left: 175px;
opacity: 0;
}
}
#tx_03 {
font-size: 30px;
color: #ffffff;
width: 40px;
height: 40px;
border: 2px solid #ffffff;
position: absolute;
top: 290px;
left: 192px;
opacity: 1;
animation: tx3 1.5s cubic-bezier(1, 0, 0, 0.5) infinite;
}
@keyframes tx3 {
0% {
width: 0px;
height: 0px;
border: 0px;
top: 300px;
left: 175px;
opacity: 0;
}
50% {
width: 40px;
height: 40px;
border: 3px solid #ffffff;
position: absolute;
top: 290px;
left: 192px;
opacity: 1;
}
100% {
width: 0px;
height: 0px;
border: 0px;
top: 300px;
left: 175px;
opacity: 0;
}
}
#tx_04 {
font-size: 30px;
color: #ffffff;
width: 40px;
height: 40px;
border: 2px solid #ffffff;
position: absolute;
top: 290px;
left: 250px;
opacity: 1;
animation: tx4 1.5s cubic-bezier(1, 0, 0, 0.5) infinite;
}
@keyframes tx4 {
0% {
width: 0px;
height: 0px;
border: 0px;
top: 300px;
left: 175px;
opacity: 0;
}
50% {
width: 40px;
height: 40px;
border: 3px solid #ffffff;
position: absolute;
top: 290px;
left: 250px;
opacity: 1;
}
100% {
width: 0px;
height: 0px;
border: 0px;
top: 300px;
left: 175px;
opacity: 0;
}
}
原文地址: 使用 HTML 模拟剪辑特效
