一、转换
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()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3-2D变换之位移</title> 6 <link rel="stylesheet" href="demo05.css"> 7 </head> 8 <body> 9 <div id="d1"></div> 10 <div id="d2"></div> 11 </body> 12 </html>
1 @charset "utf-8"; 2 3 div{ 4 width: 200px; 5 height: 200px; 6 position: absolute; 7 top: 100px; 8 left: 200px; 9 } 10 #d1{ 11 border: 1px dotted #000; 12 } 13 #d2{ 14 border: 1px solid #000; 15 background-color: #f00; 16 opacity: 0.5; 17 /*2D变换之位移*/ 18 transform: translate(50px,50px); 19 }
2、缩放:改变元素尺寸
函数:scale()
取值:
一个值:x轴和y轴同样的缩放比例
两个值:分别表示x轴和y轴的缩放比例
可取值:
默认值为 1
放大:大于1的数值,可以取小数
缩小:0-1的数值
单向缩放函数:scaleX(x),scaleY(y)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3-2D变换之缩放</title> 6 <link rel="stylesheet" href="demo06.css"> 7 </head> 8 <body> 9 <div id="d1"></div> 10 <div id="d2"></div> 11 </body> 12 </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:角度单位
注意:旋转是连同坐标轴一起转
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3-2D变换之旋转</title> 6 <link rel="stylesheet" href="demo07.css"> 7 </head> 8 <body> 9 <div id="d1"></div> 10 <div id="d2">Web前端</div> 11 </body> 12 </html>
1 @charset "utf-8"; 2 3 div{ 4 width: 200px; 5 height: 200px; 6 position: absolute; 7 top: 100px; 8 left: 200px; 9 } 10 #d1{ 11 border: 1px dotted #000; 12 } 13 #d2{ 14 border: 1px solid #000; 15 background-color: #f00; 16 opacity: 0.5; 17 /*定义新原点*/ 18 transform-origin: 100% 100%; 19 /*2D变换之旋转*/ 20 transform: rotate(30deg); 21 }
4、倾斜:让元素围绕着x轴或y轴,按照一定的角度产生倾斜效果
函数:skew(nxdeg)
单向缩放函数:skewX(),skewY()
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3-2D变换之倾斜</title> 6 <link rel="stylesheet" href="demo08.css"> 7 </head> 8 <body> 9 <div id="d1"></div> 10 <div id="d2">Web前端</div> 11 </body> 12 </html>
1 @charset "utf-8"; 2 3 div{ 4 width: 200px; 5 height: 200px; 6 position: absolute; 7 top: 100px; 8 left: 200px; 9 } 10 #d1{ 11 border: 1px dotted #000; 12 } 13 #d2{ 14 border: 1px solid #000; 15 background-color: #f00; 16 opacity: 0.5; 17 /*2D变换之倾斜*/ 18 transform: skew(45deg,15deg); 19 }
(二)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的角度进行旋转
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3-3D变换之旋转</title> 6 <link rel="stylesheet" href="demo09.css"> 7 </head> 8 <body> 9 <div id="parent"> 10 <div id="son">Better late than never.</div> 11 </div> 12 </body> 13 </html>
1 @charset "utf-8"; 2 3 #parent{ 4 width: 300px; 5 height: 300px; 6 border: 1px solid #ddd; 7 padding: 10px; 8 margin: 80px 0 0 150px; 9 /*设置子级元素,允许发生3D转换*/ 10 perspective: 100px; 11 -webkit-perspective: 100px; 12 } 13 #son{ 14 text-align: center; 15 width: 200px; 16 height: 200px; 17 line-height: 200px; 18 margin: auto; 19 border: 1px solid #000; 20 background-color: #ddd; 21 margin-top: 50px; 22 /*3D旋转*/ 23 transform: rotateX(45deg); /*x轴旋转*/ 24 /*transform: rotateY(30deg);*/ /*y轴旋转*/ 25 /*transform: rotateZ(60deg);*/ /*Z轴旋转*/ 26 transform: rotate3d(1,1,1,30deg); /*整体旋转*/ 27 }
二、过渡:元素的一个状态到另一个状态的平缓过渡
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;
}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>过渡</title> 6 <style> 7 #d1{ 8 width: 100px; 9 height: 30px; 10 background-color: #bfb; 11 /*定义过渡效果*/ 12 /*在此处定义过渡效果,恢复时仍然有效果*/ 13 /*transition-property: width; 14 transition-duration: 1s; 15 transition-timing-function: linear; 16 transition-delay: 100ms;*/ 17 } 18 #d1:hover{ 19 width: 300px; 20 height: 30px; 21 background: #bfb; 22 /*定义过渡效果*/ 23 transition: width 1s ease-in 100ms; 24 } 25 img{ 26 /*若将过渡效果定义在此处,则恢复时依然能看到效果 */ 27 } 28 img:hover{ 29 transform: translate(200px) rotate(720deg); 30 transition: transform 1s linear 100ms; 31 } 32 </style> 33 </head> 34 <body> 35 <div id="d1"></div> 36 <img src="Images/star.jpg"> 37 </body> 38 </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>
以上就是我今天的学习内容,若有错误或不足,欢迎阅读者纠正。