CSS过渡-Transitions

小hi胖胖

于 2024-07-09 16:34:23 发布

阅读量184

点赞数 4

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_67252311/article/details/140296380

版权

必须规定两项内容

1.指定要添加效果的CSS属性

2.指定效果的持续时间。

（面试）过渡三要素
1.1必须要有属性发生变化

1.2必须告诉系统哪个属性需要执行过渡效果

1.3必须告诉系统过渡效果持续时长

过渡触发
1、:hover 鼠标悬停触发
2、:active 用户单击元素并按住鼠标时触发
3、:focus 获得焦点时触发
4、@media触发符合媒体查询条件时触发
5、点击事件用户点击元素时触发

transition-property

规定应用过渡的 css属性的名称。

transition-duration

定义过渡效果花费的时间。默认是 0。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            width: 100px;
           height: 100px;
           background-color: #afe7af;
           /* 过度属性 */
           transition-property: width,height,background-color;
           /* 过度时间 */
           transition-duration: 3s;
        }
        .div1:hover{
            width: 200px;
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>

transition-timing-function

规定过渡效果的时间曲线。默认是"ease"
1.linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
2.ease 规定慢速开始，然后变快，然后慢速结束的过渡效果(cubic-
3.bezier(0.25,0.1,0.25,1))。ease-in 规定以慢速开始的过渡效果(等cubic-bezier(0.42,0,1,1))

4.ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))
5.ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))
6.cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是0至1之间的数值。

<!--
 * @Author: 冰棍厂厂长 2771976388@qq.com
 * @Date: 2024-07-09 15:34:10
 * @LastEditors: 冰棍厂厂长 2771976388@qq.com
 * @LastEditTime: 2024-07-09 15:43:01
 * @FilePath: \day11\02.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 name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{

        }
        ul{
            width: 500px;
            height: 500px;
            margin: 40 auto;
            border: 1px solid;
        }
        ul li{
            width: 40px;
            height: 40px;
            background-color: rebeccapurple;
            font-size: 24px;
            text-align: center;
            margin-top:20px ;
            color: white;
            transition: margin-left 0s;
        }
        ul:hover li{
            margin-left:480px;
        }
        ul li:nth-child(2){
            transition-timing-function: ease;
        }
        ul li:nth-child(3){
            transition-timing-function: ease-in;
        }
        ul li:nth-child(4){
            transition-timing-function: ease-out;
        }
        ul li:nth-child(5){
            transition-timing-function: ease-in-out;
        }
    </style>
</head>
<body>
   <ul>
    <li>linear</li>
    <li>ease</li>
    <li>ease-in</li>
    <li>ease-out</li>
    <li>ease-in-out</li>
   </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            list-style: none;
        }
        ul{
            width: 900px;
            height: 200px;
            border: 1px solid;
            margin: 0 auto;
            overflow: hidden;
        } 
        ul li{
            width: 150px;
            height: 200px;
            float: left;
            transition: width 0.5s;
        }
        ul li img{
            width: 400px;
        }
        ul:hover li{
            width: 100px;
        }
        ul li:hover{
            width: 400px;
        }
    </style>
</head>
<body>
    <ul>
        <li><img src="images\images\ad7.jpeg" alt=""></li>
        <li><img src="images\images\ad8.jpg" alt=""></li>
        <li><img src="images\images\ad9.jpeg" alt=""></li>
        <li><img src="images\images\ad10.jpg" alt=""></li>
        <li><img src="images\images\ad11.jpg" alt=""></li>
        <li><img src="images\images\ad12.jpg" alt=""></li>
    </ul>
</body>
</html>