音乐播放的动画效果

最新推荐文章于 2024-07-03 20:13:24 发布

weixin_30381793

最新推荐文章于 2024-07-03 20:13:24 发布

阅读量600

点赞数

文章标签： swift

原文链接：http://www.cnblogs.com/heyiming/p/6086455.html

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            height: 30px;
            background: pink;
            width: 55px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            padding: 5px 0;
        }
        li {
            list-style: none;
            width: 5px;
            height: 30px;
            background: #fff;
            float: left;
            margin-left: 5px;
            animation: one 0.5s infinite;
            transform: scaleY(0.2)
        }

        li:nth-child(1){animation-delay:0.1s;}
        li:nth-child(2){animation-delay:0.2s;}
        li:nth-child(3){animation-delay:0.3s;}
        li:nth-child(4){animation-delay:0.4s;}
        li:nth-child(5){animation-delay:0.5s;}
        @keyframes one{
            0%{transform:scaleY(0.2)}
            50%{transform:scaleY(1)}
            100%{transform:scaleY(0.2)}
        }
    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

转载于:https://www.cnblogs.com/heyiming/p/6086455.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30381793

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
音乐播放的动画效果

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; ...
复制链接

扫一扫