公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

CSS3 制作文字旋转 音乐播放按钮效果

通过CSS3逐帧动画来实现两个小效果,重点用到了 animation-delay 属性,使动画延迟执行,其中一个是文字旋转的效果:

文字旋转效果

CSS3 制作文字旋转 音乐播放按钮效果_www.uibq.com

HTML结构:

<ul>
    <li>H</li>
    <li>e</li>
    <li>l</li>
    <li>l</li>
    <li>o</li>
    <li>W</li>
    <li>e</li>
    <li>b</li>
    <li>前</li>
    <li>端</li>
    <li>网</li>
</ul>

CSS样式:

* {margin: 0; padding: 0;}
ul {
    height: 80px;
    background: #30C2A5;
    width: 290px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
li {
    list-style: none;
    float: left;
    margin-left: 5px;
    font: 30px/80px arial;
    color: #fff;
    animation: one 2s infinite;
}
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;}
li:nth-child(6){animation-delay:0.6s;}
li:nth-child(7){animation-delay:0.7s;}
li:nth-child(8){animation-delay:0.8s;}
li:nth-child(9){animation-delay:0.9s;}
li:nth-child(10){animation-delay:1s;}
li:nth-child(11){animation-delay:1.1s;}

@keyframes one{
    0%{transform:rotateY(0)}
    100%{transform:rotateY(360deg)}
}

音乐播放按钮

CSS3 制作文字旋转 音乐播放按钮效果_www.uibq.com

HTML结构:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS样式:

* {
    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)}
} 
关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)