天天看点

学习web前端历程(十五)

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: "宋体";

}
           

页面显示:

学习web前端历程(十五)

继续阅读