css3简单动画效果

内容导读

然而，，看到css3 动画就停不下来，哎，总是经不起诱惑，大概就是自己拿不到想要的offer的原因吧哭泣。加载条之前呢，在做公司项目的时候，为了显示进度，需要有回调来显示进度，所以用js控制了这个css3，今天看到一个加载的，觉得实在是太简单了！嘿嘿，其实也不难，主要是要分析，仔细观察第一个球球，什么动画效果呢？然后接下来的两个球球跟第一个就是一个延时的区别而已了。之前不用css3属性的时候，直接是写一个span标签绝对定位，jq实现动画效果的。这里主要就是用到了伪元素， ::after ， transition , :hover ，嗯，就是这么简单的。

前记：嘤嘤嘤，原本是想写很多其他干货的笔记的。。然而，，看到css3 动画就停不下来，哎，总是经不起诱惑，大概就是自己拿不到想要的offer的原因吧哭泣。。其他的笔记后来再补上吧

来源： 30 Second of CSS

加载条

之前呢，在做公司项目的时候，为了显示进度，需要有回调来显示进度，所以用js控制了这个css3，今天看到一个加载的，觉得实在是太简单了！！！！

 .donut { width: 50px; height: 50px; border: 5px solid #ccc; 
border-bottom-color: #1395ba; border-radius: 50%; animation: donut 2s 
linear infinite; } @keyframes donut { 0% { transform: rotate(0deg); } 
100% { transform: rotate(360deg); } } </style> <div 
class="donut"></div>

donghua.gif

emmmm，那就再做多一个小功能，就是可以暂停的，我觉得可以暂停会比较好玩嘻嘻，其实也就是添加多一个class，设置一个animation-play-state

GIF1.gif

嘻嘻，附上代码

 <div class="container"> <input type="button" value="暂停" 
onclick="changeType()" id="button"> <div class="donut" 
id="donut"></div> </div> <script> function 
changeType() { var donut = document.getElementById('donut'); var button =
 document.getElementById('button'); if(button.value=='暂停') { 
donut.classList.add('stop'); button.value='继续'; } else { 
donut.classList.remove('stop'); button.value='暂停'; } } </script>  
.stop { animation-play-state: paused; }

就只添加了一个控制添加多一个class的功能而已啦。。

弹动加载效果

先看效果吧

GIF.gif

嘿嘿，其实也不难，主要是要分析，仔细观察第一个球球，什么动画效果呢？就是上下和透明度嘛。。然后接下来的两个球球跟第一个就是一个延时的区别而已了。。

 .container { position: relative; text-align: center; width: 100px; } 
.item { display: inline-block; height: 15px; width: 15px; border-radius:
 50%; background: #969aec;; animation: item 1s ease-in-out infinite; } 
.b { animation-delay: .2s; } .c { animation-delay: .4s; } @keyframes 
item { 0% { transform: translateY(0); opacity: 1; } 50% { transform: 
translateY(20px); opacity: 0; } 100% { transform: translateY(0); 
opacity: 1; } } </style> <div class="container"> <div 
class="item a"></div> <div class="item b"></div> 
<div class="item c"></div> </div>

下横线

嘤嘤嘤，这个是最让我生气的东西了。。之前不用css3属性的时候，直接是写一个span标签绝对定位，jq实现动画效果的。然后现在用css实现，超容易超流畅的好吗！！

GIF.gif

这里是怎么实现呢？

这里主要就是用到了伪元素，::after， transition, :hover，嗯，就是这么简单的。。

 <style> .underline { display: inline-block; position: relative; 
line-height: 2; /*这里设置line-height是为了让下横线不要太贴着文字了。。*/ } .underline::after
 { content: '';  position: absolute; left: 0; bottom: 0; transform: 
scaleX(0); /*设置x方向缩放*/ height: 2px; width: 100%; transform-origin: 50% 
bottom; /*这里呢，从左到右，从上到下*/ background: #1395ba; transition: transform 1s;
 } .underline:hover::after { transform: scaleX(1); transition: transform
 1s;  } </style> <p class="underline"我是小娩娩</p>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c50723.shtml