实现矩形颜色渐变

最新推荐文章于 2024-06-21 17:17:44 发布

Volcano_WQL

最新推荐文章于 2024-06-21 17:17:44 发布

阅读量570

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_45614713/article/details/108545651

版权

实现矩形颜色渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡transitions</title>
    <style>
        div{
            width: 100px;
            height:100px;
            margin: 0 auto;
            background-color: limegreen;
            transition:all 5s ease;
        }
        div:hover{
            width:100px;
            height:100px;
            margin: 0 auto;
            background-color: yellow;

        }
      
    </style>
</head>
<body>
<!-- transitions 属性有四个属性构成：
        transitions-property -> 规定过渡的css属性名称
                        property 值有三：
               none 没有属性会获得过渡效果
               all  默认值，所有属性将会获得过渡效果
               property 定义应用过渡效果的css属性名称列表-->
<!--    transition-duration ：定义过渡效果时长，默认0
        transition-timing-funciton 规定过渡效果的时间曲线
                    取值有6：
                    linear 线性 匀速效果
                    ease 默认值，由慢到快，再慢速结束
                    ease-in 慢速开始
                    ease-out 慢速结束
                    ease-in-out 慢速开始和结束
                    cubie-bezier(n,n,n,n) 自定义n∈[0，1]-->
<!--transition-delay 规定效果开始之前的等待时间，默认0-->
<!--transition 放在过渡前的样式里面，那么效果将会怎么出现就怎么消失
                    放在过渡后的样式中，效果将会在出现后就直接消失，不会有过渡还原效果-->
    <div>
    </div>
</body>
</html>

-------》在这里插入图片描述