首页 > 资讯 > HTML/CSS > 正文

CSS之单个标签十分炫酷的特效

17-07-24 来源：[db:作者]

收藏我要投稿

简要说明

加载特效非常常见，以前大都是些画圆圈的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);}
}

点击复制链接与好友分享!回本站首页