目录
1.css变换的效果
1.2D转换
css3提供的2D转换,都是通过transform属性进行设置
1.translate() 方法从其当前位置移动元素(根据为 X 轴和 Y 轴指定的参数)-------- 是一种平移效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D转换</title>
<style type="text/css">
div{
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
#div2{
transform:translate(50px,100px);
}
</style>
</head>
<body>
<div>这是第一个div</div>
<div id="div2">这是第二个div</div>
</body>
</html>
2.rotate() 方法根据给定的角度顺时针或逆时针旋转元素,可以取负值,元素进行逆时针旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D转换</title>
<style type="text/css">
div{
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
}
#div2{
/* transform:translate(50px,100px); */
transform:rotate(30deg);
}
#div3{
transform:rotate(-30deg);
}
</style>
</head>
<body>
<div>这是第一个div</div>
<div id="div2">这是第二个div</div>
<div id="div3">这是第三个div</div>
</body>
</html>
3.scale() 方法增加或减少元素的大小(根据给定的宽度和高度参数)
scaleX() 方法增加或减少元素的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D转换</title>
<style type="text/css">
div{
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
margin: 0 auto;
}
#div2{
/* transform:translate(50px,100px); */
/*transform:rotate(30deg);*/
transform:scale(0.5,0.5);
}
#div3{
/*transform:rotate(-30deg);*/
transform:scale(2,2);
}
</style>
</head>
<body>
<div>这是第一个div</div>
<div id="div2">这是第二个div</div>
<div id="div3">这是第三个div</div>
</body>
</html>
4.skew() 方法使元素沿 X 和 Y 轴倾斜给定角度
skewX() 方法使元素沿 X 轴倾斜给定角度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D转换</title>
<style type="text/css">
div{
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
margin: 0 auto;
}
#div2{
/* transform:translate(50px,100px);
transform:rotate(30deg); */
/*transform:scale(0.5,0.5) rotate(30deg);*/
transform:skew(20deg,10deg);
}
#div3{
transform:skewY(20deg);
}
</style>
</head>
<body>
<div>这是第一个div</div>
<div id="div2">这是第二个div</div>
<div id="div3">这是第三个div</div>
</body>
</html>
5.matrix() 方法把所有 2D 变换方法组合为一个。
matrix() 方法可接受六个参数,其中包括数学函数,这些参数使您可以旋转、缩放、移动(平移) 和倾斜元素。
2.3D转换
1.rotateX() 方法使元素绕其 X 轴旋转给定角度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D转换</title>
<style type="text/css">
div{
width: 100px;
height: 75px;
background-color: red;
border: 1px solid black;
margin: 0 auto;
}
#div2{
transform:rotateX(180deg);
}
</style>
</head>
<body>
<div>这是第一个div</div>
<div id="div2">这是第二个div</div>
<div id="div3">这是第三个div</div>
</body>
</html>
2.rotateY() 方法使元素绕其 Y 轴旋转给定角度
rotateZ() 方法使元素绕其 Z 轴旋转给定角度
![](https://i-blog.csdnimg.cn/blog_migrate/632eab6f3b238aa8854d48dc46b3756b.png)
2.css的过度效果
元素从一种效果过渡另一种效果上
要求:
1、把效果添加到哪个CSS属性
2、过渡效果的时长
3、效果触发的动作(hover)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡效果</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
border: 1px solid black;
background: yellow;
}
div{
/*宽度2秒的过渡*/
transition:width 10s;
}
div:hover{
width: 500px;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
多项改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡效果</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
border: 1px solid black;
background: yellow;
}
div{
transition:width 3s,height 3s,transform 3s;
}
div:hover{
width: 500px;
height: 500px;
transform:rotate(40deg);
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
语法
3.动画效果
@keyframes规则去创建动画,实现将一个元素从一种css样式变换到另一种css样式,使用from和
to或者使用%
![](https://i-blog.csdnimg.cn/blog_migrate/6fa5e4e8d1afcffca87eb8c1033ba62a.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
@keyframes first{
0%{
background-color: red;
}
50%{
background-color: yellow;
}
100%{
background-color: red;
}
}
div{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
animation-name: first;
/*动画持续时间*/
animation-duration:10s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
@keyframes first{
0% {
background-color:red;
left:0px;
top:0px;
}
25% {
background-color:yellow;
left:200px;
top:0px;
transform:rotate(30deg)
}
50% {
background-color:blue;
left:200px;
top:200px;
transform:rotate(60deg)
}
75% {
background-color:green;
left:0px;
top:200px;
transform:rotate(100deg)
}
100% {
background-color:red;
left:0px;
top:0px;
transform:rotate(180deg)
}
}
div{
width: 200px;
height: 200px;
border: 1px solid black;
background-color: red;
position: relative;
animation-name: first;
/* 动画持续时间 */
animation-duration:10s;
/* animation:first 10s; */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
4.渐变效果
1.线性渐变(向下/向上/向左/向右/对角线)
1.语法格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变</title>
<style type="text/css">
#box{
height: 200px;
background-color: red; /*可能有些浏览器不支持渐变的属性*/
/*默认的渐变方向是从上到下 to bottom*/
background-image: linear-gradient(red,yellow,green);
}
/*从左到右的渐变*/
#box{
height: 200px;
background-image: linear-gradient(to right,red,yellow,green);
}
/*从右到左的渐变*/
#box{
height: 200px;
background-image: linear-gradient(to left,red,yellow,green);
}
/*对角线渐变*/
#box{
height: 200px;
background-image: linear-gradient(to bottom right,red,yellow,green);
}
/*从下到上的渐变*/
#box{
height: 200px;
background-image: linear-gradient(to top,red,yellow,green);
}
/*有限定角度的线性渐变 0deg 等于向上(to top)。值 90deg 等于向右(to right)。值 180deg 等于向下(to bottom)*/
#box{
height: 200px;
background-image: linear-gradient(-90deg,red,yellow,green,blue);
}
/*不透明度 rgba() 函数中的最后一个参数可以是 0 到 1 的值,它定义颜色的透明度:0 表示全透明,1 表示全彩色(无透明)
使用rgb ----- rrggbb 颜色表示法 a表示就是不透明度*/
.box{
height: 200px;
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
/*重复线性渐变*/
.box{
height: 200px;
background-image: repeating-linear-gradient(red,yellow 10%,blue 20%);
}
/*有角度的重复线性渐变*/
.box{
height: 200px;
background-image: repeating-linear-gradient(45deg,red,blue 10%);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.径向渐变
1.语法格式
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
size 参数定义渐变的大小。它可接受四个值:
closest-side
farthest-side
closest-corner
farthest-corner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变</title>
<style type="text/css">
.box{
height: 300px;
background-image: radial-gradient(red,yellow,blue)
}
.box{
height: 300px;
background-image: radial-gradient(red 10%,yellow 20%,blue)
}
.box{
height: 300px;
background-image: radial-gradient(circle,red 10%,yellow 20%,blue)
}
.box{
height: 300px;
background-image: repeating-radial-gradient(red,yellow 10%,blue 20%)
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
5.圆角
通过 CSS border-radius 属性,可以实现任何元素的“圆角”样式
四个值 - border-radius: 15px 50px 30px 5px;(依次分别用于:左上角、右上角、右下角、左下角)
三个值 - border-radius: 15px 50px 30px;(第一个值用于左上角,第二个值用于右上角和左下角,
第三个用于右下角
两个值 - border-radius: 15px 50px;(第一个值用于左上角和右下角,第二个值用于右上角和左下
角)
一个值 - border-radius: 15px;(该值用于所有四个角,圆角都是一样的)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
border-radius:25px;
}
.box2{
width: 200px;
height: 200px;
border:1px solid blue;
border-radius: 25px;
}
.box3{
width: 200px;
height: 200px;
background:url(哆啦A梦.jpg);
border-radius: 25px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>