css线条伸缩_CSS3加载动画之线条伸缩

加载动画之线条伸缩

效果图

思路

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

HTML

css

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;

}

css线条伸缩_CSS3加载动画之线条伸缩相关推荐

HTML+CSS制作Windows启动加载动画
HTML+CSS制作Windows启动加载动画效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">&l ...
心形源码HTML,纯CSS实现心形加载动画（附源码）
本篇文章给大家介绍一下纯CSS实现心形加载动画的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 废话不多说上代码,代码很简答,研究一下就明白了,有不明白的可以问我. .hear ...
CSS 3.0实现加载动画
给大家分享一个用CSS 3.0实现加载动画,效果如下: 以下是代码实现,欢迎大家复制.粘贴和收藏. <!DOCTYPE html> <html lang="en" ...
css 实现心形加载动画
文章目录前言一.html代码二.css 总结前言心形加载动画提示:以下是本篇文章的代码内容,供大家参考,相互学习一.html代码代码如下: <html><head&g ...
html彩虹效果文字,CSS 实现彩虹条加载动画特效
利用css的delay延迟以及旋转动画效果实现彩虹条加载动画,纯css没有一行js代码,喜欢的搞起来. HTML结构: CSS结构 body { background-color:#000; } .b ...
HTML5+CSS3小实例：手风琴式加载动画
HTML5+CSS3做一个手风琴式的加载动画,这动画.这质感.这配色,就问你喜不喜欢?!这个案例的知识点主要是:css的自定义属性 + 动画延迟 + 颜色滤镜(hue-rotate). 效果: 源码: ...
Web 页面加载动画
Web 页面加载动画在 Web 开发中,通常会需要在页面中添加加载动画,以减少用户等待页面加载的焦虑感.下面介绍一个常用的页面加载动画的实现方法,同时介绍其 CSS 和 JavaScript 代码. ...
CSS 实现加载动画之一-菊花旋转
CSS 实现加载动画之一-菊花旋转原文:CSS 实现加载动画之一-菊花旋转最近打算整理几个动画样式,最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意 ...
css旋转动画定义中心,CSS实现弹簧效果的旋转加载动画
先看看效果,像是弹簧在伸缩: 具体代码: 此处用到CSS3的transform属性. CSS3的变形(transform)属性让元素在一个坐标系统中变形.这个属性包含一系列变形函数,可以移动.旋转和缩 ...

css线条伸缩_CSS3加载动画之线条伸缩

css线条伸缩_CSS3加载动画之线条伸缩相关推荐

最新文章

热门文章