css动画和渐变
css渐变
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果,渐变是图片，需要通过background-image来设置
-
linear-gradient():线性渐变，颜色沿着一条直线发生变化.box2 { width: 200px; height: 200px; background-image: linear-gradient(red,yellow); } -
线性渐变的开头，我们可以指定一个渐变的方向
- to left
- to right
- to bottom
- to top
- deg deg表示度数
- turn 表示圈
.box2 { width: 200px; height: 200px; background-image: linear-gradient(to right,red,yellow); } -
渐变可以同时指定多个颜色，多个颜色默认情况下平均分布,也可以手动指定渐变的分布情况
.box2 {
width: 200px;
height: 200px;
background-image: linear-gradient(red,yellow,green,pink,black,blue);
}
repeating-linear-gradient()可以平铺的线性渐变
.box3 {
width: 200px;
height: 200px;
background-image: repeating-linear-gradient(to right ,red, yellow 50px);
}
-
radial-gradient()径向渐变(放射性的效果)- 默认情况下径向渐变的形状根据元素的形状来计算的
- 正方形 的径向渐变为圆形
- 长方形的径向渐变为椭圆形
- 我们也可以手动指定径向渐变的大小
- circle 圆形
- ellipse 椭圆
- closest-side 近边
- closest-corner 近角
- farthest-side 远边
- farthest-corner 远角
- 也可以指定渐变的位置
- 语法：
radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置) - 位置：
top right left center bottom
.box1{ width: 300px; height: 300px; background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa) } - 默认情况下径向渐变的形状根据元素的形状来计算的
css动画
过渡
-
通过过渡可以指定一个属性发生变化时的切换方式
-
通过过渡可以创建一些非常好的效果，提升用户的体验
-
transition-property:指定要执行过渡的属性- 多个属性间使用逗号隔开，如果所有属性都需要过渡，则使用all关键字
- 大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
transition-property: height,width transition-property: all -
transition-duration:指定过渡效果的持续时间- 时间单位：
s和ms1s = 1000ms
transition-duration: 2s - 时间单位：
-
transition-timing-function:过渡的时序函数，指定过渡的执行方式- ease:默认值，慢速开始，先加速，后减速
- linear:匀速运动
- ease-in:加速运动
- ease-out:减速运动
- ease-in-out：先加速，后减速
- cubic-bezier():
https://cubic-bezier.com
transition-timing-function: cubic-bezier(.43,-0.8,.95,.88);- steps():分步执行过渡效果，可以设置两个值
- end：在时间结束时执行过渡
- start：在时间开始时执行过渡
-
transition-delay：过渡效果的延迟，等待一段时间后在执行过渡transition-delay: 2s -
transirion可以同事设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个时持续时间，第二个延迟
/* 第一个是持续时间，第二个是延迟 */
transition: 2s margin-left 1s cubic-bezier(.24, .95, .82, -0.88);
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 800px;
height: 800px;
background-color: silver;
overflow: hidden;
}
.box2 {
background-color: #bfa;
transition-property: all;
transition-duration: 3s;
transition-timing-function: cubic-bezier(.43,-0.8,.95,.88);
transition-delay: 2s;
}
.box1 div {
width: 100px;
height: 100px;
margin-bottom: 100px;
margin-left: 0;
}
.box3 {
background-color: orange;
}
.box1:hover .box2 {
margin-left: 700px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
动画
动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果
设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤
-
定义动画
@keyframes test { /* from表示动画的开始位置 也可以使用 0% */ from { margin-left: 0; background-color: orange; } /* to动画的结束位置 也可以使用100%*/ to { background-color: red; margin-left: 700px; } } -
动画的使用
<head> <style> .box1 { width: 800px; height: 800px; background-color: silver; overflow: hidden; } .box1 div { width: 100px; height: 100px; margin-bottom: 100px; margin-left: 10px; } .box2 { background-color: #bfa; animation: test 2s 2 1s alternate; } @keyframes test { from { margin-left: 0; background-color: orange; } to { background-color: red; margin-left: 700px; } } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> -
其他属性
-
animation-name：要对当前元素生效的关键帧的名字animation-name: test; -
animation-duration:动画的执行时间animation-duration: 4s; -
animation-delay:动画的延时animation-delay: 2s; -
animation-timing-function:过渡的时序函数animation-timing-function: ease-in-out; -
animation-iteration-count:动画执行的次数- 数字：次数
infinite:无限执行
animation-iteration-count: 1; animation-iteration-count: infinite 无限执行 -
animation-direction:指定动画运行的方向 -
normal:默认值 从 from 向 to运行 每次都是这样reverse:从 to 向 from 运行 每次都是这样alternate:从 from 向 to运行 重复执行动画时反向执行alternate-reverse:从 to 向 from运行 重复执行动画时反向执行
animation-direction: alternate-reverse; -
animation-play-state:设置动画的执行状态running:默认值 动画执行paused: 动画暂停
animation-play-state: paused; -
animation-fill-mode:动画的填充模式none:默认值 动画执行完毕元素回到原来位置forwards:动画执行完毕元素会停止在动画结束的位置backwards:动画延时等待时，元素就会处于开始位置both:结合了forwards 和 backwards
animation-fill-mode: both;
-
变形
变形就是指通过CSS来改变元素的形状或位置，变形不会影响到的页面的布局
-
transform:用来设置元素的变形效果-
平移：(平移元素，百分比是相对于自身计算的)
translateX():沿着X轴方向平移translateY():沿着Y轴方向平移translateZ():沿着Z轴方向平移
.box1 { width: 200px; height: 200px; background-color: #bfa; margin: 0 auto; margin-top: 200px; transform: translateX(50%); }
-
平移解决居中问题
-
使用
position解决居中问题,但是这种居中效果只是当box1定长和定宽的时候才可以保证居中效果。<head> <style> .box1 { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } </style> </head> <body> <div class="box1"></div> </body> -
如果取消了
width和height的设置，由其内部的内容自动撑起其高度，就无法保证居中效果。<head> <style type="text/css"> .box2 { background-color: pink; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } </style> </head> <body> <div class="box2"> aaa </div> </body> -
使用平移来实现居中效果
left：让其 盒子的左上角的那个点处于宽度 50%的位置top:让其 盒子的左上角的那个点 处于高度 50% 的位置transform:- 使用
translateX()来让它自身像左平移 自身宽度的50% 使得中点位于其宽度中心 - 使用
translateY()来让它自身向上平移 自身高度的 50% 使得中点位于其高度中心
- 使用
<head> <style type="text/css"> .box2{ background-color: pink; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } </style> </head> <body> <div class="box2"> aaa </div> </body>
变形-突出效果的实现：
<head>
<style type="text/css">
body{
background-color: rgb(236, 236, 236);
}
.box1, .box2 {
width: 200px;
height: 300px;
background-color: #fff;
margin-top: 20px;
margin-left: 10px;
float: left;
transition: all .3s;
}
div:hover{
transform: translateY(-3px);
box-shadow: 0 0 10px rgba(0, 0, 0 ,.3)
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
z轴的变形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html{
/* 设置当前网页的视距为800px，人眼距离网页的距离 */
perspective: 800px;
}
body{
border: 1px red solid;
background-color: rgb(241, 241, 241);
}
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
margin: 200px auto;
/*
z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，
距离越大，元素离人越近
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果
必须要设置网页的视距
*/
transition:2s;
}
body:hover .box1{
transform: translateZ(400px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
旋转
语法：
rotateX():沿X轴旋转rotateY():沿Y轴旋转rotateZ():沿Z轴旋转
transform: rotateZ(.25turn);
transform: rotateX(180deg);
演示：
<head>
<style>
.box1{
width: 320px;
height: 320px;
background-color: #bfa;
margin: 200px auto;
transition:2s;
}
body:hover .box1{
transform: translateX(400px) rotateZ(180deg);
/* 是否显示元素的背面 */
backface-visibility: visible;
}
</style>
</head>
<body>
<div class="box1">
<img src="bbb.jpg" alt="">
</div>
</body>
缩放
transform:scale(2); --水平方向缩放
transform:scaleX(2); --垂直方向缩放
transform:scaleY(2); --双方向的缩放
演示
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html{
perspective:800px;
}
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
transition:2s;
margin: 100px auto;
}
.box1:hover{
transform:scale(2)
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
对图片的缩放效果
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html{
perspective:800px;
}
.img-wrapper{
width: 200px;
height: 200px;
border: 1px red solid;
overflow: hidden;
}
img{
transition: .2s;
}
.img-wrapper:hover img{
transform:scale(1.2);
}
</style>
</head>
<body>
<div class="img-wrapper">
<img src="aaa.jpg" width="100%">
</div>
</body>
</html>
903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
