网站(十六)HTML动画与过渡实例

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>

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试