使用纯 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 相关文章推荐
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 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之CodeIgniter学习笔记
2013/06/17 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
php实用代码片段整理
2016/11/12 PHP
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
模拟select的代码
2011/10/19 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python和bash统计CPU利用率的方法
2015/07/10 Python
Python中正则表达式详解
2017/05/17 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
详解Python中的路径问题
2020/09/02 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
应届生简历中的自我评价
2014/01/13 职场文书
二年级数学教学反思
2014/01/21 职场文书
村级个人对照检查材料
2014/08/22 职场文书
2014年设计师工作总结
2014/11/25 职场文书
大学生英文求职信范文
2015/03/19 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
看古人们是如何赞美老师的?
2019/07/08 职场文书
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
聊聊Python String型列表求最值的问题
2022/01/18 Python