CSS3常用动画总结

每隔一段时间，总结一下，前端之路，路且长，记录点滴成长。

加载中效果

加载中效果

动画加载的效果，首先第一步就是需要设置一个椭圆border-radius: 50%;，然后就是需要使用到border的样式，然后就是transform: rotate() 出现的旋转的效果。

第一步、设置椭圆

<!---->html的
<div id="demo"></div>#demo {width: 10em;height: 10em;margin: 100px auto;border: 1.1em solid rgba(255, 255, 255, .2);border-left-color: #fff;border-radius: 50%;
}
复制代码

最终的效果如下：

第二步、设置帧

设置animation的属性

body {background: #000;
}
.spinner {width: 10em;height: 10em;margin: 100px auto;border: 1.1em solid rgba(255, 255, 255, .2);border-left-color: #fff;border-radius: 50%;-webkit-animation: load 1.1s infinite linear;
}
@-webkit-keyframes load {from {transform: rotate(0deg);}to {transform: rotate(360deg);}
}
复制代码

最后的实现的效果：

CSS3常用动画总结相关推荐

CSS3: 常用动画特效及4个最流行的动画库
一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...
CSS3常用动画效果合集（最全）
CSS3常见的动画效果合集: /* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webki ...
css动画放大延迟,css3延时动画
不太理解属性都是什么意思,但是有动画效果,我也是惊呆了 #animated_div{animation:animated_div 4s 1; -moz-animation:animated_div 4 ...
不炫技，SVG+CSS3 旋转动画属性就能实现的梦幻效果
CSS3的动画相关的基础的属性基本都涉猎过了,个人认为,其中最复杂的是d:path()路径变形动画,超过3D,而位移.轨迹.旋转.缩放.斜切什么的,相对简单一些,但作为非动画设计师而言,灵活的掌握这些 ...
CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
css3常用技巧_您可能错过的5个CSS3技巧和窍门
css3常用技巧 Though, CSS3 isn't a complex language but you'll there are greater chances that you'll stum ...
[总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
哈哈，又找到几个强大的html5+css3的动画效果
一周HTML5经典回顾 31个别出心裁的HTML5动画 40,425 人浏览发表回复 13 又是一周即将过去,我们来精心挑选这周分享的31款别出心裁的HTML5动画,很多还比较实用,一起来看看吧. ...
html css动画自动旋转,不炫技，SVG+CSS3 旋转动画属性就能实现的梦幻效果
CSS3的动画相关的基础的属性基本都涉猎过了,个人认为,其中最复杂的是d:path()路径变形动画,超过3D,而位移.轨迹.旋转.缩放.斜切什么的,相对简单一些,但作为非动画设计师而言,灵活的掌握这些 ...

CSS3常用动画总结

加载中效果

第一步、设置椭圆

第二步、设置帧

最后的实现的效果：

CSS3常用动画总结相关推荐

最新文章

热门文章