过渡
<!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;
}
.box1 {
width: 500px;
height: 500px;
background-color: gray;
}
.box2 {
width: 100px;
height: 100px;
background-color: aqua;
transition: all 2s;
/*
过渡(transition):
通过过渡可以指定一个属性发生变化时的切换方式
过渡必须是从一个有效值向另外一个有效值进行过渡
transition-property
指定要执行过渡的属性:
width,heigt,...(多个属性用,号分开;能计算的属性)
all(代表所有属性)
transition-duration
指定过渡效果的持续时间
时间单位：s 和 ms , 1s = 1000ms
transition-timing-function
过渡的时序函数
指定过渡的执行方式
ease 默认值，慢速开始，先加速后减速
linear 匀速
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速后减速
cubic-bezier() 来指定时序函数
称为三次贝塞尔曲线,主要是生成速度曲线的函数
网址：https://cubic-bezier.com/
transition-timing-function: cubic-bezier(0,0,1,1); 表示linear匀速
step()
分步执行过渡效果
step(2) 表示分两步执行过渡
可以设置第二个值
step(步数,start/end)
start 在时间开始时执行过渡
end 在时间结束时执行过渡(默认值)
transition-delay
过渡效果的延迟，等待一段时间后才执行过渡
时间单位: s
transition 过渡效果的简写属性，可以设置过渡效果的所有属性
如果要设置延迟，设置的两个时间中第一个时间是持续效果
*/
}
.box1:hover .box2 {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>
渐变
<!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>
.box1 {
width: 200px;
height: 200px;
/*
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过滤的效果
渐变就是图片，需要通过background-image来设置
linear-gradient
线性渐变，颜色沿着一条直线发生变化
可以指定一个渐变的方向
to left
to right
to top
to bottom
deg 表示度数
turn 表示圈
渐变可以指定多个颜色，默认情况下平均分布
在颜色后面可以指定大小来设置颜色的分布大小
repeating-linear-gradient
可以平铺的线性渐变
*/
background-image: linear-gradient(to left,red 50px,yellow);
}
.box2 {
width: 200px;
height: 200px;
/*
radial-gradient
径向渐变(放射性效果)
默认情况下径向渐变的形状根据元素的形状来计算的
正方形 -> 圆形
长方形 -> 椭圆形
也可以手动指定径向渐变的大小
radial-gradient(大小 at 位置, 颜色 位置, ...)
大小
circle 圆形
ellipse 椭圆形
elosest-side 近边
closest-corner 近角
farthest-side 远边
farthest-corner 远角
位置
left right top bottom center
*/
background-image: radial-gradient(50px 50px at center center,red,yellow);
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
动画
<!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;
}
.box1 {
width: 500px;
height: 500px;
background-color: gray;
}
.box2 {
width: 100px;
height: 100px;
background-color: aqua;
/*
设置动画
使用animation-name属性，要对当前元素生效的关键帧的名字(动画)
*/
animation-name: test;
/*
动画的执行时间
*/
animation-duration: 2s;
/*
动画的延迟时间
*/
animation-delay: 2s;
/*
动画执行的函数
*/
animation-timing-function: linear;
/*
动画执行的次数
*/
animation-iteration-count: 2;
/*
动画的运行方向
normal 默认值 从from到to
reverse 从to到from
alternate 从from到to 重复执行时 反向执行
alternate-reverse 从to到from 重复执行时 反向执行
*/
animation-direction: normal;
/*
动画的播放状态
running 默认值 动画执行
paused 动画暂停
*/
animation-play-state: running;
/*
动画的填充模式
none 默认值 动画执行完元素返回到原来的位置
forwards 动画执行完元素停留在动画结束的位置
backwards 动画延时等待时元素就会处于开始位置
both 结合 forwards 和 backwards
*/
animation-fill-mode: both;
/*
animation 动画简写属性，可以设置所有的动画属性
*/
}
/*
动画：
动画和过渡类型，都是可以实现一些动态的效果
不同的是过渡需要在某个属性发生变化时才会触发
而动画可以自动触发动态效果
设置动画效果，必须要先设置一个关键帧，关键帧设置了动画执行每个步骤
*/
/*
@keyframes 关键帧，后面表示这个关键帧的名字(test)
*/
@keyframes test {
/*
from表示动画的开始位置
可以使用%
*/
from{
margin-left: 0;
}
/*
to表示动画的结束位置
可以使用%
*/
to{
margin-left: 400px;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
</div>
</body>
</html>
变形平移旋转缩放
<!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>
.box1 {
width: 100px;
height: 100px;
background-color: aquamarine;
margin: 0 auto;
margin-top: 100px;
/*
变形：
指通过CSS来改变元素的形状或者位置
变形不会影响页面的布局
通过transform来设置元素的变形效果
平移：
translateX() 沿着X轴方向平移
translateY() 沿着Y轴方向平移
translateZ() 沿着Z轴方向平移
平移元素，百分比是相对于自身计算的
通过平移可以设置鼠标移动到某个元素上时的悬浮移动效果
*/
transform: translate(50%);
}
.box2 {
width: 100px;
height: 100px;
background-color: gray;
margin: 0 auto;
}
body {
/* 设置当前网页的视距 */
perspective: 800px;
}
.box3 {
width: 100px;
height: 100px;
background-color: gray;
margin: 0 auto;
transform: 2s;
}
body:hover .box3 {
/*
Z轴平移：
调整元素在Z轴的位置
正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近
Z轴平移属于立体效果(近大远小)，默认情况下网页不支持透视(需要设置网页的视距)
*/
transform: translateZ(100px);
}
.box4 {
width: 100px;
height: 100px;
background-color: black;
margin: 0 auto;
/*
旋转：
通过旋转可以使元素沿着X、Y、Z轴旋转知道的角度
rotateX()
rotateY()
rotateZ()
*/
transform: rotateZ(45deg);
}
.box5 {
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
transition: 2s;
}
.box5:hover {
/*
缩放：
对元素进行缩放
scaleX() 水平方向缩放
scaleY() 垂直方向缩放
scale() 双方向缩放
*/
transform: scale(20);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
