学习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前端历程（十五）

学习web前端历程（十五）

CSS3渐变、转换、照片墙（转换练习）

继续阅读

CSS3 渐变边框，按钮样式、设计图标、电子优惠券详解！实例设计：实例设计：

JSONObject把String类型转换为JSON格式，GSON把String类型转换为JSON格式JSONObject把String类型转换为JSON格式

笔记整理-px和dp,px和sp之间的转换

屏幕分辨率单位转换详解

Enterprise Architect 从时序图自动生成协作图

php 友好时间转换方法

Springboot 使用Jackson 操作 json数据，各场景实例

Java 将带有小数点的字符串转成Integer类型数值

Java 将带有 ‘T’的时间字符串转换成yyyy-MM-dd HH:mm:ss 格式

Springboot 自定义注解AOP实现时间参数格式转换

如何将文件由PDF转换为JPG图片

Enum与string、int的转换

推荐一个PDF转World非常好用的一个软件-ABBYY

NSMutableAttributedString与NSString相互转换

将jar包转换成可执行.exe文件写在前面的话将jar转换成exe

二进制码和格雷码转换问题