网站（十三）CSS使用过渡

最新推荐文章于 2024-08-25 17:19:55 发布

原创最新推荐文章于 2024-08-25 17:19:55 发布 · 269 阅读

1 ·

CC 4.0 BY-SA版权

学习笔记专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何使用CSS过渡效果实现元素状态的变化。通过设置:hover伪类，可以改变元素宽度、高度及背景颜色，并通过transition属性控制变化过程。演示了delay、duration和property的具体用法。

CSS使用过渡

加在hover内：
transition：
1. delay：延迟
2. duration：动画渐变
3. property：属性名（只渐变这一个属性）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CreateTrans</title>
    <style type="text/css">
        p {
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }
        p:hover{
            width:200px;
            height:200px;
            background-color: #ffad2a;
            transition-delay: 1s;
            transition-duration: 1s;
            transition-property: background-color
            /*-webkit-transition-duration: ;
            -moz-transition-duration: ;*/
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>