HTML5学习笔记(3.0)-CFANZ编程社区

重复渐变

background:repeating-liner-gradient(red,yellow 15%,purple 20%);

background:repeating-radial-gradient(red,yellow 15%,purple 20%);

伪元素

div::before{
    content:"";
    display:block;
    width:100px;
    height:100px;
    background:red;
}

::before,::after均属于伪元素。

动画过渡（高度变化，持续时间，动画效果，延迟）

transition:height 2s liner 2s;

观察多个值（所有属性，持续时间，动画效果）

transition:all 2s liner;

注意：并不是所有的属性都能实现过渡效果的，除了display:none/block;

过渡案例：

<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-03-07 17:04:18
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-03-07 17:10:13
 * @FilePath: \vscode\guodu.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 50px;
            background:red;
            border: 1px solid gray;
        }
        div ul{
            /* display: none; */
            margin-top: 50px;
            transition: all 1s;
            
            height: 0px;
            overflow: hidden;
        }
        div:hover ul{
            /* display: block; */
            height: 200px;

        }
    </style>
</head>
<body>
    <div>
        菜单
        <ul>
            <li>aaaaaa</li>
            <li>bbbbbb</li>
            <li>ccccccc</li>
            <li>ddddddd</li>
        </ul>
    </div>
</body>
</html>

动画过渡类型

匀速，逐渐慢下来，加速，减速，先加速后减速

ul:hover li:nth-child(1){  //当鼠标移动到ul上时，li的第一个孩子的宽度就会变成600px
    width:600px
    transition: all 2s linear;
}

ul:hover li:nth-child(1){  //当鼠标移动到ul上时，li的第一个孩子的宽度就会变成600px
    width:600px
    transition: all 2s ease;
}

ul:hover li:nth-child(1){  //当鼠标移动到ul上时，li的第一个孩子的宽度就会变成600px
    width:600px
    transition: all 2s ease-in;
}

ul:hover li:nth-child(1){  //当鼠标移动到ul上时，li的第一个孩子的宽度就会变成600px
    width:600px
    transition: all 2s ease-out;
}

ul:hover li:nth-child(1){  //当鼠标移动到ul上时，li的第一个孩子的宽度就会变成600px
    width:600px
    transition: all 2s ease-in-out;
}

贝赛尔曲线

ul:hover li:nth-child(1){  //当鼠标移动到ul上时，li的第一个孩子的宽度就会变成600px
    width:600px
    transition: all 2s cubic-bezier(.23,1.15,.69,.36);
}

动画过渡单一属性（也就是对transition的分解）

transition-property:height;   //变化属性
transition-duration:2s;       //持续时间
transition-timing-function:linear;   //动画效果   
transition-delay:2s;     //动画延时