css3总结(二)背景色渐变、background、边框图片、过渡、2d变换、3d变换

1、背景的线性渐变
2、径向渐变---从中间到外围渐变
3、background
4、提升移动端响应区域的大小
5、边框图片
6、过渡
7、2d转换----2d移动
8、2d转换----缩放
9、2d转换---旋转
10、2d转换---斜切
11、旋转中心设置transform-origin
12、案例：扑克牌旋转
13、同时添加多个tranform属性
14、子盒子居中
15、3d移动、3d缩放、3d旋转

1、背景的线性渐变    <--返回目录
   * background:linear-gradient(方向,开始颜色1 位置,颜色2 位置,颜色3 位置···);
       - backgournd:linear-gradient(to right,red,blue);
       - backgournd:linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%);
       - 方向可以是
           30deg
           to top === 0deg
            to rigth === 90deg
           to bottom === 180deg 默认
           to left === 270deg

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 1000px;
            height: 100px;
            margin:30px auto;
            border: 1px solid #000;
        }
        /* 语法：
            linear-gradient(方向，起始颜色，终止颜色);
            方向：to left   to right  to top   to bottom 　角度　30deg
        */
        div:nth-child(1){
            background-image: linear-gradient(to right,yellow ,green);
        }

        div:nth-child(2){
            background-image: linear-gradient(yellow ,green);
        }

        div:nth-child(3){
            width: 200px;
            height: 200px;
            background-image: linear-gradient(135deg,yellow,green);
        }


        div:nth-child(4){
            background-image: linear-gradient(to right,
                yellow 0% ,
                red 40% ,
                green 70% ,
                blue 100%);
        }

        div:nth-child(5) {
            background-image: linear-gradient(45deg,
                yellow 0%,
                yellow 25%,
                blue 25%,
                blue 50%,
                red 50%,
                red 75%,
                green 75%,
                green 100%
            );
        }

        div:nth-child(6){
            background-image: linear-gradient(135deg,
                #000 0%,
                #000 25%,
                #fff 25%,
                #fff 50%,
                #000 50%,
                #000 75%,
                #fff 75%,
                #fff 100%
            );

            /*background-repeat: no-repeat;*/
            background-size:100px 100%;

            animation: gun 1s infinite linear;
        }

        @keyframes gun {
            0%{

            }

            100%{
                background-position: 100px 0px;
            }
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

2、径向渐变---从中间到外围渐变    <--返回目录
   * background:radial-gradient(red,blue) 默认从中心向外围渐变
   * 用法：background:radial-gradient(形状，大小，坐标，颜色);
       - 形状可以是：circle圆形 ellipse（默认值）适配当前的形状，如果容器是长方形，形状是椭圆
       - 大小取值：closest-side最近边 farthest-side 最远边 closest-corner最近角 closest-corner最远角，默认是最远角
       - 坐标：默认正中心，可以赋值坐标，也可以赋值关键字，left、center、right、top、bottom
           at 50px 20px   或 at left top
   * 例子；
       - background:radial-gradient(at left top, red, blue);
       - background:radial-gradient(circle farthest-side at 20px 30px, red, blue);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 250px;
            height: 250px;
            border: 1px solid #000;
            margin: 20px auto;
        }
        /*
            径向渐变：
            radial-gradient（辐射半径, 中心的位置，起始颜色，终止颜色）;
            中心点位置：at  left  right  center bottom  top
        */
        div:nth-child(1){
            background-image: radial-gradient(at left top,yellow,green);
        }

        div:nth-child(2){
            background-image: radial-gradient(at 50px 50px,yellow,green);
        }

        div:nth-child(3){
            background-image: radial-gradient(100px at center,yellow ,green);
        }

        div:nth-child(4){
            background-image: radial-gradient(100px at center,
            yellow 0% ,
            green 30%,
            blue 60%,
            red 100%);
        }

        div:nth-child(5){
            background-image: radial-gradient(100px 50px  at center,yellow ,green);
        }


    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

