目录
CSS3
一、过渡
1. 属性
2. 花费时间
3. 运动曲线
4. 何时开始
二、2D属性
2. translate(移动)
2. rotate(旋转)
3. scale(缩放)
4.transform-origin(转换中心点)
综合写法
三、动画
1. 动画的使用
1).定义动画(keyframes)
2)元素使用动画
2. 动画序列
3. 动画属性
4. 动画属性简写
四、3D动画
1. 三维坐标系
2. 3D移动 translate3d
3. 透视 perspective
4. 3D旋转
5. 3D呈现 (transform-style:400px)
CSS3
CSS3的语法是建立在CSS原先版本基础上的,它允许使用者在标签中指定特定的HTML元素而不必使用多余的class、ID或JavaScript。CSS选择器中的大部分并不是在CSS3中新添加的,只是在之前的版本中没有得到广泛的应用。
一、过渡
我们可以在不使用Flash 动画或JavaScript的情况下,当元素从一种样式变换为另一种样时为元素添加效果。
过渡动画:是从一个状态渐渐的过渡到另外一个状态
我们现在经常和:hover 一起搭配使用。
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
1. 属性
想要变化的Css属性,宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡,写一个all就可以
2. 花费时间
单位是秒(必须写单位)比如0.5s
3. 运动曲线
默认是ease (可以省略)
linenr 匀速eare 逐渐慢下来eaer in 加速eaer out减速eae-in- out 先加速后减速
4. 何时开始
单位是秒(必须写单位)可以设置延迟触发,时间默认是0s ( 可以省略)
案例演示:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 200px;background-color: pink;transition: all 1s linear .5s;}.box:hover {width: 400px;}</style></head><body><div class="box"></div></body></html>
二、2D属性
transform:实现元素的位移,旋转,缩放等效果
2. translate(移动)
可以改变元素在页面中的位置
transform:translate(x,y); transform:translateX(n); transform:translateY(n);
注意:
定义2D转换中的移动,沿着X和Y轴移动元素translate最大的优点 :不会影响到其他元素的位置translate中的百分比单位是相对于自身的 translate:(50%,50%)对行内标签没有效果
因此,translate可以用来定位中心点
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
移动案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {position: relative;margin-left: 800px;width: 500px;height: 500px;background-color: pink;}.son {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 200px;height: 200px;background-color: plum;}</style></head><body><div class="box"><div class="son"></div></div></body></html>
2. rotate(旋转)
让元素在二维平面内顺时针或者逆时针旋转
rotate里面跟度数, 单位是deg比如rotate(45deg)角度为正时,顺时针,负时,为逆时针默认旋转的中心点是元素的中心点transform:rotate(度数)
旋转案例:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;border: 1px solid pink;margin: 100px auto;overflow: hidden;}div::after {content: '旋转';display: block;width: 100%;height: 100%;background-color: coral;transform: rotate(180deg);transform-origin: left bottom;transition: all 0.5s;}div:hover::after {transform: rotate(0deg);}</style></head><body><div></div></body></html>
3. scale(缩放)
控制元素的缩放
注意其中的x和y用逗号分隔transform:scale(1,1) :宽和高都放大一倍,相对于没有放大transform:scale(2,2) : 宽和高都放大了2倍transform:scale(2) : 只写一个参数,第二个参数则和第一个参数-样,相当于scale(2,2)transform:scale(0.5,0.5) :缩小sacle缩放最大的优势 :可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子transform:scale(x,y);
缩放案例:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul li {float: left;width: 30px;height: 30px;margin: 10px;border: 1px solid pink;border-radius: 50%;text-align: center;line-height: 30px;list-style: none;cursor: pointer;}ul li:hover {transform: scale(1.5);}</style></head><body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul></body></html>
4.transform-origin(转换中心点)
注意后面的参数 x和y用空格隔开x y默认转换的中心点是元素的中心点(50% 50%)还可以给x y设置像素或者方位名词( top bottom left right center )transfrom-origin:x y;
综合写法
改变顺序回影响转换的效果(先旋转回改变坐标轴的方向)同时有位移和其他属性的时候,记得要将位移放到最前面transform:translate() rotate() scale() ;
三、动画
animation:通过设置多个节点来精确控制一个或一组动画,实现复杂的动画效果。
相较于过渡,可以实现更多变化,控制,连续自动播放等
1. 动画的使用
1).定义动画(keyframes)
keyframes前面一定要加@
@keyframes move {0% {width: 0px;}100% {width: 200px;}}
2)元素使用动画
/*调用动画*/
animation-name:动画名称;
/*持续时间*/
animation-duration:持续时间;
2. 动画序列
0% 是动画的开始,100%是动画的完成。这样的规则就是动画序列。在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。动画是使元素从一样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。用百分比来规定变化发生的时间,或用关键词"from"和"to" ,等同于0%和100%。3. 动画属性
其中animation-timing-function属性拥有多种属性
linear动画从头到尾的速度是相同的。匀速ease默认。动画以低速开始,然后加快,在结束前变慢。ease-in 动画以低速开始。ease -out 动画以低速结束。ease-in-out动画以低速开始和结束。steps() 指定了时间函数中的间隔数量(步长)
4. 动画属性简写
简写属性里面不包含 animation-play-state暂停动画: animation-play-state: puased; 经常和鼠标经过等其他配合使用想要动画走回来, 而不是直接跳回来: animation-direction : alternate盒子动画结束后,停在结束位置: animation fill-mode : forwardsanimation : 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: myfirst 5s linear 2s infinite alternate;
动画案例:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@keyframes move {0% {transform: translate(0, 0);}25% {transform: translate(1000px, 0);}50% {transform: translate(1000px, 500px);}75% {transform: translate(0, 500px);}100% {transform: translate(0, 0);}}div {width: 100px;height: 100px;background-color: pink;animation: move;animation-duration: 8s;}</style></head><body><div></div></body></html>
四、3D动画
在学习3D动画前我们必须得先了解三维坐标系
1. 三维坐标系
x轴:水平向右
注意: x右边是正值,左边是负值
y轴:垂直向下
注意: y下面是正值,上面是负值
z轴:垂直屏幕
注意:往外面是正值,往里面是负值
2. 3D移动 translate3d
translform:translateX(100px) :仅仅是在x轴上移动 translform:translateY(100px) :仅仅是在Y轴上移动 translform:translateZ(100px) :仅仅是在Z轴上移动(注意: translateZ- 般用px单位 ) transform:translate3d(x,y,z) :其中x、y. z分别指要移动的轴的方向的距离 ,x,y,z不能省略3. 透视 perspective
perspective是3D动画中非常重要的一个属性,它可以使我们看到的2D平面呈现出3D立体空间
特点:近大远小
perspective相当于是我们的眼睛,当我们的眼睛离看到的物体近的时候,物体会相较于元的时候大,等同于近视人群喜欢凑近看,因为凑近看呈现的状态大,看的清楚。
d :就是视距,视距就是一个物体距离人的眼睛到屏幕的距离。z:就是z轴,物体距离屏幕的距离, z轴越大(正值)我们看到的物体就越大。单位:px透视写在被观察元素的父盒子上
4. 3D旋转
让元素在三位平面内沿x,y,z轴或者自定义轴进行旋转
transform:rotateX(45deg) :沿着x轴正方向旋转45度 transform:rotateY(45deg) :沿着y轴正方向旋转45deg transform:rotateZ(45deg) : 沿着Z轴正方向旋转45deg transform:rotate3d(x,y,z,deg) :沿着自定义轴旋转deg为角度(了解即可)
左手准则
左手的手拇指指向x轴的正方向
其余手指的弯曲方向就是该元素沿着x轴旋转的方向
3D旋转案例:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {perspective: 400px;}.box {position: relative;width: 300px;height: 300px;margin: 100px auto;transition: all .3s;transform-style: preserve-3d;}.box:hover {transform: rotateY(180deg);}.front,.back {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 50%;text-align: center;font-size: 24px;line-height: 300px;color: #fff;}.front {background-color: pink;z-index: 1;/* 背面隐藏 */backface-visibility: hidden;}.back {background-color: purple;transform: rotateY(180deg);}</style></head><body><div class="box"><div class="front">初见乍惊欢</div><div class="back">久处亦怦然</div></div></body></html>
5. 3D呈现 (transform-style:400px)
控制子元素是否开启三维立体环境
transform-style: flat 子元素不开启3d立体空间默认的 transform-style: preserve- 3d; 子元素开启立体空间
代码写给父级,但是影响的是子盒子
3D动画案例:
旋转木马
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {perspective: 1000px;}section {position: relative;width: 300px;height: 200px;margin: 100px auto;transform-style: preserve-3d;animation: move 8s linear infinite alternate;}section:hover {animation-play-state: paused;}@keyframes move {0% {transform: rotateY(0deg);}100% {transform: rotateY(100deg);}}section div {position: absolute;width: 100%;height: 100%;}section div:nth-child(1) {transform: translateZ(300px);}section div:nth-child(2) {transform: rotateY(60deg) translateZ(300px);}section div:nth-child(3) {transform: rotateY(120deg) translateZ(300px);}section div:nth-child(4) {transform: rotateY(180deg) translateZ(300px);}section div:nth-child(5) {transform: rotateY(240deg) translateZ(300px);}section div:nth-child(6) {transform: rotateY(300deg) translateZ(300px);}section div img {width: 100%;height: 100%;}</style></head><body><section><div><img src="images/dog.jpg" alt=""></div><div><img src="images/dog.jpg" alt=""></div><div><img src="images/dog.jpg" alt=""></div><div><img src="images/dog.jpg" alt=""></div><div><img src="images/dog.jpg" alt=""></div><div><img src="images/dog.jpg" alt=""></div></section></body></html>