千万别说直到永远，因为你压根不知道永远有多远
今天利物浦挺进了欧冠八强！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #636e72;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
span {
position: relative;
display: inline-block;
color: snow;
font-size: 80px;
margin: 3px;
animation: shake 1s ease-in-out infinite;
}
span:nth-child(1){
animation-delay: .1s;
}
span:nth-child(2){
animation-delay: .2s;
}
span:nth-child(3){
animation-delay: .3s;
}
span:nth-child(4){
animation-delay: .4s;
}
span:nth-child(5){
animation-delay: .5s;
}
span:nth-child(6){
animation-delay: .6s;
}
@keyframes shake {
0%,100%{
transform: translateY(0px);
}
30% {
transform: translateY(-30px);
}
60% {
transform: translateY(0px);
}
}
</style>
</head>
<body>
<div class="box">
<span>利</span>
<span>物</span>
<span>浦</span>
<span>是</span>
<span>冠</span>
<span>军</span>
<span>!</span>
</div>
</body>
</html>
实现代码很简单就不做过多的解释了
旋转魔方效果
文字闪烁效果
加载动画效果
炫彩流光按钮
原生js轮播图效果
文字折叠效果
