html CSS动画---transition动画

最新推荐文章于 2024-09-03 16:55:20 发布

郭庆汝

最新推荐文章于 2024-09-03 16:55:20 发布

阅读量468

点赞数 1

本文链接：https://blog.csdn.net/guoqingru0311/article/details/118935373

版权

CSS动画---transition动画

1、基本内容：
2、示例2：
3、示例2：
4、all的用法
5、鼠标放上弹出说明内容

1、基本内容：

在这里插入图片描述

2、示例2：

将方块在宽度上做动画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>43_transition动画_0</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: #f0ad4e;
            margin: 30px auto 0;

            transition: width 1s ease 1s;   /*第一个width参数表示在宽度上做动画，第二个1s表示过度时间；第三个1s表示延迟时间*/
        }
        .box:hover{
            width: 800px;
        }
    </style>
</head>
<body>

    <div class="box"></div>

</body>
</html>

显示效果如下所示：
在这里插入图片描述

3、示例2：

先宽度上做动画，再高度上做动画，再颜色动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>先宽度上做动画，在高度上做动画，在颜色动画</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            background-color: #f0ad4e;
            border: 2px solid black;
            transition: width 1s ease,height 1s ease 1s,background-color 1s ease 2s;
        }

        .box:hover{
            width: 400px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

显示效果如下所示：
在这里插入图片描述

4、all的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>先宽度上做动画，在高度上做动画，在颜色动画</title>
    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;
            background-color: #f0ad4e;
            border: 2px solid black;
            /*transition: width 1s ease,height 1s ease 1s,background-color 1s ease 2s;*/
            transition: all 1s ease 1s;    /*all：表示多个属性做动画，可以使用all关键字*/
        }

        .box:hover{
            width: 400px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

显示效果如下所示：
在这里插入图片描述

5、鼠标放上弹出说明内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>45_transition动画_2_鼠标放上弹出说明内容</title>
    <style type="text/css">
        .pic_con{
            width: 200px;
            height: 300px;
            border: 1px solid black;
            margin: 50px auto 0;
            position: relative;
            overflow: hidden;
        }
        .pic_info{
            width: 180px;
            height: 100px;
            background-color: rgba(0,0,0,0.3);		/*设置透明效果*/
            position: absolute;
            left: 0;
            top: 300px;
            color: white;
            padding: 10px;

            /*设置动画*/
            transition: all 1.5s ease;
        }
        .pic_con:hover .pic_info{
            top: 180px;
        }

    </style>
</head>
<body>
    <div class="pic_con">
        <img src="./images/banner01.jpg" alt="banner01.jpg">
        <div class="pic_info">
            <h3>文字说明标题</h3>
            <p>文字说明文字说明文字说明文字说明文字说明</p>
        </div>
    </div>

</body>
</html>