Html transition过渡效果

最新推荐文章于 2023-07-16 14:07:12 发布

Casey-Z

最新推荐文章于 2023-07-16 14:07:12 发布

阅读量5k

点赞数 3

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_43381610/article/details/109752350

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

记录问题：

记录事件： HTML transition过渡效果

问题描述：

1.transition用来给标签设置过渡效果,第一个值:设置对那个样式进行过渡,第二个值设置过渡时间 2. 强调:transition过渡需要一个触发机制(比如悬停,点击等)才会执行 3.transition不能等到触发的时候才添加,需要一开始就设置好

代码块：

<!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>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            /* transition用来给标签设置过渡效果,第一个值:设置对那个样式进行过渡,第二个值设置过渡时间 */
            /* 强调:transition过渡需要一个触发机制(比如悬停,点击等)才会执行
            2.transition不能等到触发的时候才添加,需要一开始就设置好 */

            
            transition: all 3s;

        }
        div:hover{
            width: 300px;
            height: 300px;
            /* 边框,第一个值:边框的宽度,第二个值,边框的样式;(solid 单实现,double 双实线,dotted 点虚线);
            第三个值.边框的颜色 */
            border: 5px solid blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Casey-Z

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Html transition过渡效果

记录问题：记录事件： HTML transition过渡效果问题描述：1.transition用来给标签设置过渡效果,第一个值:设置对那个样式进行过渡,第二个值设置过渡时间 2. 强调:transition过渡需要一个触发机制(比如悬停,点击等)才会执行3.transition不能等到触发的时候才添加,需要一开始就设置好代码块：<!DOCTYPE html><html lang="en"><head> <meta charset=
复制链接

扫一扫