使用纯 CSS 创作一个脉动 loader效果的源码


Posted in HTML / CSS onSeptember 28, 2018

效果预览

使用纯 CSS 创作一个脉动 loader效果的源码

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/wYvGwr 

使用纯 CSS 创作一个脉动 loader效果的源码

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cnMgQTr

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,容器中包含 10 个子元素:

<div class="loader">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

居中显示:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#eee 70%, pink);
}

设置容器的样式,是粉色背景并描边的一个圆:

.loader {
    width: 6em;
    height: 6em;
    padding: 3em;
    font-size: 10px;
    background-color: pink;
    border-radius: 50%;
    border: 0.8em solid hotpink;
}

设置子元素的布局方式为横向平铺:

.loader {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

设置子元素的样式:

.loader > span {
    width: 0.5em;
    height: 50%;
    background-color: deeppink;
}

增加子元素的动画效果:

.loader > span {
    transform: scaleY(0.05) translateX(-0.5em);
    animation: span-animate 1.5s infinite ease-in-out;
}
@keyframes span-animate {
    0%, 100% {
        transform: scaleY(0.05) translateX(-0.5em);
    }
    15% {
        transform: scaleY(1.2) translateX(1em);
    }
    90%, 100% {
        background-color: hotpink;
    }
}

设置子元素下标,让子元素依次播放动画:

.loader > span {
    animation-delay: calc(var(--n) * 0.05s);
}
.loader > span:nth-child(1) { --n: 1; }
.loader > span:nth-child(2) { --n: 2; }
.loader > span:nth-child(3) { --n: 3; }
.loader > span:nth-child(4) { --n: 4; }
.loader > span:nth-child(5) { --n: 5; }
.loader > span:nth-child(6) { --n: 6; }
.loader > span:nth-child(7) { --n: 7; }
.loader > span:nth-child(8) { --n: 8; }
.loader > span:nth-child(9) { --n: 9; }
.loader > span:nth-child(10) { --n: 10; }

增加容器动画,加强脉动的效果:

.loader {
    animation: loader-animate 1.5s infinite ease-in-out;
}
@keyframes loader-animate {
    45%, 55% {
        transform: scale(1.05);
    }
}

总结

以上所述是小编给大家介绍的使用纯 CSS 创作一个脉动 loader效果的源码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3 特效范例整理
Aug 22 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
HTML5制作表格样式
Nov 15 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 #HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 #HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 #HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 #HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 #HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 #HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 #HTML / CSS
You might like
使用php判断网页是否gzip压缩
2013/06/25 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
Python连接Impala实现步骤解析
2020/08/04 Python
某个公司的Java笔面试题
2016/03/11 面试题
生产副总岗位职责
2013/11/28 职场文书
商务会议邀请函
2014/01/09 职场文书
小学美术教学反思
2014/02/01 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
雷锋之歌观后感
2015/06/10 职场文书
在职证明书模板
2015/06/15 职场文书
消防宣传语大全
2015/07/13 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python
给numpy.array增加维度的超简单方法
2021/06/02 Python
详解Python常用的魔法方法
2021/06/03 Python
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB