教大家写几个可能用得上的css3简单动画
来源:互联网 发布:中国技术壁垒知乎 编辑:程序博客网 时间:2024/04/30 13:46
例子1:菊花状的Loading效果
- 第一步画出静态的小菊花。
sk-fading-circle { width: 40px; height: 40px; position: relative;}.sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0;}.sk-fading-circle .sk-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #333; border-radius: 100%;}<div class="sk-fading-circle"> <div class="sk-circle"></div> … //为缩减篇幅省略中间10个div <div class="sk-circle"></div></div>
静态小菊花其实是一个外层div里嵌套12个小div。小div通过 border-radius画成圆型,并通过margin: 0 auto;定位到顶格居中位置。由于12个小div都是absolute定位,因此都重叠在了一起。
- 第二步将12个重叠的圆分散开。
.sk-fading-circle .sk-circle2 { transform: rotate(30deg);}.sk-fading-circle .sk-circle3 { transform: rotate(60deg);}… //节省篇幅,每个圆每隔30度递增旋转.sk-fading-circle .sk-circle12 { transform: rotate(330deg);}<div class="sk-fading-circle"> <div class="sk-circle1 sk-circle"></div> … //为缩减篇幅省略中间10个div <div class="sk-circle12sk-circle"></div></div>
用transform的rotate将各个圆点旋转,形成完整的菊花状。如果你对transform不熟的话,看下图,第二个圆点旋转30度的示意图,其余圆点的旋转自行脑补:
- 三步通过animation控制opacity属性,让每个点淡进淡出
@-webkit-keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; }}@keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } }.sk-fading-circle .sk-circle:before { …… animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;}
这样每个点都在像信号灯一样同步地闪烁。
最后一步,给每个点设置animation-delay延时,以错开闪烁的时间,形成常见的菊花转转的效果
.sk-fading-circle .sk-circle2:before {animation-delay: -1.1s; }.sk-fading-circle .sk-circle3:before { animation-delay: -1s; }.sk-fading-circle .sk-circle4:before { animation-delay: -0.9s; }… //为缩减篇幅省略中间代码.sk-fading-circle .sk-circle12:before { animation-delay: -0.1s; }
因为是12个圆点,每个圆点的闪烁间隔时间0.1s,因此第1个圆点没有animation-delay延时,立即闪烁。第二个圆点,从-1.1s开始闪烁(负数不理解的话,参考animation一文,意思是从该时间点开始启动,之前的动画效果不显示)。之后每个圆点均以0.1s递增的速度延迟。最终形成常见的菊花转转的Loading效果
例子2:ios版菊花Loading
明白了原理后,无非是在例子1的基础上,将圆点改成竖条,opacity半透明即可。
例子3:琴谱版Loading
- 第一步,画出静态琴谱,很简单无非是一个外层div,内嵌几个并排的div而已。
.spinner { height: 40px;}.spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block;}<div class="spinner"> <div></div> … //你可以根据需求多加几个div <div></div></div>
- 第二步,琴谱动起来
.spinner > div { …… animation: sk-stretchdelay 1.2s infinite ease-in-out;}@keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1.0); }}
例1,2中用了transform的rotate实现旋转。例3用了transform的scaleY实现拉伸
最后一步,设置延时,让每个琴键在不同时间内拉伸。
.spinner .rect2 { animation-delay: -1.1s; }.spinner .rect3 { animation-delay: -1.0s; }.spinner .rect4 { animation-delay: -0.9s; }.spinner .rect5 { animation-delay: -0.8s; }<div class="spinner"> <div class="rect1"></div> … //为节省篇幅省略中间代码 <div class="rect5"></div></div>
贴一段源码,直接复制去用吧
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>css简单动画</title></head><style type="text/css">.ani,.ani2{width: 40px;height: 40px;position: relative;margin: 50px auto;}.ani div{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}.ani div:before{content: "";display: block;margin: 0 auto;width: 15%;height: 15%;background: cyan;border-radius: 100%;-webkit-animation: ani 1.2s infinite ease-in-out both;}.ani div:nth-child(1),.ani2 div:nth-child(1){-webkit-transform:rotate(30deg);}.ani div:nth-child(2),.ani2 div:nth-child(2){-webkit-transform:rotate(60deg);}.ani div:nth-child(3),.ani2 div:nth-child(3){-webkit-transform:rotate(90deg);}.ani div:nth-child(4),.ani2 div:nth-child(4){-webkit-transform:rotate(120deg);}.ani div:nth-child(5),.ani2 div:nth-child(5){-webkit-transform:rotate(150deg);}.ani div:nth-child(6),.ani2 div:nth-child(6){-webkit-transform:rotate(180deg);}.ani div:nth-child(7),.ani2 div:nth-child(7){-webkit-transform:rotate(210deg);}.ani div:nth-child(8),.ani2 div:nth-child(8){-webkit-transform:rotate(240deg);}.ani div:nth-child(9),.ani2 div:nth-child(9){-webkit-transform:rotate(270deg);}.ani div:nth-child(10),.ani2 div:nth-child(10){-webkit-transform:rotate(300deg);}.ani div:nth-child(11),.ani2 div:nth-child(11){-webkit-transform:rotate(330deg);}.ani div:nth-child(12),.ani2 div:nth-child(12){-webkit-transform:rotate(360deg);}@-webkit-keyframes ani {0%,39%,100%{opacity: 0;}40%{opacity: 1;}}.ani div:nth-child(1):before,.ani2 div:nth-child(1):before{-webkit-animation-delay: -1.1s;}.ani div:nth-child(2):before,.ani2 div:nth-child(2):before{-webkit-animation-delay: -1.0s;}.ani div:nth-child(3):before,.ani2 div:nth-child(3):before{-webkit-animation-delay: -0.9s;}.ani div:nth-child(4):before,.ani2 div:nth-child(4):before{-webkit-animation-delay: -0.8s;}.ani div:nth-child(5):before,.ani2 div:nth-child(5):before{-webkit-animation-delay: -0.7s;}.ani div:nth-child(6):before,.ani2 div:nth-child(6):before{-webkit-animation-delay: -0.6s;}.ani div:nth-child(7):before,.ani2 div:nth-child(7):before{-webkit-animation-delay: -0.5s;}.ani div:nth-child(8):before,.ani2 div:nth-child(8):before{-webkit-animation-delay: -0.4s;}.ani div:nth-child(9):before,.ani2 div:nth-child(9):before{-webkit-animation-delay: -0.3s;}.ani div:nth-child(10):before,.ani2 div:nth-child(10):before{-webkit-animation-delay: -0.2s;}.ani div:nth-child(11):before,.ani2 div:nth-child(11):before{-webkit-animation-delay: -0.1s;}.ani2 div{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}.ani2 div:before{content: "";display: block;margin: 0 auto;width: 3px;height: 15px;background: orange;border-radius: 100%;-webkit-animation: ani 1.2s infinite ease-in-out both;}</style><body><div class="ani"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><div class="ani2"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></body></html>
其他效果,代码很简单,看一次就懂了:<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><style>.loading{width: 10px;height: 10px;margin: 0 auto;}.loading:after{overflow: hidden;display: inline-block;vertical-align: bottom;animation: ellipsis 2s infinite;content: "\2026"; }@-webkit-keyframes ellipsis{from{width:2px;}to{width: 15px;}}.spinner {width: 40px;height: 40px;/*border-radius: 50%;*/background-color: #FFC952;margin: 100px auto;-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;animation: sk-rotateplane 1.2s infinite ease-in-out;}@-webkit-keyframes sk-rotateplane {0% {-webkit-transform: perspective(120px)}50% {-webkit-transform: perspective(120px) rotateY(180deg)}100% {-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)}}@keyframes sk-rotateplane {0% {transform: perspective(120px) rotateX(0deg) rotateY(0deg);-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)}50% {transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)}100% {transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);}}.sk-folding-cube {margin: 20px auto;width: 40px;height: 40px;position: relative;-webkit-transform: rotateZ(45deg);transform: rotateZ(45deg);}.sk-folding-cube .sk-cube {float: left;width: 50%;height: 50%;position: relative;-webkit-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}.sk-folding-cube .sk-cube:before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #FFC952;-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;animation: sk-foldCubeAngle 2.4s infinite linear both;-webkit-transform-origin: 100% 100%;-ms-transform-origin: 100% 100%;transform-origin: 100% 100%;}.sk-folding-cube .sk-cube2 {-webkit-transform: scale(1.1) rotateZ(90deg);transform: scale(1.1) rotateZ(90deg);}.sk-folding-cube .sk-cube3 {-webkit-transform: scale(1.1) rotateZ(180deg);transform: scale(1.1) rotateZ(180deg);}.sk-folding-cube .sk-cube4 {-webkit-transform: scale(1.1) rotateZ(270deg);transform: scale(1.1) rotateZ(270deg);}.sk-folding-cube .sk-cube2:before {-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}.sk-folding-cube .sk-cube3:before {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;}.sk-folding-cube .sk-cube4:before {-webkit-animation-delay: 0.9s;animation-delay: 0.9s;}@-webkit-keyframes sk-foldCubeAngle {0%,10% {-webkit-transform: perspective(140px) rotateX(-180deg);transform: perspective(140px) rotateX(-180deg);opacity: 0;}25%,75% {-webkit-transform: perspective(140px) rotateX(0deg);transform: perspective(140px) rotateX(0deg);opacity: 1;}90%,100% {-webkit-transform: perspective(140px) rotateY(180deg);transform: perspective(140px) rotateY(180deg);opacity: 0;}}@keyframes sk-foldCubeAngle {0%,10% {-webkit-transform: perspective(140px) rotateX(-180deg);transform: perspective(140px) rotateX(-180deg);opacity: 0;}25%,75% {-webkit-transform: perspective(140px) rotateX(0deg);transform: perspective(140px) rotateX(0deg);opacity: 1;}90%,100% {-webkit-transform: perspective(140px) rotateY(180deg);transform: perspective(140px) rotateY(180deg);opacity: 0;}}</style><body><div class="loading"></div><div class="spinner"></div><div class="sk-folding-cube"><div class="sk-cube1 sk-cube"></div><div class="sk-cube2 sk-cube"></div><div class="sk-cube4 sk-cube"></div><div class="sk-cube3 sk-cube"></div></div></body></html>
2 0
- 教大家写几个可能用得上的css3简单动画
- 财务上可能用得上整形数的读法
- 觉得自己以后可能用得上的相关网址
- Flex 3 序列号,可能用得上
- python编程中常用的12种基础知识总结(基础知识,面试可能用得上)
- 可穿戴设备收集的数据,医生也能用得上
- 有关单片机串口的几个小招数但愿你能用得上
- 关于Mini-XML-做一下记录,可能用得上
- CSS3 animation--写一个简单的loading动画
- 在less上写css3动画
- 【java】KDTree,实现个java版本,留着日后可能用得上
- 纯css3写的立方体动画
- 怎样写css3动画
- 延续上几个月写的一段代码,可按照几率生成随机话单内容
- 简单的使用定时器实现按键消抖,写得不好,望大家给指点一二。多谢了。
- 一个简单的CSS3重复动画
- css3 一些简单的动画使用方法
- css3实现简单的文字动画效果
- Activity的生命周期分析
- c++常用函数汇总
- Linux中vi工具的常用命令
- 2016facebook入门题c
- RTP-RTCP协议分析
- 教大家写几个可能用得上的css3简单动画
- Android中实现全屏、无标题栏的两种办法(另附Android系统自带样式的解释)(转)
- 141. Linked List Cycle
- WPF教程(八)WPF应用简介
- java语法糖 泛型与类型擦除
- hdu 1509 优先队列
- c++中vector的用法详解
- android学习笔记(八)SharedPreferences、editor .
- 振南的znFAT FAT32文件系统