CSS3渐变、转换、照片墙(转换练习)
一、CSS3渐变(gradient)
CSS3渐变可以让你在两个或多个指定的颜色之间平稳的过渡
1、线性渐变(linear-gradient)
向下(默认)、向上(to top)、向左(to left)、向右(to right)、
对角线(to right bottom、to left top)
background: linear-gradient( direction,color1,color2,...)
有三种方法:
1.默认从上到下
.linear{ 1.默认
width: 100%;
height: 200px;
background: -webkit-linear-gradient(red,blue);
background: -moz-linear-gradient(red,blue);
background: -o-linear-gradient(red,blue);
background: linear-gradient(red,blue);标准语法
}
2.自定义、自定义数字
.linear{ 2.自定义
width: 100%;
height: 200px;
/*background: -webkit-linear-gradient(left,red,blue);*/
/*background: -moz-linear-gradient(to right,red,blue);*/
/*background: -o-linear-gradient(to right,red,blue);*/
/*background: linear-gradient(to top,red,blue);
background: linear-gradient(to right bottom,red,blue);
}
3.重复渐变
.linear{ 自定义数字
width: 100%;
height: 200px;
/*background: -webkit-linear-gradient(left,red,blue);*/
/*background: -moz-linear-gradient(to right,red,blue);*/
/*background: -o-linear-gradient(to right,red,blue);*/
/*background: linear-gradient(to top,red,blue);
background: linear-gradient(180deg,red,blue);
}
线性渐变完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
<style>
/* .linear{ 1.默认
width: 100%;
height: 200px;
background: -webkit-linear-gradient(red,blue);
background: -moz-linear-gradient(red,blue);
background: -o-linear-gradient(red,blue);
background: linear-gradient(red,blue);标准语法
}*/
/* .linear{ 2.自定义
width: 100%;
height: 200px;
/*background: -webkit-linear-gradient(left,red,blue);*/
/*background: -moz-linear-gradient(to right,red,blue);*/
/*background: -o-linear-gradient(to right,red,blue);*/
/*background: linear-gradient(to top,red,blue);
background: linear-gradient(to right bottom,red,blue);
}*/
/*.linear{ 自定义数字
width: 100%;
height: 200px;
/*background: -webkit-linear-gradient(left,red,blue);*/
/*background: -moz-linear-gradient(to right,red,blue);*/
/*background: -o-linear-gradient(to right,red,blue);*/
/*background: linear-gradient(to top,red,blue);
background: linear-gradient(180deg,red,blue);
}*/
.linear{
width: 100%;
height: 200px;
background: -webkit-repeating-linear-gradient(red,yellow 10%,blue 20%);
background: -moz-repeating-linear-gradient(red,yellow 10%,blue 20%);
background: -o-repeating-linear-gradient(red,yellow 10%,blue 20%);
background: repeating-linear-gradient(red,yellow 10%,blue 20%);
}
</style>
</head>
<body>
<!--
1.默认从上到下
2.自定义、自定义数字
3.重复渐变
-->
<div class="linear"></div>
</body>
</html>
2、径向渐变(background: radial-gradient)
由他们的中心定义
background: radial-gradient(center shape size,start-color,last-color)
默认渐变中心是center,默认形状是椭圆形
(1)需要设置的参数
①颜色(可以设置多个)
②中心(at center center)
语法:
at X Y 都是从左上角原点的参考点
X Y可以是像素(at 30px 30 px);
可以用百分比(at 30% 30%);
也可以是(top left / right / center / bottom/)at left bottom
③大小(size)
closest-side (最近边)
farthest-side(最远边)
closest-corner (最近角)
farthest-corner(最远角)默认
④形状(shape)
椭圆(ellipse)
圆形(circle)
径向渐变完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向渐变</title>
<style>
.radi{
width: 400px;
height: 300px;
/*background: -webkit-radial-gradient(at 30px 50px,red,blue);*/
background: -moz-radial-gradient(at 30% 50%,red,blue);
background: -o-radial-gradient(at center center,red,blue);
/*background: radial-gradient(closest-side at 30px 50px,red,blue);*/
/*background: radial-gradient(closest-corner at 30px 50px,red,blue);*/
/*background: radial-gradient(farthest-side at 30px 50px,red,blue);*/
/*background: radial-gradient(circle farthest-corner at 30px 50px,red,blue);*/
/*background: radial-gradient(circle closest-corner at 30px 30px,red,blue); 圆*/
background: radial-gradient(ellipse closest-corner at 30px 50px,red,blue); /*椭圆*/
}
</style>
</head>
<body>
<div class="radi"></div>
</body>
</html>
二、转换(用得多)
transform(2D转换)
CSS3的转换允许我们对元素进行旋转、缩放、移动、倾斜
1、转换
使元素在形状或者位置上发生改变
属性:transform
(1)位移(用得多、手机官网页面悬停)
transform:translate( );
transform:translateX( ); //水平
transform:translateY( ); //垂直
注意:
①右下为正,可为负值;
②当为一个值是是水平方向,两个值时是水平和垂直方向
(2)旋转(用得多)
旋转整个坐标轴(默认旋转点为中心)
transform: rotate( ); //单位deg
transform: rotateX( );
transform: rotateY( );
transform- origin( left top ); //设置旋转点
注意:
①正值为顺时针,负值为逆时针
②当位移和旋转都存在时,旋转放在后边
(3)缩放 (用得多)
缩小放大
transform: scale();
transform: scaleX(); //水平缩放
transform: scaleY(); //垂直缩放
取值 0—1(缩小)
>2 (放大)
注意:
①当为一个值时,等比例放大
②当为两个值时是水平和垂直方向
(4)倾斜(与旋转相似)
transform: skew( ); //单位deg、
transform: skewX();
transform: skewY();
注意:
①当为一个值是是水平方向,两个值时是水平和垂直方向
②正数:向左 负数:向右
③当为两个值时,避免两个值相加为90(看不见)
照片墙的练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/zhaopianqiang.css"/>
</head>
<body>
<div class="xiaozhan">
<h2>肖战</h2>
<div class="photo">
<img src="images/1.jpeg" class="photo1">
<img src="images/2.jpg" class="photo2">
<img src="images/3.jpeg" class="photo3">
<img src="images/4.jpeg" class="photo4">
<img src="images/5.jpeg" class="photo5">
<img src="images/6.jpeg" class="photo6">
<img src="images/7.jpeg" class="photo7">
<img src="images/8.jpeg" class="photo8">
<img src="images/9.jpeg" class="photo9">
<img src="images/10.jpeg" class="photo10">
</div>
</div>
</body>
</html>
zhaopianqiang.css
body{
background-color: #d5d5d5;
}
.photo{
width: 960px;
height: 450px;
margin:0 auto;
margin-top: 42px;
position: relative;
}
.xiaozhan>h2{
font-size: 32px;
font-weight: bolder;
height: 42px;
line-height: 42px;
}
.photo>img{
width: 200px;
border: 6px solid white;
position: absolute;
}
.photo1{
left: 0;
top: 0;
}
.photo2{
top: 0;
left: 200px;
}
.photo3{
top=50;
left: 350px;
}
.photo4{
top: 0;
left: 500px;
}
.photo5{
top: 0;
left: 700px;
}
.photo6{
top: 100px;
right: 0;
}
.photo7{
top: 200px;
right:160px;
}
.photo8{
top: 200px;
left: 180px;
}
.photo9{
top: 300px;
left: 400px;
}
.photo10{
top: 250px;
left:0;
}
.photo>img:hover{
box-shadow: 0 15px 10px #d5d5d5;
z-index: 66;
transform: rotate(15deg) scale(1.1);
}
reset.css
a{
text-decoration: none;
}
ol,dl,li,ul{
list-style: none;
}
ol,dl,li,ul,div{
margin: 0px;
padding: 0px;
text-align: center;
color: #333;
font-size: 14px;
font-family: "宋体";
}
页面显示: