简要说明
加载特效非常常见,以前大都是些画圆圈的gif图,后来css3出来了,随着前端技术的不断发展,css3本身也衍生出各种不同的技术,用css3做一个加载特效用来取代用gif图就是一个再好不过的运用了。
而问题是我们大多数人并不太会用css3的一些特性,导致有些特效即便是想出来了也无从下手,即便是到了一些特效网站下载了别人的特效,去看源码可能有些东西依旧是云里雾里。
同时,针对只用一个标签就可以表现出来的效果也是很懵逼,如此,我便抽了空稍微总结了以下几个特效:
以上都是通过一个标签然后加上它自身的伪类:after,:before以及一些特殊属性所构成的动态特效。
这里不一一讲解每一个效果时怎么形成的,只是整体的总结一下,用一个标签写特效的经验。
针对过渡和动画两个属性,大家一定要用熟,大概用熟的时候,对于
transform
的旋转,平移都能很快写出来,对于animation
动画效果的贝塞尔曲线也能很快求出。对于
box-shadow
要有充分的了解,box-shadow
可以帮助我们解决很多特效问题,他可以形成一个或者多个阴影,虽然阴影的颜色必须是单色的,但是我们可以将阴影显示在几乎任何地方,这就非常强大了,上述动态特效中,第四个就使用了box-shadow
来实现这种效果。对于
transform
中属性的先后顺序需要清除,一般translate
在rotate
的前面,因为是先移动到某一个位置然后再旋转,如果写反了,你会发现效果不是想象中的那样。’最后一个特效是
3D
的,不明白的同学建议百度看一下怎么形成3D
的图
显示页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="single-label-animation.css">
<style>
.circle{width:200px;height:200px;box-sizing:border-box;padding:50px;position: relative;float:left;
}
</style>
</head>
<body>
<div class="circle"><div class="single-label-animate se_ll_an_1"></div></div>
<div class="circle"><div class="single-label-animate se_ll_an_2 "></div></div>
<div class="circle"><div class="single-label-animate se_ll_an_3"></div></div>
<div class="circle"><div class="single-label-animate se_ll_an_4"></div></div>
<div class="circle"><div class="single-label-animate se_ll_an_5"></div></div>
<div class="circle"><div class="single-label-animate se_ll_an_6"></div></div>
<div class="circle"><div class="single-label-animate se_ll_an_7"></div></div>
<div class="circle"><div class="single-label-animate se_ll_an_8"></div></div>
<div class="circle"><div class="single-label-animate se_ll_an_9"></div></div>
<div class="circle"><div class="single-label-animate se_ll_an_10"></div></div>
<div class="circle"><div class="single-label-animate se_ll_an_11"></div></div>
<div class="circle"><div class="single-label-animate se_ll_an_12"></div></div>
</body>
</html>
css代码
.se_ll_an_1{position:relative;}
.se_ll_an_1:before,.se_ll_an_1:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:5px solid transparent;content:'';}
.se_ll_an_1:before{width:100px;height:100px;border-left:5px solid lightgreen;animation:se_ll_an_1_move 1s cubic-bezier(.42,.61,.58,.41) infinite;}
.se_ll_an_1:after{width:70px;height:70px;border-right:5px solid lightblue;animation:se_ll_an_1_move .6s cubic-bezier(.42,.61,.58,.41) infinite;}
@keyframes se_ll_an_1_move{
0%{transform:translate(-50%,-50%) rotate(0deg);}
100%{transform:translate(-50%,-50%) rotate(360deg);}
}
.se_ll_an_2{position:absolute;}
.se_ll_an_2:after,.se_ll_an_2:before{position:absolute;content:'';}
.se_ll_an_2,.se_ll_an_2:after,.se_ll_an_2:before{height:70px;width:10px;background:linear-gradient(to bottom,#1ee95d,#5714ce);border-top-right-radius:5px;border-top-left-radius:5px;animation:se_ll_an_2_move 0.5s ease alternate infinite;bottom:0;}
.se_ll_an_2:after{left:40px;animation-delay:0.4s;}
.se_ll_an_2:before{left:20px;animation-delay:0.2s;}
@keyframes se_ll_an_2_move{
0%{height:0;}
100%{height:70px;}
}
.se_ll_an_3{width:50px;height:50px;border-radius:50%;border:6px groove #33FFFF;transform:rotate(360deg);transition:all 1s ease;animation:se_ll_an_3_move_2 1s ease-out alternate infinite;position:relative;}
.se_ll_an_3:after{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0px inset #33CCFF;border-radius:50%;width:100%;height:100%;-webkit-animation:se_ll_an_3_move_1 1s ease-out alternate infinite;animation:se_ll_an_3_move_1 1s ease-out alternate infinite;content:'';display:block;box-sizing:border-box;}
@keyframes se_ll_an_3_move_1{
0%{border-width:0px;}
100%{border-width:10px;}
}
@keyframes se_ll_an_3_move_2{
0%{transform:rotate(0deg);}
100%{transform:rotate(-360deg);}
}
.se_ll_an_4{width:10px;height:10px;border-radius:50%;position:absolute;animation:se_ll_an_4_move 1s cubic-bezier(0.77,0.47,0.64,0.28) infinite;}
@keyframes se_ll_an_4_move{
0%{box-shadow:10px 0 0 #00e676,30px 0 0 #00e676,50px 0 0 #00e676;}
25%{box-shadow:10px -15px 0 #00e676,30px -5px 0 #00e676,50px 0 0 #00e676;}
50%{box-shadow:10px 0 0 #00e676,30px -15px 0 #00e676,50px -5px 0 #00e676;}
75%{box-shadow:10px 0 0 #00e676,30px 0 0 #00e676,50px -15px 0 #00e676;}
100%{box-shadow:10px 0 0 #00e676,30px 0 0 #00e676,50px 0 0 #00e676;}
}
.se_ll_an_5{width:28px;height:14px;border:1px #0077c1 solid;border-radius:2px;position:relative;animation:se_ll_an_5_move 5s linear infinite;}
.se_ll_an_5:after{width:3px;height:10px;background-color:#0077c1;border-radius:0px 1px 1px 0px;position:absolute;content:"";top:2px;right:-6px;}
@keyframes se_ll_an_5_move{
0%{box-shadow:inset 0px 0px 0px #0077c1;}
100%{box-shadow:inset 30px 0px 0px #0077c1;}
}
.se_ll_an_6{width:40px;height:15px;border-radius:50%;background:#ccc;position:relative;}
.se_ll_an_6:before{width:40px;height:40px;border-radius:100% 100% 100% 0;box-shadow:0px 0px 0px 2px lightgreen;left:0;top:-44px;transform:rotate(-45deg);content:'';display:block;position:absolute;animation:se_ll_an_6_move .6s linear infinite;}
@keyframes se_ll_an_6_move{
0%{top:-50px;}
50%{top:-40px;}
100%{top:-50px;}
}
.se_ll_an_7{width:15px;height:15px;border-radius:50%;background:rgb(255,0,0);animation:se_ll_an_7_move 1s linear infinite alternate;margin:46px auto;position:relative;}
@keyframes se_ll_an_7_move{
0%{background-color:rgba(255,0,0,1);box-shadow:30px 0px 0px 0px rgba(255,0,0,0.2),60px 0px 0px 0px rgba(255,0,0,0.2);}
25%{background-color:rgba(255,0,0,0.4);box-shadow:30px 0px 0px 0px rgba(255,0,0,1),60px 0px 0px 0px rgba(255,0,0,0.2);}
75%{background-color:rgba(255,0,0,0.4);box-shadow:30px 0px 0px 0px rgba(255,0,0,0.2),60px 0px 0px 0px rgba(255,0,0,1);}
}
.se_ll_an_8{position:relative;}
.se_ll_an_8:before{width:20px;height:20px;border-radius:20px;background:blue;content:'';position:absolute;background:#9b59b6;animation:se_ll_an_8_move_1 1.5s infinite ease-in-out;}
.se_ll_an_8:after{width:20px;height:20px;border-radius:20px;background:blue;content:'';position:absolute;background:#2ecc71;animation:se_ll_an_8_move_2 1.5s infinite ease-in-out;}
@keyframes se_ll_an_8_move_1{
0%{transform:translateX(0px)}
50%{transform:translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
100%{transform:translateX(0px)}
}
@-webkit-keyframes se_ll_an_8_move_2{
0%{transform:translateX(0px) rotate(0deg)}
50%{transform:translateX(50px) scale(1.2) rotate(260deg);background:#2ecc71;border-radius:0px;}
100%{transform:translateX(0px) rotate(0deg)}
}
.se_ll_an_9{position:relative;width:30px;height:30px;background:#3498db;border-radius:50px;animation:se_ll_an_9_move_1 1.5s infinite linear;}
.se_ll_an_9:before{position:absolute;width:50px;height:50px;border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;border-left:10px solid transparent;border-right:10px solid transparent;border-radius:50px;content:'';top:-20px;left:-20px;animation:se_ll_an_9_move_2 1.5s infinite linear;}
@keyframes se_ll_an_9_move_1{
0%{transform:rotate(0deg);}
50%{transform:rotate(180deg);background:#2ecc71;}
100%{transform:rotate(360deg);}
}
@keyframes se_ll_an_9_move_2{
0%{border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
50%{border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
100%{border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}
.se_ll_an_10{position:relative;}
.se_ll_an_10:before,.se_ll_an_10:after{position:absolute;left:50%;top:50%;border:2px solid #ed5565;border-bottom-color:transparent;border-top-color:transparent;border-radius:100%;height:35px;width:35px;animation:se_ll_an_10_move 1s 0s ease-in-out infinite;content:'';}
.se_ll_an_10:after{position:absolute;top:50%;left:50%;width:15px;height:15px;animation-duration:0.5s;border-color:#ed5565 transparent #ed5565 transparent;animation-direction:reverse;content:'';}
@keyframes se_ll_an_10_move{
0%{transform:translate(-50%,-50%) rotate(0deg) scale(1);}
50%{transform:translate(-50%,-50%) rotate(180deg) scale(0.6);}
100%{transform:translate(-50%,-50%) rotate(360deg) scale(1);}
}
.se_ll_an_11{background-color:#ed5565;width:15px;height:15px;border-radius:100%;position:relative;animation:se_ll_an_11_move 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite;}
.se_ll_an_11:before,.se_ll_an_11:after{background-color:#ed5565;width:15px;height:15px;border-radius:100%;content:"";position:absolute;opacity:0.8;}
.se_ll_an_11:before{top:0px;left:-28px;}
.se_ll_an_11:after{top:0px;left:28px;}
@keyframes se_ll_an_11_move{
0%{transform:rotate(0deg) scale(1);}
50%{transform:rotate(180deg) scale(0.6);}
100%{transform:rotate(360deg) scale(1);}
}
.se_ll_an_12{width:50px;height:50px;background:#ed5565;border:1px solid red;animation:se_ll_an_12_move 3s 0s cubic-bezier(.09,.57,.49,.9) infinite;}
@keyframes se_ll_an_12_move{
25%{transform:perspective(100px) rotateX(180deg) rotateY(0);}
50%{transform:perspective(100px) rotateX(180deg) rotateY(180deg);}
75%{transform:perspective(100px) rotateX(0) rotateY(180deg);}
100%{transform:perspective(100px) rotateX(0) rotateY(0);}
}
如有不会的特效请留言