您的位置 首页 css教程

css3简单动画效果

内容导读

前记:嘤嘤嘤,原本是想写很多其他干货的笔记的。。然而,,看到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> 

文章来源:火云技术网

文章标题:css3简单动画效果

文章地址:https://www.pyhw.net/66066_css3%e7%ae%80%e5%8d%95%e5%8a%a8%e7%94%bb%e6%95%88%e6%9e%9c.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图