CSS3之动画三大特性
一 过渡模块
1 基本使用
1,过渡三要素
1.1必须要有属性发生变化
1.2必须告诉系统哪个属性需要执行过渡效果
1.3必须告诉系统过渡效果持续时长
2.注意点
当多个属性需要同时执行过渡效果时用逗号隔开即可
transition-property: width, background-color;
transition-duration: 5s, 5s;
<style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 50px; background-color: red; /*告诉系统哪个属性需要执行过渡效果*/ transition-property: width, background-color; /*告诉系统过渡效果持续的时长*/ transition-duration: 5s, 5s; /*transition-property: background-color;*/ /*transition-duration: 5s;*/ } /*:hover这个伪类选择器除了可以用在a标签上, 还可以用在其它的任何标签上*/ div:hover{ width: 300px; background-color: blue; } </style>
2 过渡模块其他属性
div {
width: 100px;
height: 50px;
background-color: red;
transition-property: width;
transition-duration: 5s;
/*告诉系统延迟多少秒之后才开始过渡动画*/
transition-delay: 2s;
}
ul:hover li{
margin-left: 700px;
}
ul li:nth-child(1){
/*告诉系统过渡动画的运动的速度*/
transition-timing-function: linear;
}
ul li:nth-child(2){
transition-timing-function: ease;
}
ul li:nth-child(3){
transition-timing-function: ease-in;
}
ul li:nth-child(4){
transition-timing-function: ease-out;
}
ul li:nth-child(5){
transition-timing-function: ease-in-out;
}
3 连写
div { width: 100px; height: 50px; background-color: red; transition-property: width; transition-duration: 5s; transition: width 5s linear 0s,background-color 5s linear 0s; transition: background-color 5s linear 0s; transition: width 5s,background-color 5s,height 5s; transition: all 5s; }
4 编写过渡的套路
1.编写过渡套路
1.1不要管过渡, 先编写基本界面
1.2修改我们认为需要修改的属性
1.3再回过头去给被修改属性的那个元素添加过渡即可
实现弹性效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>91-过渡模块-弹性效果</title> <style> *{ margin: 0; padding: 0; } div{ height: 100px; background-color: red; margin-top: 100px; text-align: center; line-height: 100px; } div span{ font-size: 80px; /*transition-property: margin;*/ /*transition-duration: 3s;*/ transition: margin 3s; } div:hover span{ margin: 0 20px; } </style> </head> <body> <!-- 1.编写过渡套路 1.1不要管过渡, 先编写基本界面 1.2修改我们认为需要修改的属性 1.3再回过头去给被修改属性的那个元素添加过渡即可 --> <div> <span>你</span> <span>好</span> <span>程</span> <span>序</span> <span>员</span> </div> </body> </html>
效果：
二 转换模块 transform
1 基本使用
transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
2 形变中心点，锚点
ul li{ list-style: none; width: 200px; height: 200px; position: absolute; left: 0; top: 0; /* 第一个参数:水平方向 第二个参数:垂直方向 注意点 取值有三种形式 具体像素 百分比 特殊关键字 */ transform-origin: 200px 0px; transform-origin: 50% 50%; transform-origin: 0% 0%; transform-origin: center center; transform-origin: left top; }
3 旋转轴向
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>95-2D转换模块-旋转轴向</title> <style> *{ margin: 0; padding: 0; } ul{ width: 800px; height: 500px; margin: 0 auto; } ul li{ list-style: none; width: 200px; height: 200px; margin: 0 auto; margin-top: 50px; border: 1px solid #000; /* 1.什么是透视 近大远小 2.注意点 一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面 */ perspective: 500px; } ul li img{ width: 200px; height: 200px; /*perspective: 500px;*/ } ul li:nth-child(1){ /*默认情况下所有元素都是围绕Z轴进行旋转*/ transform: rotateZ(45deg); } ul li:nth-child(2) img{ transform: rotateX(45deg); } ul li:nth-child(3) img{ /* 总结: 想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可 */ transform: rotateY(45deg); } </style> </head> <body> <ul> <li><img src="images/rotateZ.jpg" alt=""></li> <li><img src="images/rotateX.jpg" alt=""></li> <li><img src="images/rotateY.jpg" alt=""></li> </ul> </body> </html>
效果：
4 盒子阴影和文字阴影
1.如何给盒子添加阴影
box-shadow: 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;
2.注意点
2.1盒子的阴影分为内外阴影, 默认情况下就是外阴影
2.2快速添加阴影只需要编写三个参数即可
box-shadow: 水平偏移 垂直偏移 模糊度;
默认情况下阴影的颜色和盒子内容的颜色一致
3.如何给文字添加阴影
text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色 ;
.box1{ width: 200px; height: 200px; background-color: red; margin: 50px auto; text-align: center; line-height: 200px; /*box-shadow: 10px 10px 10px 10px skyblue;*/ /*box-shadow: 10px 10px 10px 10px skyblue inset;*/ box-shadow: 10px 10px 10px; color: yellow; } .box2{ width: 200px; height: 200px; margin: 0 auto; background-color: pink; text-align: center; line-height: 200px; font-size: 40px; /*text-shadow: 10px 10px 10px black;*/ text-shadow: 10px 10px 10px red; color: purple; }
三 动画模块
1.过渡和动画之间的异同
1.1不同点
过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画
1.2相同点
过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果
基本使用：
div{ width: 100px; height: 50px; background-color: red; /*transition-property: margin-left;*/ /*transition-duration: 3s;*/ /*1.告诉系统需要执行哪个动画*/ animation-name: lnj; /*3.告诉系统动画持续的时长*/ animation-duration: 3s; } /*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/ @keyframes lnj { from{ margin-left: 0; } to{ margin-left: 500px; } }
2 动画其他属性
div { width: 100px; height: 50px; background-color: red; animation-name: sport; animation-duration: 2s; /*告诉系统多少秒之后开始执行动画*/ /*animation-delay: 2s;*/ /*告诉系统动画执行的速度*/ animation-timing-function: linear; /*告诉系统动画需要执行几次*/ animation-iteration-count: 3; /*告诉系统是否需要执行往返动画 取值: normal, 默认的取值, 执行完一次之后回到起点继续执行下一次 alternate, 往返动画, 执行完一次之后往回执行下一次 */ animation-direction: alternate; } @keyframes sport { from{ margin-left: 0; } to{ margin-left: 500px; } } div:hover{ /* 告诉系统当前动画是否需要暂停 取值: running: 执行动画 paused: 暂停动画 */ animation-play-state: paused; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>102-动画模块-其它属性下</title> <style> *{ margin: 0; padding: 0; } .box1 { width: 100px; height: 50px; background-color: red; position: absolute; left: 0; top: 0; animation-name: sport; animation-duration: 5s; } @keyframes sport { 0%{ left: 0; top: 0; } 25%{ left: 300px; top: 0; } 70%{ left: 300px; top: 300px; } 95%{ left: 0; top: 300px; } 100%{ left: 0; top: 0; } } .box2{ width: 200px; height: 200px; background-color: blue; margin: 100px auto; animation-name: myRotate; animation-duration: 5s; animation-delay: 2s; /* 通过我们的观察, 动画是有一定的状态的 1.等待状态 2.执行状态 3.结束状态 */ /* animation-fill-mode作用: 指定动画等待状态和结束状态的样式 取值: none: 不做任何改变 forwards: 让元素结束状态保持动画最后一帧的样式 backwards: 让元素等待状态的时候显示动画第一帧的样式 both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式 */ /*animation-fill-mode: backwards;*/ /*animation-fill-mode: forwards;*/ animation-fill-mode: both; } @keyframes myRotate { 0%{ transform: rotate(10deg); } 50%{ transform: rotate(50deg); } 100%{ transform: rotate(70deg); } } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
3 动画连写
1.动画模块连写格式
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;
2.动画模块连写格式的简写
animation:动画名称 动画时长;
4 背景尺寸
1.什么是背景尺寸属性
背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>112-背景尺寸属性</title> <style> *{ margin: 0; padding: 0; } ul{ width: 800px; height: 500px; margin: 0 auto; } ul li{ list-style: none; float: left; width: 200px; height: 200px; margin: 10px 10px; border: 1px solid #000; text-align: center; line-height: 200px; } ul li:nth-child(1){ background: url("images/dog.jpg") no-repeat; } ul li:nth-child(2){ background: url("images/dog.jpg") no-repeat; /* 第一个参数:宽度 第二个参数:高度 */ background-size:200px 100px; } ul li:nth-child(3){ background: url("images/dog.jpg") no-repeat; /* 第一个参数:宽度 第二个参数:高度 */ background-size:100% 80%; } ul li:nth-child(4){ background: url("images/dog.jpg") no-repeat; /* 第一个参数:宽度 第二个参数:高度 */ background-size:auto 100px; } ul li:nth-child(5){ background: url("images/dog.jpg") no-repeat; /* 第一个参数:宽度 第二个参数:高度 */ background-size:100px auto; } ul li:nth-child(6){ background: url("images/dog.jpg") no-repeat; /* cover含义: 1.告诉系统图片需要等比拉伸 2.告诉系统图片需要拉伸到宽度和高度都填满元素 */ background-size:cover; } ul li:nth-child(7){ background: url("images/dog.jpg") no-repeat; /* contain含义: 1.告诉系统图片需要等比拉伸 2.告诉系统图片需要拉伸到宽度或高度都填满元素 */ background-size:contain; } </style> </head> <body> <!-- 1.什么是背景尺寸属性 背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小 --> <ul> <li>默认</li> <li>具体像素</li> <li>百分比</li> <li>宽度等比拉伸</li> <li>高度等比拉伸</li> <li>cover</li> <li>contain</li> </ul> </body> </html>
效果：
