CSS3 转换、过渡和动画
一、转换
1、属性：transform
取值：none/transform-function(转换函数)
注意：如果要实现多个转换函数的话，可以用空格分开若干transform-function
2、转换的原点
默认情况，原点在元素的中心处，width*50%，height*50%
更换原点-属性：transform-origin：数值/百分比/关键字(top/bottom/left/right)
取值：按照当前元素的左上点为(0,0)
一个值：所有轴的位置
两个值：第一个值表示x轴上的值，第二个表示y轴
三个值：x,y,z
转换主要分为两类：2D转换和3D转换
（一）2D转换
1、位移：位置移动
函数：translate()
取值：数值/百分比(可为负)
一个值：x轴
两个值：x轴,y轴
单向位移函数：translateX(),translateY()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3-2D变换之位移</title>
<link rel="stylesheet" href="demo05.css">
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
@charset "utf-8";
div{
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 200px;
}
#d1{
border: 1px dotted #000;
}
#d2{
border: 1px solid #000;
background-color: #f00;
opacity: 0.5;
/*2D变换之位移*/
transform: translate(50px,50px);
}
2、缩放：改变元素尺寸
函数：scale()
取值：
一个值：x轴和y轴同样的缩放比例
两个值：分别表示x轴和y轴的缩放比例
可取值：
默认值为 1
放大：大于1的数值，可以取小数
缩小：0-1的数值
单向缩放函数：scaleX(x),scaleY(y)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3-2D变换之缩放</title>
<link rel="stylesheet" href="demo06.css">
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
@charset "utf-8";
div{
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 200px;
}
#d1{
border: 1px dotted #000;
}
#d2{
border: 1px solid #000;
background-color: #f00;
opacity: 0.5;
/*2D变换之缩放*/
transform: scale(0.8,0.5); /*缩小*/
/*transform: scale(1.2); 放大*/
}
3、旋转：围绕着一个圆心(转换原点)发生旋转的操作
函数：rotate(nxdeg)
n：符号，可正(顺时针)可负(逆时针)
x：旋转角度的数值
deg:角度单位
注意：旋转是连同坐标轴一起转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3-2D变换之旋转</title>
<link rel="stylesheet" href="demo07.css">
</head>
<body>
<div id="d1"></div>
<div id="d2">Web前端</div>
</body>
</html>
@charset "utf-8";
div{
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 200px;
}
#d1{
border: 1px dotted #000;
}
#d2{
border: 1px solid #000;
background-color: #f00;
opacity: 0.5;
/*定义新原点*/
transform-origin: 100% 100%;
/*2D变换之旋转*/
transform: rotate(30deg);
}
4、倾斜：让元素围绕着x轴或y轴，按照一定的角度产生倾斜效果
函数：skew(nxdeg)
单向缩放函数：skewX(),skewY()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3-2D变换之倾斜</title>
<link rel="stylesheet" href="demo08.css">
</head>
<body>
<div id="d1"></div>
<div id="d2">Web前端</div>
</body>
</html>
@charset "utf-8";
div{
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 200px;
}
#d1{
border: 1px dotted #000;
}
#d2{
border: 1px solid #000;
background-color: #f00;
opacity: 0.5;
/*2D变换之倾斜*/
transform: skew(45deg,15deg);
}
（二）3D转换
元素可以沿着z轴，发生各种转换的效果
1、属性
perspective：模拟人眼到3D视图的距离，取值为数值
意义：
1、定义距离
2、标识元素可以完成3D转换
注意：该属性要设置在父元素上。即设置完成后，该元素的子元素能够发生3D转换，自身元素是不可以的。
浏览器兼容性：
-webkit-perspective
-moz-perspective
-o-perspective
2、3D - 位移
函数：translateZ(z),translate3D(x,y,z)
3、3D - 旋转
函数：
rotateX(deg)
rotateY(deg)
rotateZ(deg)
rotate3D(x,y,z,deg)
x,y,z取值为0和1,0表示该轴不旋转，1表示该轴按照deg的角度进行旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3-3D变换之旋转</title>
<link rel="stylesheet" href="demo09.css">
</head>
<body>
<div id="parent">
<div id="son">Better late than never.</div>
</div>
</body>
</html>
@charset "utf-8";
#parent{
width: 300px;
height: 300px;
border: 1px solid #ddd;
padding: 10px;
margin: 80px 0 0 150px;
/*设置子级元素，允许发生3D转换*/
perspective: 100px;
-webkit-perspective: 100px;
}
#son{
text-align: center;
width: 200px;
height: 200px;
line-height: 200px;
margin: auto;
border: 1px solid #000;
background-color: #ddd;
margin-top: 50px;
/*3D旋转*/
transform: rotateX(45deg); /*x轴旋转*/
/*transform: rotateY(30deg);*/ /*y轴旋转*/
/*transform: rotateZ(60deg);*/ /*Z轴旋转*/
transform: rotate3d(1,1,1,30deg); /*整体旋转*/
}
二、过渡：元素的一个状态到另一个状态的平缓过渡
1、过渡相关属性(要素)
a、过渡属性：transition-property
能够实现过渡效果的CSS属性:
颜色：文本颜色，背景颜色
取值为数值：宽度、高度、字体大小
转换属性：transform
渐变属性：background:linear-gradient ....
visibility:
阴影：
透明度：
b、过渡时间：transition-duration
整个过渡的效果将在多长时间内完成，以秒(s)或毫秒(ms)作为单位
注意：默认值为0，整个过渡中，必须要设置transition-duration属性，否则没有过渡效果
c、过渡时间曲线函数：transition-timing-function
取值：
ease：默认值，慢速开始，快速变快，慢速结束
linear：匀速
ease-in：慢速开始，加速效果
ease-out：快速开始，减速效果
ease-in-out：慢速开始和结束，中间先加速再减速
d、过度的延迟：transition-delay
过渡效果什么时候开始，以秒(s)或毫秒(ms)作为单位
e、过渡的综合属性：
transition：property duration timing-function delay
将以上四个过渡属性放在一起，后面两个可以省略
2、触发过渡效果
a、用户的行为(点击、悬浮)
b、:hover, :active ...
3、过渡属性定义在什么地方
div{
width: 100px;
}
div:hover{
width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡</title>
<style>
#d1{
width: 100px;
height: 30px;
background-color: #bfb;
/*定义过渡效果*/
/*在此处定义过渡效果，恢复时仍然有效果*/
/*transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 100ms;*/
}
#d1:hover{
width: 300px;
height: 30px;
background: #bfb;
/*定义过渡效果*/
transition: width 1s ease-in 100ms;
}
img{
/*若将过渡效果定义在此处，则恢复时依然能看到效果 */
}
img:hover{
transform: translate(200px) rotate(720deg);
transition: transform 1s linear 100ms;
}
</style>
</head>
<body>
<div id="d1"></div>
<img src="Images/star.jpg">
</body>
</html>
过渡+3D旋转效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡+3D旋转</title>
<style>
#parent{
width: 200px;
height: 200px;
padding: 50px;
border: 1px solid #ddd;
perspective: 100px;
margin: 10px auto;
}
#son{
width: 100px;
height: 100px;
background-color: #ccc;
border: 1px solid #ddd;
margin: 30px auto;
transition: transform 5s linear 2s;
}
#son:hover{
transform: rotate3d(1,1,1,360deg);
}
</style>
</head>
<body>
<div id="parent">
<div id="son">360°旋转</div>
</div>
</body>
</html>
三、动画
1、在多个状态之中，做平缓过渡的效果
2、浏览器兼容性
-webkit- 谷歌
-moz- 火狐
-o- 欧鹏
3、创建使用动画步骤
A、声明动画
a、起名
b、使用 @keyframes 声明动画的关键帧
关键帧：特殊时间点上的状态
B、使用动画
属性：animation
通过以上属性调用动画的名称
设置相关操作
4、声明动画
通过 @keyframe 声明动画
语法：@keyframes 动画名称
{
from | 0%{
//动画开始的状态，CSS属性
width:0px;
}
[percent{
//动画的中间状态
}]
10%{
width:10px;
}
20%{
width:20%;
}
to | 100%{
//动画结束的状态
width:100px;
}
}
5、调用动画
属性
a、animation-name：动画名称
b、animation-duration：动画完成一个周期所需要的时间(s|ms为单位)
c、animation-timing-function：动画执行过程中的时间速度曲线函数
取值：ease,linear,ease-in,ease-out,ease-in-out
d、animation-delay：播放动画之前的延迟
e、animation-iteration-count：动画播放次数
取值：
定数值：播放指定次数
infinite：无限次
f、animation-direction：动画播放方向
取值：
normal：正常，从头到尾
alternate：轮播，在奇数次上正向播放，在偶数次上逆向播放
g、animation：动画的综合属性
animation：name duration timing-function delay iteration-count direction;(后四个可省略)
h、animation-fill-mode：动画播放前后元素的状态
取值：
none：默认，不改变默认行为
forwards：动画完成后，保持在最后一个帧的状态
backwards：动画显示之前，保持在第一个关键帧的状态
both：结合了forwards和backwards的状态
i、animation-play-state：设置动画播放状态
取值：
paused：暂停
running：播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画练习 - 钟表</title>
<style>
#circle{
width: 500px;
height: 500px;
border: 3px solid #00f;
border-radius: 50%;
margin: auto;
}
#hour{
float: left;
height: 125px;
border: 4px solid #bbf;
position: relative;
top: 125px;
left: 250px;
transform-origin: 0 125px;
animation: hours 3600s linear 0s infinite;
}
#second{
float: left;
height: 200px;
border: 2px solid #00f;
position: relative;
top: 54px;
left: 244px;
transform-origin: 0 200px;
animation: seconds 60s linear 0s infinite;
}
/*声明动画*/
@keyframes hours{
from{
transform: rotate(0deg);
/*transform-origin: 0 125px;*/
}
25%{
transform: rotate(90deg);
}
50%{
transform: rotate(180deg);
}
75%{
transform: rotate(270deg);
}
to{
transform: rotate(360deg);
}
}
@keyframes seconds{
from{
transform: rotate(0deg);
/*transform-origin: 0 200px;*/
}
25%{
transform: rotate(90deg);
}
50%{
transform: rotate(180deg);
}
75%{
transform: rotate(270deg);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="circle">
<b id="hour"></b>
<b id="second"></b>
</div>
</body>
</html>
CSS3 转换、过渡和动画的更多相关文章
- css3 转换 过渡 及动画
转换transform: 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸.您可以使用 2D 或 3D 转换来转换您的元素 2D转换属性: transform 向元素应用 2D 或 ...
- css3的过渡、动画、2D、3D效果
浏览器的内核: 谷歌的内核是:webkit 火狐的内核是:gecko Ie的内核是:trident 欧鹏的内核是:presto 国内浏览器的内核:webkit css3针对同一样式在不同的浏览器的兼容 ...
- 前端：css3的过渡与动画
一.css3过渡知识 (一).概述 1.CSS3过渡是元素从一种样式逐渐改变为另一种的效果. 2.实现过渡效果的两个要件: 规定把效果添加到那个css属性上. 规定效果时长 定义 ...
- css3的过渡和动画的属性介绍
一.过渡 什么是过渡? 过渡是指:某元素的css属性值在一段时间内,平滑过渡到另外一个值,过渡主要观察的是过程和结果. 设置能够过渡的属性: 支持过渡的样式属性,颜色的属性,取值为数值,transfo ...
- 常用到用css3实现的转换，过渡和动画
为什么要用css动画替换js动画 导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...
- CSS3中2D/3D转换、过渡、动画
转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...
- css3基础-文本与字体+转换+过渡+动画+案例
Css3文本与字体 文本阴影 h1 { text-shadow: 5px 5px 5px red; } word-break换行: h1:nth-child(1) { word-break: no ...
- 15款css3鼠标悬停图片动画过渡特效
分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- CSS3的过渡和转换
CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用于在一个属性中设置4个 ...
- 重新想，重新看——CSS3变形，过渡与动画④
最后,我们来探讨一下CSS3的动画属性. 之前提到过,实际上过渡也算作动画的一种.但过渡作为动画的缺陷在于,只能使元素属性从一个值“过渡”至另一个值,但如果想要使元素的属性值根据需要在时间轴上不断变化 ...
随机推荐
- netflix ribbon概述
LB方案分类 目前主流的LB方案可分成两类:一种是集中式LB, 即在服务的消费方和提供方之间使用独立的LB设施(可以是硬件,如F5, 也可以是软件,如nginx), 由该设施负责把访问请求通过某种策略 ...
- 自己写的python脚本（抄的别人的，自己改了改，用于整理大量txt数据并插入到数据库）
昨天,遇到了一个问题,有100w条弱口令数据,需要插入到数据库中,而且保存格式为txt. 身为程序员不可能一条一条的去写sql语句吧(主要是工作量太大,我也懒得干).所以,我 就百度了一下,看有没有相 ...
- 第35篇 IIS执行原理
服务器的监听(IIS6.0+版本) 当请求到达服务器时,请求最终会到达TCPIP.SYS驱动程序,TCPIP.SYS将请求转发给HTTP.SYS网络驱动程序的请求队列中(可以理解为专门处理http请求 ...
- ERP实施员的保密要求
一.公司机密文件范围 1 公司级计算机密码 2 公司级程序软件 3 与客户联系的各种远程联系用户名,密码 4 公司发展计划.规划 5 公司客户资料.财务报表.人事薪资.报 ...
- 关于TCP/IP协议栈
1. TCP/IP协议栈 与OSI参考模型不同,TCP/IP协议栈共有4层,其中网络接口层对应OSI中的物理层和数据链路层,应用层对应OSI中的应用层.表示层和会话层. 在网络接口层的主要协议有:AR ...
- tp框架的详细介绍，tp框架基础
php框架 真实项目开发步骤: 多人同时开发项目,协作开发项目.分工合理.效率有提高(代码风格不一样.分工不好) 测试阶段 上线运行 对项目进行维护.修改.升级(单个人维护项目,十分困难,代码风格不一 ...
- MegaCli 安装过程
首先说下自己遇到的坑: 百度搜索了一篇关于安装 MegaCli 的文章,于是乎就开始安装,装完之后获取不到 raid 的信息,后来发现是版本问题,就又搜索了一堆文章,最后搞定了 [root@web-0 ...
- AndroidStudio运行项目出现Unsupported method: AndroidProject.getPluginGeneration()错误解决办法
一.错误描述 今天在使用AndroidStudio运行项目时出现了一个Unsupported method: AndroidProject.getPluginGeneration()错误,如下图所示: ...
- 1688: [Usaco2005 Open]Disease Manangement 疾病管理
1688: [Usaco2005 Open]Disease Manangement 疾病管理 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 413 So ...
- java 学习 todoList
1.并发包的使用 2.线程相关的源码,怎么结束一个线程 3.单例模式代码 4.mixin 相关的理解代码 书单: effective java java 编程思想 spring 编程指南 深入理解jv ...