css3简单动画效果

2019-09-10 郑州网站建设  

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

css3简单动画效果

donghua.gif

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

css3简单动画效果

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的功能而已啦。。

弹动加载效果

先看效果吧

css3简单动画效果

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实现, 超容易超流畅的好吗!!

css3简单动画效果

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://tzchb.ieyo.com/dede/1670.html转载请标明出处,谢谢合作!
标签:
  • CSS3
  • Ч
  • 内容
  • 动画
  • 看到
  • 导读
  • 然而