css旋转动画定义中心,CSS实现弹簧效果的旋转加载动画
先看看效果,像是弹簧在伸缩:
具体代码:
此处用到CSS3的transform属性。
CSS3的变形(transform)属性让元素在一个坐标系统中变形。这个属性包含一系列变形函数,可以移动、旋转和缩放元素。
transform属性可用于内联元素和块元素。其默认值为none,表示不元素不进行变形。transform另一个属性值是一系列的。表示一个或多个变形函数,以空格分开;我们可以同时对一个元素进行变形的多种属性操作,如rotate、scale、translate等。以往我们叠加效果都是用逗号(“,”)隔开,但在transform中使用多个transform-function时却需要有空格隔开。
● 2D transform常用的transform-function的功能:
transform属性3D变形(3D transform)模块的一部分,也就是说所有的2D变形函数也包含于3D变形规范中。如此一来,CSS3变形中的函数根据不同的规范略有不同,下面列出的是变形中的2D和3D常用变形函数的功能,简单说明如下:
translate():用来移动元素,可以根据X轴和Y轴坐标重新定位元素位置。在此基础上有两个扩展函数:translateX()和translateY()。
scale():用来缩小或放大元素,可以使用元素尺寸发生变化。在此基础上有两个扩展函数:scaleX()和scaleY()。 rotate():用来旋转元素。
skew():用来让元素倾斜。在此基础上有两个扩展函数:skewX()和skewY()。
matrix():定义矩阵变形,基于X轴和Y轴坐标重新定位元素位置。
● 3D transform常用的transform-function的功能:
translate3d():移元素元素,用来指定一个3D变形移动位移量。
translate():指定3D位移在Z轴的位移量。
scale3d():用来缩放一个元素。
scaleZ():指定Z轴的缩放向量。
rotate3d():指定元素具有一个三维旋转的角度。
rotateX()、rotateY()和rotateZ():让元素具有一个旋转角度。
perspective():指定一个透视投影矩阵。
matrix3d():定义矩阵变形。
● transform-origin属性用来设置变换的原点。示例中代表旋转中心。
CSS Code复制内容到剪贴板
#loader2,
#loader2:before,
#loader2:after {
border-radius: 50%;
}
#loader2:before,
#loader2:after {
position:absolute;
content:'';
}
#loader2:before {
width: 5.2em;
height: 10.2em;
background:#ffffff;
border-radius: 10.2em 0 0 10.2em;
top: -0.1em;
left: -0.1em;
-webkit-transform-origin: 5.2em 5.1em;
transform-origin: 5.2em 5.1em;
-webkit-animation: load2 2s infinite ease 1.5s;
animation: load2 2s infinite ease 1.5s;
}
#loader2 {
font-size:11px;
text-indent: -99999em;
margin:20px20px;
position:relative;
float:left;
width: 10em;
height: 10em;
box-shadow:inset0 0 0 1em#ff0f88;
}
#loader2:after {
width: 5.2em;
height: 10.2em;
background:#ffffff;
border-radius: 0 10.2em 10.2em 0;
top: -0.1em;
left: 5.1em;
-webkit-transform-origin:0px5.1em;
transform-origin:0px5.1em;
-webkit-animation: load2 2s infinite ease;
animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
以上就是本文的全部内容,希望对大家学习CSS加载动画教程有所帮助。
css旋转动画定义中心,CSS实现弹簧效果的旋转加载动画相关推荐
- php带旋转动画刷新页面,CSS_CSS实现弹簧效果的旋转加载动画,先看看效果,像是弹簧在伸缩 - phpStudy...
CSS实现弹簧效果的旋转加载动画 先看看效果,像是弹簧在伸缩: 具体代码: 此处用到CSS3的transform属性. CSS3的变形(transform)属性让元素在一个坐标系统中变形.这个属性包含 ...
- html如何添加加载动画效果,CSS3创建加载动画效果
加载动画在网页设计中是很常见的.用户们都希望网页加载又快又流畅而不是盯着屏幕苦等,而加载动画能够在内容加载完成前给用户视觉反馈,从而能够吸引用户而不让他们直接放弃继续浏览你的网站. 创建加载效果所需的 ...
- android 自定义图片加载动画效果,Android自定义加载动画-感染体
Android自定义动画系列七,今天来分享第七个自定义Loading动画(InfectionBallBuilder),看上去感觉有种病毒源被感染的感觉,所以名字就叫感染体,这个动画做出来的效果,我不怎 ...
- css旋转动画定义中心,css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
- 前端加载动画/加载等待动画
在加载前端的数据的时候,很多时候不能用进度条来衡量不定数据量.此时加载动画就有用武之地了.可以在数据请求时显示加载动画,等动画加载完成再隐藏加载动画,让前端更具交互友好性. 网上百度了很多关于这方面的 ...
- windows加载动画
先看效果: Windows加载动画应该是这样吧,不是也没事,懂原理之后这个运动曲线可以任意自己设置的~ 实现: 1.定义标签: <div class="yongqi"> ...
- 干货!14个最新优质加载动画设计,让等待成为一种享受
互联网时代,网络"提速"日益频繁,人们打开Web或软件的速度越来越快,一般页面缓冲和加载地过程也是几不可查.然而,在某些情况下,例如软件急需加载大量页面,首页急需加载大量内容,用户 ...
- flutter 页面加载动画_十、Flutter加载动画
目录 一.效果展示 二.RoundPainter 三.RoundProgress 四.旋转起来 五.停止旋转 一.效果展示 Flutter加载动画.jpg 二.RoundPainter 同上篇文章&l ...
- CSS 实现加载动画之五-光盘旋转
今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来.这个动画的实现也很简单,关键 ...
最新文章
- linux上使用strace查看C语言级别的php源码【一种方法】
- pyrender 安装
- Discuz升级 Database Error : pre_common_syscache ADD PRIMARY KEY (cname)【解决办法】
- 日常工作必备之 linux 常用命令分类归纳
- js计算器代码加减乘除_如何用jQuery做一个简易版计算器
- jsp java servlet_jsp+java ,servlet如何实现用户登录和注册页面
- 警惕成教自考_不,保持警惕不会伤害Java。 关于Java许可的评论。
- 流之过滤器流(将过滤器串链在一起)
- mysql定义变量字符串类型_mysqli_stmt :: bind_param():类型定义字符串中的元素数量与绑定变量的数量不匹配...
- 采用HTML5之“data
- .Net Framework3.5 的 NetFx3.cab 资源
- nandflash驱动详解
- 手把手教如何修改运动步数
- 双创计算机应用基础答案,“双创”背景下基于《计算机应用基础》课程网络学习空间的教学实践与研究(原稿)...
- 苹果手机配对手表总是显示服务器,苹果手表配对失败,为什么iwatch跟手机总是配对...
- 微信成语接龙小程序|微擎框架|带流量主|前端+后端完整源码
- ACPI相关(7)- ACPI对ata的管理
- vue中适配移动端布局方案
- C语言实现QQ聊天室小项目 [完整源码]
- 英特尔第十代处理器为什么不支持win7_新硬件不支持Win7怎么回事? 新CPU仅兼容Win10的原因解析...