前记: 嘤嘤嘤, 原本是想写很多其他干货的笔记的.. 然而,, 看到 CSS3 动画就停不下来, 哎, 总是经不起诱惑, 大概就是自己拿不到想要的 offer 的原因吧哭泣.. 其他的笔记后来再补上吧
加载条
之前呢, 在做公司项目的时候, 为了显示进度, 需要有回调来显示进度, 所以用 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.jianshu.com/p/9b2a71fa25e5