内容导读

然而，，看到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>