css提高

渐变

线性渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* 标准写法 */
        section{
            width: 300px;
            height: 300px;
            background: linear-gradient(to right bottom,red 5%,green 10%,blue)
            /* 
                linear-gradient(参数)
                参数:方向、颜色
                1.方向
                    - 从一个边到另外一个边 to+结束方向
                    - 从一个角到另一个角(对角)
                    - 角度值 deg
                2.颜色
                    - 颜色值 可以添加任意个
                    - 在颜色值后面添加百分比 占比的意思
            */
            /* 
                由于线性渐变是css3中的属性,css3是有兼容性问题的

             */
        }
        /* 兼容模式的写法 - 需要在属性值前面加浏览器前缀 */
        /* 
            兼容模式和标准模式之间的区别:
                1.颜色值没区别
                2.设置方向的时候,方向值都是相反的
                3.角度值需要用90deg减去标准模式的角度值
                4.不能加to
         */
        div{
            width: 300px;
            height: 300px;
            background: -webkit-linear-gradient(left top,red 5%,green 10%,blue)
        }
    </style>
</head>
<body>
    <!-- div+css section是h5里面新增的标签,和div一样可以作为盒子用来网页布局,没有实际含义 -->
    <section></section> <br>  <!-- 强制性的换行 -->
    <div></div>
</body>
</html>
<!-- 
    线性渐变的基础使用:不使用方向,只使用颜色值即可

 -->

