css音阶波浪动画图，线性渐变色

html

<div class="loader-inner line-scale-pulse-out-rapid success"><div></div><div></div><div></div></div>

css

/*动态分析图标*/
.line-scale-pulse-out-rapid.success > div {background-image: -webkit-linear-gradient(top, rgb(201, 115, 255), rgb(20, 11, 255));
}
.line-scale-pulse-out-rapid>div{width:3px;height:20px;margin-right: 0;display:inline-block;/*border-radius:2px;*//*margin-right:2px;*/vertical-align:middle;-webkit-animation:line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78);animation:line-scale-pulse-out-rapid .9s -.5s infinite cubic-bezier(.11,.49,.38,.78)
}
.line-scale-pulse-out-rapid>div:nth-child(2),.line-scale-pulse-out-rapid>div:nth-child(4){-webkit-animation-delay:-.25s!important;animation-delay:-.25s!important
}
.line-scale-pulse-out-rapid>div:nth-child(1),.line-scale-pulse-out-rapid>div:nth-child(5){-webkit-animation-delay:0s!important;animation-delay:0s!important
}
@-webkit-keyframes line-scale-pulse-out-rapid{0%,90%{-webkit-transform:scaley(1);transform:scaley(1)}80%{-webkit-transform:scaley(.3);transform:scaley(.3)}
}
@keyframes line-scale-pulse-out-rapid{0%,90%{-webkit-transform:scaley(1);transform:scaley(1)}80%{-webkit-transform:scaley(.3);transform:scaley(.3)}
}

css音阶波浪动画图，线性渐变色相关推荐

01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 本节案例如下(其他动效篇幅原因逐步讲解,欢迎三连): 一.线 ...
css下波浪线的单词,CSS制作波浪线(示例代码)
建议先去了解清楚了径向渐变,线性渐变的用法先这个作者的css制作波浪线讲解很不错额:https://www.jianshu.com/p/8570433e3669不理解的可以看看这个链接的额可以去菜 ...
纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
css之为文本添加线性渐变和外描边
css之为文本添加线性渐变和外描边一.效果: 描边:描边+渐变: 二.描边: api:text-stroke 问题:text-stroke的描边是居中描边,无法直接设置外描边解决:在before ...
html css波浪线,css实现波浪线及立方体
这里是利用linear-gradient来实现,也就是画圆,然后利用底色来遮住部分圆:利用css3属性perspective加旋转实现立方体 1.css实现波浪线 html css.card-list ...
web css圆弧波浪线,web前端入门到实战：css实现波浪线及立方体
这里是利用linear-gradient来实现,也就是画圆,然后利用底色来遮住部分圆:利用css3属性perspective加旋转实现立方体 1.css实现波浪线 html css .card-lis ...
html怎么设置波浪线,前端基础学习-css实现波浪线及立方体
这里是利用linear-gradient来实现,也就是画圆,然后利用底色来遮住部分圆:利用css3属性perspective加旋转实现立方体 1.css实现波浪线 html css .card-lis ...
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局 CSDN:jcLee95 邮箱:291148484@163.com 本文地址:https://blog.csdn.net/qq_28550263/ar ...
CSS 波浪效果动画波浪起伏水波动画 Pure CSS Wave 手把手教你用CSS做出波浪动画
文章目录前言设计思路图例完整代码细节&问题 1. 双伪元素 2.CSS并集选择器 2.position 前言最近在学习前端知识,在做背景的时候想弄一个椭圆的弧形,想到以前网上看 ...

css音阶波浪动画图，线性渐变色

html

css

css音阶波浪动画图，线性渐变色相关推荐

最新文章

热门文章