前端学习笔记之CSS过渡模块

阅读目录

一伪类选择器复习
二过渡模块的基本使用
三控制过渡的速度transition-timing-function
四过渡模块连写

一伪类选择器复习

注意点：
#1 a标签的伪类选择器可以单独出现，也可以一起出现
#2 a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效
    编写的顺序必须要严格遵循： l v h a
        a:link{
            color: skyblue;
        }
        a:visited {
            color: green;
        }
        
        a:hover {
            color: #e9289c;
        }
        
        a:active {
            color: pink;
        }

二过渡模块的基本使用

#1、过渡三要素
1.1 必须要有属性发生变量，如
        div:hover {
            width: 300px;
        }
1.2 必须告诉系统哪个属性需要执行过渡效果
        transition-property: width;
1.3 必须告诉系统过渡效果持续时长
        transition-duration: 5s;


#2、注意：
    当多个属性需要同时执行过渡效果时，用逗号分隔即可
        transition-property:width,background-color;
        transition-duration: 5s,5s;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 50px;
            background-color: red;


            /*
            告诉系统哪个系统需要执行过渡效果
            transition-property: width;
            /*告诉系统过渡效果持续的时长
            transition-duration: 5s;



            css是层叠样式表，这么写会跟上面的冲突，所以我们需要修改
            transition-property: background-color;
            transition-duration: 5s;
            */

            transition-property:width,background-color;
            transition-duration: 5s,5s;
        }

        /*
        hover这个伪类选择器除了可以用在a标签上，还可以用在任何其他的标签上
        */
        div:hover {
            width: 300px;
            background-color: green;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

示范

三控制过渡的速度transition-timing-function

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 50px;
            background-color: red;

            transition-property: width;
            transition-duration: 5s;


            /*告诉系统延迟多少秒开始动画*/
            transition-delay: 2s;
        }

        div:hover {
            width: 300px;
        }

        ul {
            width: 800px;
            height: 500px;
            margin: 0 auto;
            background-color: pink;
            border: 1px solid #000;
        }

        ul li {
            list-style: none;
            width: 100px;
            height: 50px;
            margin-top: 50px;
            background-color: blue;


            transition-property: margin-left;
            transition-duration: 10s;

        }

        ul:hover li {
            margin-left: 700px;
        }

        ul li:nth-child(1) {
            transition-timing-function: ease;

        }

        ul li:nth-child(2) {
            transition-timing-function: linear;

        }

        ul li:nth-child(3) {
            transition-timing-function: ease-in;

        }

        ul li:nth-child(4) {
            transition-timing-function: ease-in-out;

        }
        ul li:nth-child(5) {
            transition-timing-function: ease-in-out;

        }
    </style>
</head>
<body>


<div></div>

<ul>
    <li>ease</li>
    <li>linear</li>
    <li>ease-in</li>
    <li>ease-out</li>
    <li>ease-in-out</li>
</ul>

</body>
</html>

示范

四过渡模块连写

#1 过渡属性连写
transition: 过渡属性 过渡时长 运动速度 延迟时间;

#2 过渡连写注意点
2.1 和分开写一样，如果想给多个属性添加过渡效果也是用逗号隔开即可
2.2 连写的时间，可以省略后面的两个参数，因为只要编写了前面两个参数
就满足了过渡的三要素

2.3 如果多个属性运动的速度、延迟时间、持续时间都一样，那么可以简写为
transition: all 5s;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 50px;
            background-color: red;

            /*transition: width 5s linear 0s;*/
            /*transition: width 5s linear 0s,background-color*/
            /*5s linear 0s;*/


            /*transition: width 5s,background-color 5s;*/
            /*transition: width 5s,background-color,height 5s;*/

            transition: all 5s;

        }

        div:hover {
            width: 500px;
            background-color: blue;

            height: 500px;
        }


    </style>
</head>
<body>
<div></div>
</body>
</html>

示范

五练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            height: 100px;
            background-color: grey;
            margin-top: 100px;
            text-align: center;

        }

        span {
            font-size: 50px;
            line-height: 100px;

            transition: all 5s;

        }

        div:hover span {
            margin-left: 50px;
        }

    </style>
</head>
<body>
<div>
    <span>EGON</span>
    <span>是</span>
    <span>讲</span>
    <span>师</span>
    <span>界</span>
    <span>的</span>
    <span>恐</span>
    <span>怖</span>
    <span>分</span>
    <span>子</span>
</div>
</body>
</html>

弹性效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 1000px;
            height: 300px;
            margin: 0 auto;
        }

        img {
            width: 200px;
            height: 300px;
        }

        ul {
            width: 1000px;
            height: 300px;
            background-color: grey;
            list-style: none;
            margin: 100px auto;

            /*
            最后一张图片超出了，因为每一张图片很大
            但默认情况我们不想看到，所以剪裁掉多余
            */
            overflow: hidden;
        }

        ul li {
            width: 100px;
            height: 300px;
            float: left;

            transition: all 0.3s;
        }

        ul:hover li {
            width: 88px;
        }

        /*谁更具体谁的优先级更高，ul 下的li更具体，而ul可能指定有很多li*/
        ul li:hover {
            width: 200px;
        }


    </style>
</head>
<body>
<div>
    <ul>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225724530-539090864.jpg" alt=""></li>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225751362-1832630751.jpg" alt=""></li>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225809591-1990809146.jpg" alt=""></li>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225816920-580320384.jpg" alt=""></li>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225828392-1011509025.jpg" alt=""></li>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225836490-1526815653.jpg" alt=""></li>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225847998-887601490.jpg" alt=""></li>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225853390-460353134.jpg" alt=""></li>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225859796-1981914722.jpg" alt=""></li>
        <li><img src="https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180516225906468-571800433.jpg" alt=""></li>
    </ul>
</div>
</body>
</html>