[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 ...
随机推荐
- Struts2---声明式异常处理
在service方法里 throw抛出一个异常, 然后再方法声明上加上throws: public List<Category> list() throws SQLException{ C ...
- Lua学习系列（四）
lua 资源:http://www.dcc.ufrj.br/~fabiom/lua/ 第一个Lua程序 http://www.dcc.ufrj.br/~fabiom/lua/ 原文:https://w ...
- iOS透明引导页
一.效果展示 这里写图片描述 这种类型的新手引导比较常见,用于告诉用户某个按钮的作用,或者提醒用户可以进行某种交互操作.引导样式是在界面上加了一个半透明的引导图,高亮部分就是要突出的区域 二.怎么做? ...
- Spring自学教程-介绍、特点、框架(一)
一.spring是什么,有什么用? 一句话:面向企业应用,使用javabean代替ejb的java应用或web开发. 侵入式的做法就是要求用户代码"知道"框架的代码,表现为用户代码 ...
- 比较实用的webpack配置代码
var path = require('path');var webpack = require('webpack');var ExtractTextPlugin = require('extract ...
- set multiset 集合实现众数的统计
众数问题 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 所谓众数,就是对于给定的含有N个元素的多重集合,每个元素在S中出现次数最多的成为该元素的重数, 多重集合S重 ...
- Mac搭建Hadoop源码阅读环境
1.本次Hadoop源码阅读环境使用的阅读工具是idea,Hadoop版本是2.7.3.需要安装的工具包括idea.jdk.maven.protobuf等 2.jdk,使用的版本是1.8版,在jdk官 ...
- TCP协议和UDP协议的区别
1. TCP协议面向连接. UDP协议面向非连接 (有无链接)2. TCP协议传输速度慢. UDP协议传输速度快 (传输速度)3. TCP协议保证数据顺序. UDP协议不保证 (数据的有序性. 在IP ...
- S3C2440看门狗解析
个PCLK周期的复位信号 也就是说,在某些环境下,看门狗可以当做定时器使用,当他中断的时候并不发生复位,只发生中断,我看看图 看门狗的中断和复位信号是可以依靠wtcon来切断的(看门狗的时钟是无法切断 ...
- Thinking in scala (3)----求平方根
采用“牛顿法”求一个数的平方根 object sqrt { def main(args:Array[String])={ println( sqrt(args(0).toDouble)) } def ...