3、background <--返回目录
* background-color:背景色

   * background-image:url("") 背景图片
       - 如果图片大于容器，默认从容器左上角开始放置
       - 如果图片小于容器，图片默认平铺

   * background-repeat:round/space
       - round:将图片缩放后平铺，以紧凑平铺
       - space:图片平铺，但是图片不会缩放，中间可能出现间隔

   * background-attachment:scroll|fixed|local;背景是否滚动
       - fixed图片的定位是基于浏览器
       - scroll图片的定位是基于div,默认是scroll。当滚动容器的滚动条时，背景不动，当滚动浏览器的滚动条时，背景跟着动。
       - local:当盒子里面内容超出盒子高度，盒子出现滚动条；当滚动容器的滚动条时，背景也跟着动。

   * background-size:length/auto/contain/cover/pencentage
       - background-size:300px 500px; 宽高
       - background-size:300px；宽，高度保存等比例缩放
       - background-size:50% 50%;   参照容器*50%
       - background-size:contain; 按比例调整图片，使图片完全包含于盒子，可能造成空白区。
       - background-size:cover; 按比例调整图片，使图片自适应整个盒子，盒子没有空白区。
       - 建议：使用这个属性时，确定图片的宽高比是否与容器宽高比一致；图片等比例缩小，不要放大，否则图片失真。

    * background-position:
       left top
       left center
       left bottom
       right top
       right center
       right bottom
       center top
       center center
       center bottom

4、提升移动端响应区域的大小    <--返回目录
   * background-origin: border-box/padding-box/content-box
       - content-box:从内容的位置开始填充背景
   * background-clip: border-box/padding-box/content-box
       - content-box：背景只显示内容以内的区域，border和padding区域不显示。

5、边框图片    <--返回目录
   * border-image-source:可以指定边框图片的路径，默认填充容器的四个角点。
   * border-image-slice:10 [fill];
       - 让图片裁剪为九宫格
       - 数值：裁剪的宽度，fill:内容内部填充
   * border-image-width:10px; 边框图片的宽度这个值一般等于border的宽度。
   * border-image-outset:0px;   扩展边框
   * border-image-repeat:round/repeat
       - repeat:直接平铺，不缩放
       - round：缩放平铺
       - stretch:拉伸(默认值)

   * 连写 border-image:source slice /width /outset repeat
       - border-image:url() 27 /27px /0px round;

6、过渡    <--返回目录
   * 过渡效果，完毕后默认回到初始状态.
   * IE10及以上才支持过渡效果
   * 过渡效果只能应用于某个具体的值到另一个具体的值的过渡，不能应用于display:none到display:block。

   * transition-property:属性值;
   * transition-duration:2s; 过渡效果时间
   * transition-function:linear; 过渡的效果，时间函数，控制运动的速度。默认是先加速后减速。
   * transition-delay：2s; 延迟

   * 连写： transition:属性值过渡时间时间函数延迟;

   * 为多个样式同时添加过渡效果
       - transition: left 2s linear, background-color 5s linear; 时间可以设置不同
       - transition: all 2s linear;效率不高，不建议这样使用
       - transition: all 2s steps(4);跳跃式动画，总共4步完成该动画。

