网站（十六）HTML动画与过渡实例

最新推荐文章于 2023-02-09 08:00:00 发布

KeithAlexander

最新推荐文章于 2023-02-09 08:00:00 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记

本文链接：https://blog.youkuaiyun.com/KeithAlexander/article/details/80975247

学习笔记专栏收录该内容

38 篇文章

订阅专栏

本文探讨了HTML中的动画和过渡效果，通过实例展示了如何利用hover事件触发动画，并使用animation-fill-mode属性确保动画在结束时停留在最后一帧。此外，还介绍了opacity属性用于控制元素的不透明度，以及div元素在布局中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML动画与过渡实例

补充
- html：hover（当鼠标放在整个网页的任何地方的时候都可以触发）
- animation-fill-mode：forwards（使得动画停留在最后一帧）
- opacity（不透明度，为0时透明）
- div（分块符）

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ServantIntroduction</title>
    <style type="text/css">
        .div {
            text-align: center;
        }
        .Servant {
            width: 1080px;
            margin: 30px;
        }
        html:hover .Servant{
            animation-name: Saber;
            animation-delay: 500ms;
            animation-duration: 1s;
            animation-fill-mode: forwards; 
            /*停止在最后一帧*/
        }
        @keyframes Saber {
            to {
                width:100px;
                margin-top: 50px;
            }
        }
        p {
            font-size: 40px;
            text-shadow: 2px 2px 2px #b0b0b0;
            opacity: 1;
        }
        html:hover p{
            transition-delay: 500ms;
            transition-duration: 1s;
            font-size: 10px;
            text-shadow: 2px 2px 2px #b0b0b0;
            opacity: 0;
        }
    </style>
</head>

<body>
<div class="div">
    <img src="桌面壁纸/桌面壁纸-3.png" class="Servant">
    <p>Saber</p>
</div>
</body>

</html>