CSS3加载动画之线条伸缩 - 阿强爱分享

CSS3加载动画之线条伸缩

作者: Aqiang

全网最全的网络资源分享网站

手机扫码查看

标签:

CSS3代码

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!邮箱:2377724272@qq.com

加载动画之线条伸缩

效果图

思路

通过 3 个线条高度的动态变化实现加载动画,为了突出效果,给线条增加了阴影。对动画而言,keyframes 和 animation 是必不可少的技巧。同时本例中使用了 first-child 和 nth-child 选择器,用于给特定位置的元素添加其特有的动画属性。

HTML

<div class="loading-container">
    <span class="loading-line"></span>
    <span class="loading-line"></span>
    <span class="loading-line"></span>
</div>

css

<style>
loading-container {
    padding: 60px;
    display: flex;
    align-items: center;
    height: 40px;
}

.loading-line {
    display: inline-block;
    width: 8px;
    height: 20px;
    background-color: dodgerblue;
    margin: 0 4px;
    box-shadow: 5px 5px 3px #a495e0db;
}

.loading-line:first-child {
    animation: higher 1.2s ease-out infinite alternate;
}
.loading-line:nth-child(2) {
    animation: higher 1.2s ease-out infinite .4s alternate;
}
.loading-line:nth-child(3) {
    animation: higher 1.2s ease-out infinite .8s alternate;
}

@keyframes higher {
    from {
        height: 20px;
    }
    to {
        height: 40px;
    }
}
</style>

 

分享到:
打赏

公告提示:本站已开放注册,欢迎投稿。
头像
站长签名: 专注分享各类源码-全网资源免费分享平台好货不私藏

文章作者信息版权声明

阅读时间:  发布于:2019-9-21

本文标题: CSS3加载动画之线条伸缩

本文链接: https://iooqp.cn/?post=416

版权声明:文章为《 Aqiang》原创,转载请保留出处! 本文共有 844 个字!

分享到:

精彩评论

未显示?请点击刷新
切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

© 2019 阿强爱分享   京ICP备19031919号-2

免责声明:本站所发布的资源信息及软件文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,本站信息来自网络,版权争议与本站无关。

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