　　demo

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta charset="utf-8">
    <style type="text/css">
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            left: 0px;
            top:0px;
            background-color: #eee;

            transition-property:left;
            transition-duration:2s;
        }
        div:active {
            left: 500px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

　　案例：手风琴菜单

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta charset="utf-8">
    <style type="text/css">
        div, h3, ul, li {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }
        .menu {
            border: 1px solid #ccc;
            width: 200px;
        }
        .item h3 {
            color: rgb(255,150,0);
            background-color: #ccc;
        }
        .item ul li {
            display: inline-block;
            width: 100%;
            font: 400 12px/20px "SimSun";
            float: left;  /*浮动是为了清除li之间的间隔*/
            padding-left: 10px;
            background-color: #eee;
        }
        .itemBox {
            height: 0px;
            overflow: hidden;
            transition-property: height;
            transition-duration:1s;
        }
        .item:hover .itemBox {
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item">
            <h3>室市内新闻</h3>
            <div class="itemBox">
                <ul>
                    <li>深圳超市菜遭抢</li>
                    <li>深圳超市菜遭抢</li>
                    <li>深圳超市菜遭抢</li>
                    <li>深圳超市菜遭抢</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <h3>室市内新闻</h3>
            <div class="itemBox">
                <ul>
                    <li>深圳超市菜遭抢</li>
                    <li>深圳超市菜遭抢</li>
                    <li>深圳超市菜遭抢</li>
                    <li>深圳超市菜遭抢</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <h3>室市内新闻</h3>
            <div class="itemBox">
                <ul>
                    <li>深圳超市菜遭抢</li>
                    <li>深圳超市菜遭抢</li>
                    <li>深圳超市菜遭抢</li>
                    <li>深圳超市菜遭抢</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

7、2d转换----2d移动    <--返回目录
   * 通过CSS3 transform转换，我们能够对元素进行移动、缩放、旋转、斜切等操作。
   * 2d移动
       - 使用translate()函数，你可以吧元素从原来的位置移动。移动参照左上角原点。
       - transform: translate(500px,200px); 只有一个值，表示水平移动，两个值则表示水平和垂直
       - transform: translateX(500px);
       - transform: translateY(500px);

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta charset="utf-8">
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            transition-property: transform;
            transition-duration:2s;
        }
        div:active {
            transform: translateY(200px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

8、2d转换----缩放    <--返回目录
   * 大于1放大，小于1缩小
   * 缩放参照元素中心点
   * scale(2) 写一个参数，表示x和y都缩放2倍
   * scale(2,3) 表示x方向我原来2倍，y方向为原来3倍
   * scaleX() scaleY()

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {  padding: 0;margin: 0;}
        div {
            width: 100px;
            height: 100px;
            margin: 100px auto;
            background-color: #ccc;
            transition-property: transform;
            transition-duration:2s;
        }
        div:active {
            transform: scale(2,3);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

9、2d转换---旋转 <--返回目录
* transform:rotate(90deg); 正值，相对元素中心点顺时针旋转

10、2d转换---斜切    <--返回目录
   * transform:skew(30deg) 往左边斜30度
   * transform:skew(-30deg) 往右边斜30度
   * transform:skew(30deg,-30deg) 往左边斜30度，往下边斜30度
   * transform:skewX(30deg)
   * transform:skewY(30deg)

11、旋转中心设置transform-origin <--返回目录
* transform-origin:left top;

12、案例：扑克牌旋转 <--返回目录

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<style type="text/css">
    .box {
        width: 100px;
        height: 200px;
        position: relative;
        margin: 200px auto;
    }
    .box > img {
        position: absolute;
        width: 100px;
        height: 200px;
        transition: transform 2s;
        transform-origin:left top;
    }
    .box:hover img:nth-of-type(1) {
        transform: rotate(60deg);
        transform-origin:left top;
    }
    .box:hover img:nth-of-type(2) {
        transform: rotate(120deg);
    }
    .box:hover img:nth-of-type(3) {
        transform: rotate(180deg);
    }
    .box:hover img:nth-of-type(4) {
        transform: rotate(240deg);
    }
    .box:hover img:nth-of-type(5) {
        transform: rotate(300deg);
    }
    .box:hover img:nth-of-type(6) {
        transform: rotate(360deg);
    }
</style>
</head>
<body>
<div class="box">
    <img src="pk1.png">
    <img src="pk1.png">
    <img src="pk1.png">
    <img src="pk1.png">
    <img src="pk1.png">
    <img src="pk1.png">
</div>
</body>
</html>

13、同时添加多个tranform属性 <--返回目录
* 注意：旋转元素的同时也会旋转坐标系，所以先添加移动，后添加旋转

<!DOCTYPE html>
<html>
<head>
    <title>标题</title>
    <meta charset="utf-8">
    <style type="text/css">
        div.box {
            width: 100px;
            height: 100px;
            margin: 400px auto 0;
            border: 1px solid #000;
        }
        div.sub {
            width: 100%;
            height:100%;
            background-color: red;
            transition: transform 2s;

        }
        div.box:hover div.sub{
            /*transform: translateX(300px) rotate(-90deg);*/
            transform: rotate(-90deg) translateX(300px);
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="sub"></div>
    </div>
</body>
</html>

14、子盒子居中 <--返回目录

　　代码1：以前的方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">    
    <style type="text/css">
        div.box {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: relative;
        }
        div.sub {
            background-color: red;
            width: 50%;
            height: 50%;
            
            position: absolute;
            top: 50%;
            margin-top: -25%;
            left: 50%;
            margin-left: -25%;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="sub"></div>
</div>
</body>
</html>

　　代码2：使用transform移动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">    
    <style type="text/css">
        div.box {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: relative;
        }
        div.sub {
            background-color: red;
            width: 50%;   /*百分百相对父盒子*/
            height: 50%;
            
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);  /*百分百相对自己*/
        }
    </style>
</head>
<body>
<div class="box">
    <div class="sub"></div>
</div>
</body>
</html>

15、3d移动、3d缩放、3d旋转    <--返回目录
   * 3d移动   transform:translate3d(x,y,z);
       - 也可以分开来写 transform:translateX(x);
       - transform:translateY(y);
       - transform:translateZ(z);
       - 注意：3个值都要给，比如transform:translate3d(400px,0,0)

   * 3d缩放 scale3d(num1,num2,num3)
       - 也可以分开来写 transform:scaleX(x);
       - transform:scaleY(y);
       - transform:scaleZ(z);

　* 3d旋转
   * transform: rotate3d(x,y,z,angle); 指定需要进行选择的坐标轴
       - transform: rotate3d(1,0,0,angle); 元素按照x轴旋转
       - x,y,z为向量坐标
   * transform: rotateX(angle); 元素按照x轴旋转
   * transform: rotateY(angle); 元素按照y轴旋转
   * transform: rotateZ(angle); 元素按照z轴旋转

　　- 默认3维坐标系原点定位在元素的中心点

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<style type="text/css">
    div {
        position: absolute;
        width: 200px;
        height: 200px;
        left: 0px;
        top:0px;
    }
    .one {
        background-color: blue;
        transform: rotate3d(0,0,1,20deg);
        
        transform-origin: left bottom;
    }
    .two {
        background-color: #eee;
    }
</style>
</head>
<body>
    <div class="one"></div>
    <!-- <div class="two"></div> -->
</body>
</html>

transform-origin: left bottom; // 将坐标系原点定位在div左下角

transform: rotate3d(0,0,1,20deg); // 旋转轴：Z轴，顺时针旋转20°

<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<style type="text/css">
    div {
        position: absolute;
        width: 200px;
        height: 200px;
        left: 0px;
        top:0px;
    }
    .one {
        background-color: blue;
        transform: rotate3d(1,0,0,60deg);

        transform-origin: left bottom;
    }
    .two {
        background-color: #eee;
    }
</style>
</head>
<body>
    <div class="one"></div>
    <!-- <div class="two"></div> -->
</body>
</html>

transform-origin: left bottom; // 将坐标系原点定位在div左下角

transform: rotate3d(1,0,0,60deg); // 旋转轴：x轴，顺时针旋转60°

---

posted on 2020-02-24 00:13 wenbin_ouyang 阅读(817) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

木心

导航

公告

css3总结(二)背景色渐变、background、边框图片、过渡、2d变换、3d变换