径向渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{
            width: 300px;
            height: 300px;
            background: radial-gradient(red,yellow,green);
            border-radius: 50% /* 设置容器变成圆形 */
            /* 
                基础用法:径向渐变后面的参数使用 颜色值即可
            */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<!-- 
    qq空间里面有没有见过这样的一张图? 压力图?
 -->

重复渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{
            width: 500px;
            height: 500px;
            border-radius: 50%;
            margin: 50px auto;
            /* 压力图 - 多种颜色进行重复显示的 */
            background: repeating-radial-gradient(pink 5%,green 10%,red 15%);
            /* 过渡时间 */
            transition:3s
        }
        /* 鼠标移入 让图能动起来 - 2d 变形属性 */
        div:hover{
            transform: rotate(360deg)
        }
    </style>
</head>
<body>
    <div>
        你有压力吗
    </div>
</body>
</html>
<!-- 
    backgroud-repeat 背景图片是否进行平铺
 -->

过渡

过渡属性

<style>
        body{
            width: 100%;
            height: 100%;
            background: green;
            font-size: 200px;
            color: #fff;
            /* 变化过程加一个过渡的时间 */
            /* 参加过渡的属性 */
            /* transition-property: all */
            /* 参加过渡属性的时间 ms s*/
            /* transition-duration: 3s; */
            /* 过渡延迟时间 */
            /* transition-delay: 3s; */
            /* 过渡的运动方式 */
            /* transition-timing-function:  */
            /* 简写方法 */
            transition:3s       
        }
        body:hover{
            background: red;
            color: #000
        }
</style>

过渡的运动方式

<style>
        div{
            width: 10px;
            height: 100px;
            background: #000;
            transition: 3s cubic-bezier(.19,.59,0,-0.65)
            /* 
                linear  匀速
                ease 逐渐慢下来
                ease-in 加速
                ease-out 减速
                https://cubic-bezier.com/#.19,.59,0,-0.65
             */
        }
        div:hover{
            width: 1000px;
            background: pink
        }
</style>

过渡实现百叶窗效果

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        section{
            width:800px;
            height: 320px;
            border: 0px solid #000;
            margin: 100px auto;
            overflow: hidden;
        }
        /* 让所有的图片盒子在一行内进行显示 */
        div{
            width:160px;
            height:320px; 
            float: left;
            transition: 1s
        }
        /* 大盒子鼠标移入的时候 控制所有小盒子变小 */
        section:hover div{
            width: 40px;
        }
        section div:hover{
            width: 640px
        }
    </style>
</head>
<body>
    <section>
        <!-- <div><img src="images/img1.jpg" alt=""></div> -->
        <!-- (div>img[src="images/img$.jpg"])*5 -->
        <div><img src="images/img1.jpg" alt=""></div> <!-- 640 -->
        <div><img src="images/img2.jpg" alt=""></div> <!-- 40 -->
        <div class='center'><img src="images/img3.jpg" alt=""></div>
        <div><img src="images/img4.jpg" alt=""></div>
        <div><img src="images/img5.jpg" alt=""></div>
    </section>
</body>
</html>

2d

位移属性

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        section{
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        div{
            width: 100px;
            height: 100px;
            background: green;
            /* 过渡属性 */
            transition: 2s
        }
        /* 需求:当鼠标移入大盒子的时候,小盒子往右侧移动200px */
        section:hover div{
            /* transform:translateX(200px) translateY(200px)  */
            transform: translate(200px,200px)

            /* 
                位移属性:transform:属性值
                参数:
            */
        }
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>
</body>
</html>
<!-- 
    hover使用的时候需要注意:
        1.hover效果可以给自己添加      当前元素:hover{}
        2.hover不能改变父级元素的状态   父级元素:hover 子级元素{}
        3.hover可以改变兄弟元素(同级元素) - 需要一些选择器支持
 -->

缩放属性

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        section{
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        div{
            width: 100px;
            height: 100px;
            background: green;
            /* 过渡属性 */
            transition: 2s
        }
        /* 需求:当鼠标移入大盒子的时候,小盒子可以进行缩放 */
        section:hover div{
           transform:scale(2) /* 如果x=y 可以简写成一个 */
           /* 
             参数
                - 参数为1的时候,默认没有变化
                - 参数为0表示隐藏消失
                - 参数如果小于1,大于0,缩小
                - 参数大于1的时候,表示放大
           */
        }



        /* 案例代码 */
        p{
            width: 500px;
            height: 729px;
            border: 1px solid red;
            overflow: hidden;
        }
        img{
            transition: 2s
        }
        p:hover img{
            transform: scale(2)
        }
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>

    <p>
        <img src="images/1.jpg" alt="">
    </p>
</body>
</html>

旋转倾斜属性

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        section{
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        div{
            width: 100px;
            height: 100px;
            background: green;
            /* 过渡属性 */
            transition: 2s
        }
        /* 需求:当鼠标移入大盒子的时候,小盒子进行旋转 */
        section:hover div{
           transform: skewY(30deg)
           /* 参数常用度数表示
                - rotateX:单杠运动
                - rotateY:钢管舞
                - rotate() 不能接两个值 正值-顺时针  负值-逆时针

                倾斜
                    - skew(参数)
                参数
                    - x
                    - y
                    - skew() 如果只有一个参数表示x轴,两个就表示x和y
          */
        }
        /* 
            旋转和倾斜
                属性:transform
         */
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>
</body>
</html>

景深

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        section{
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            margin: 100px auto;
            perspective: 1200px;/* 当前section区域形成景深的效果 */
        }
        div{
            width: 100px;
            height: 100px;
            background: green;
            transition: 2s
        }
        section:hover div{
            transform: rotateY(60deg)
            /* x轴是向内进行翻转的,y轴是向右进行翻转 */
        }
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>
</body>
</html>
<!-- 
    在2d空间中,无法判定一些属性在浏览器中是如何进行变换的

    景深:近大远小
    1.可以加在父级元素
        perspective:1200px 
    2.可以添加在子级元素上
        transform:perspective(1200px)
 -->

3d

常见属性

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        section{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto;
            transform-style: preserve-3d;
            transform:rotateY(86deg) 
        }
        div{
            width: 100px;
            height: 100px;
            background: green;
            transition: 2s
        }
        section:hover div{
            transform: translateZ(200px)

        }
        /* 直接设置当前这个容器盒子在z轴上进行一些操作 */
    </style>
</head>
<body>
    <section>
        <div></div>
    </section>
</body>
</html>
<!-- 
    2d 3d - 浏览器 2d
    3d是一个立体的空间,而浏览器默认情况下是一个平面(2d),在浏览器默认情况下是无法实现3d空间的,所以我们需要设置一个属性让浏览器能实现3d的效果

    属性:transform-style
    属性值:flat 2d  / preserve-3d 浏览器支持3d空间 父级元素上添加

    2d常见属性:位移、旋转、缩放、倾斜 - x、y
    3d常见属性:位移、旋转、缩放、倾斜 - x、y、z

正方体的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        section{
            width: 400px;
            height: 400px;
            /* border: 1px solid #000; */
            margin: 100px auto;
            transform-style: preserve-3d;
            transform: rotateX(30deg) rotateY(30deg)
        }
        section div{
            width: 400px;
            height: 400px;
            position: absolute;
            transition: 2s;
            opacity: 0.5;
        }
        section:hover .box1{
            transform: translateX(200px) rotateY(90deg);
            background: red;
        }
        section:hover .box2{
            transform: translateX(-200px) rotateY(-90deg);

            background: green;
        }
        section:hover .box3{
            transform: translateY(200px) rotateX(90deg);
            background: blue;
        }
        section:hover .box4{
            transform: translateY(-200px) rotateX(-90deg);
            background: pink;
        }
        section:hover .box5{
            transform: translateZ(200px);
            background: #000;
        }
        section:hover .box6{
            background: orange;
            transform: translateZ(-200px);
        }
    </style>
</head>
<body>
    <section>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
    </section>
</body>
</html>
<!-- 
    https://www.jq22.com/
 -->

1907 字