[CSS3] 学习笔记-CSS动画特效
在CSS3中,出现了很多出彩的效果,例如2D、3D以及过度、动画和多列等。这些效果为页面设计添加了很多的可选设计。
1、2D、3D转换
转换,是使元素改变尺寸、形状、位置的一种效果;通过CSS3转换,我们能够对元素进行移动、缩放、转动、拉伸或拉长;可以通过2D、3D元素来转换;
2D转换方法:
translate()、rotate()、scale()、skew()、matrix()
3D转换方法:
rotateX()
rotateY()
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="1.css"> </head> <body> <div>这是一个初始效果</div> <br/> <div class="div2">这是一个改变后的效果</div> <div class="div3">这是一个改变后的效果</div> <div class="div4">这是一个改变后的效果</div> <div class="div5">这是一个改变后的效果</div> <div class="div6">这是一个改变后的效果</div> <div class="div7">这是一个改变后的效果</div> </body> </html>
对应的CSS文件:
div{ width:200px; height: 200px; color: blue; } .div2{ /*这条语句不支持特定浏览器,因此运行可能无效;后面的语句是针对特定浏览器的*/ transform: translate(200px, 100px); /*这是让safari和chrome支持的语句*/ -webkit-transform:translate(100px,100px); /*这是让Ie支持的语句*/ -ms-transform:translate(100px,100px); /*这是让Opera支持的语句*/ -o-transform: translate(100px,100px); /*这是让firefox支持的语句*/ -moz-transform: translate(100px,100px); } .div3{ transform: rotate(100deg); } .div4{ margin-top: 200px; transform: scale(1,2); } .div5{ transform: skew(20deg,20deg); } .div6{ transform: matrix(1, 0, 0, 1, 30, 30); } .div7{ font-size: 50px; transform: rotateX(120deg) rotateY(120deg); }
2、动画过渡
CSS3过渡是元素从一种样式转换成另一种样式,包括动画执行效果的CSS,动画执行的时间
属性:
transition:设置以下4个过渡属性
也可以分别设置这四个属性:
transition-property:过渡的名称
transition-duration:过渡花费的时间
transition-timing-function:过渡效果的时间曲线
transition-delay:过渡效果开始时间
<body> <div>效果展示</div> </body>
对应的CSS文件:
div{ width:100px; height: 100px; background-color: blue; transition: width 2s, height 2s,transform 2s; transition-delay:2s; } div:hover{ width: 200px; height: 200px; transform: rotate(360deg); }
3、动画
通过CSS3,可以进行动画创作,CSS3的动画需要遵循@keynames规则,另外需要规定动画的时长和名称
<body> <div>动画效果</div> </body>
对应的CSS文件:
div{ width: 200px; height: 200px; background-color: red; position: relative; /*animation:anim 5s;*/ /*重复反方向执行动画效果*/ animation: anim 5s infinite alternate; } /*若需浏览器适配,则:*/ /*“@keyframe”改为“@-webkit-keyframes” */ @keyframes anim{ ;} } 50%{background: gold;left: 200px;top:200px} ;top:200px} ;} }
4、多列
CSS3中,可以创建多列来对文本或区域进行布局
属性:
column-count:分列的数量
column-gap:每列中间间隔的距离
column-rule:每列之间间隔的线,包括线的颜色
<body> <div class="div1"> 大家好,欢迎进入CSS的世界 大家好,欢迎进入CSS的世界 大家好,欢迎进入CSS的世界 大家好,欢迎进入CSS的世界 大家好,欢迎进入CSS的世界 大家好,欢迎进入CSS的世界 大家好,欢迎进入CSS的世界 大家好,欢迎进入CSS的世界 大家好,欢迎进入CSS的世界 大家好,欢迎进入CSS的世界 大家好,欢迎进入CSS的世界 大家好,欢迎进入CSS的世界 大家好,欢迎进入CSS的世界 大家好,欢迎进入CSS的世界 大家好,欢迎进入CSS的世界 </div> </body>
对应的CSS文件:
.div1{ ; -webkit-column-gap: 50px; -webkit-column-rule: 5px outset red; }
5、CSS瀑布流效果
<body> <div class="container"> <div><img src="1.jpg" width="200px" height="auto"><p>这里添加标签</p></div> <div><img src="2.jpg" width="auto" height="150px"></div> <div><img src="3.jpg" width="200px" height="auto"></div> <div><img src="4.jpg" width="300px" height="auto"></div> <div><img src="5.jpg" width="auto" height="150px"></div> <div><img src="6.jpg" width="200px" height="auto"><p>这里添加标签</p></div> <div><img src="7.jpg" width="auto" height="150px"></div> <div><img src="8.jpg" width="200px" height="auto"></div> <div><img src="9.jpg" width="auto" height="150px"><p>这里添加标签</p></div> </div> </body>
对应的CSS文件 :
.container{ -webkit-column-width: 250px; -webkit-column-gap:5px; } .container div{ width: 250px; margin: 5px 0; } .container p{ text-align: center; }
[CSS3] 学习笔记-CSS动画特效的更多相关文章
- [CSS3] 学习笔记-CSS选择器
CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...
- [CSS3] 学习笔记-CSS定位
页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制 普通流:元素按照其在 ...
- CSS3 学习笔记(动画 多媒体查询)
动画 1.@keyframes规则用于创建动画.在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果 2.使用animation进行动画捆绑.两个值:动画名称.时长 ...
- [CSS3] 学习笔记--CSS盒子模型
1.CSS盒子模型概述 盒子模型的内容范围包括:margin(外边距).border(边框).padding(内边距).content(内容)部分组成. 2.内边距 内边距在content外,bord ...
- [CSS3]学习笔记-CSS基本样式讲解
1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en ...
- [CSS3] 学习笔记-CSS入门基本知识
1.CSS概述 CSS指层叠样式表 CSS样式表极大的提高了工作效率 1)CSS基础语法: selector{ propery:value } 例1:h1{color:red;font-size:14 ...
- amazeui学习笔记--css(常用组件15)--CSS动画Animation
amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- amazeui学习笔记--css(常用组件6)--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
随机推荐
- css运用中,对position属性的认识
position属性有: static : 无特殊定位,对象遵循HTML定位规则 absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位.而其层叠 ...
- CodeForces 754D Fedor and coupons (优先队列)
题意:给定n个优惠券,每张都有一定的优惠区间,然后要选k张,保证k张共同的优惠区间最大. 析:先把所有的优惠券按左端点排序,然后维护一个容量为k的优先队列,每次更新优先队列中的最小值,和当前的右端点, ...
- XCode 7上传遇到ERROR ITMS-90535 Unexpected CFBundleExecutable Key. 的解决办法
去第三方的info.plist文件中,比如TencentOpenApi_IOS_Bundle.bundel 的info.plist ,删除 executable file 这一行
- 快速搭建LNMP
[centos 6.4 server]系统安装请参考:http://blog.zhuyin.org/748.html1.防火墙设置: iptables -F service iptables save ...
- [Angular Tutorial] 13 -REST and Custom Services
在这一步中,我们将会改变我们获取数据的方式. ·我们定义一个代表RESTful客户端的自定义服务.使用这个客户端,我们可以用一种更简单的方法向服务端请求数据,而不用处理更底层的$httpAPI,HTT ...
- 基于 Python 和 Scikit-Learn 的机器学习介绍
Reference:http://mp.weixin.qq.com/s?src=3×tamp=1474985436&ver=1&signature=at24GKibw ...
- iOS 之 手势
手势操作,有一个总的抽象类UIGestureRecognizer,用于检测设备的所有手势.其下有多个子类: 拍击UITapGestureRecognizer (任意次数的拍击) 向里或向外捏UIPin ...
- Python3基础 用list()查看filter()返回的对象
镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...
- robotium从入门到放弃 一 测试开发环境搭建
1.JDK的安装及环境变量的配置 配置JAVA的运行环境,添加完环境变量后,可以打开Windows命令处理程序窗口,通过执行命令java -version验证环境变量是否添加成功.如果添加成功会 ...
- 2.13. 获取托管对象(Core Data 应用程序实践指南)
用NSFetchRequest获取NSArray,里面都是托管对象.如果上下文里没有数据,就会从持久化存储区里获取. NSFetchRequest *request = [NSFetchRequest ...