css 水珠动图,CSS3 水滴和波浪动画图标
CSS
语言:
CSSSCSS
确定
body {
background: #0a6a8d;
}
h2,
p {
text-align: center;
text-transform: uppercase;
font-family: Arial;
font-size: 22px;
color: #cdeffc;
}
p {
font-size: 10px;
}
.rain {
margin: 80px auto 0;
width: 150px;
height: 150px;
position: relative;
}
.rain:before {
content: "";
position: absolute;
margin: auto;
font-size: 0;
width: 0;
hieght: 0;
top: -81px;
left: 0;
right: 0;
z-index: 99;
border: 50px transparent solid;
border-bottom: 50px #f2f2f2 solid;
}
.mod {
font-family: arial black;
width: inherit;
height: inherit;
background: #f2f2f2;
border-radius: 50%;
font-size: 600px;
overflow: hidden;
position: relative;
}
.mod span:nth-child(1) {
position: absolute;
-webkit-animation: seamc01 6s linear infinite alternate;
animation: seamc01 6s linear infinite alternate;
color: rgba(62, 193, 242, 0.8);
display: block;
line-height: 250px;
text-indent: -30px;
z-index: 3;
}
.mod span:nth-child(2) {
position: absolute;
-webkit-animation: seamc02 8s linear infinite alternate;
animation: seamc02 8s linear infinite alternate;
color: #9ee0f8;
display: block;
line-height: 250px;
text-indent: -200px;
z-index: 1;
}
.mod span:nth-child(3) {
position: absolute;
-webkit-animation: seamc03 4s linear infinite alternate;
animation: seamc03 4s linear infinite alternate;
color: rgba(255, 255, 255, 0.7);
display: block;
line-height: 280px;
text-indent: -30px;
z-index: 4;
}
@-webkit-keyframes seamc01 {
to {
text-indent: -200px;
}
}
@-webkit-keyframes seamc02 {
to {
text-indent: -30px;
}
}
@-webkit-keyframes seamc03 {
to {
text-indent: -150px;
}
}
@keyframes seamc01 {
to {
text-indent: -200px;
}
}
@keyframes seamc02 {
to {
text-indent: -30px;
}
}
@keyframes seamc03 {
to {
text-indent: -150px;
}
}
css 水珠动图,CSS3 水滴和波浪动画图标相关推荐
- css 水珠动图,CSS3逼真水珠特效
CSS3逼真水珠特效- www.shouce.ren body{background: #013668;} #pepsi{position: absolute;left: 30%;top: 30%;} ...
- css高清动图,CSS3+PNG实现GIF动画效果
昨天讲到了JavaScript+PNG模拟GIF动画,今天教大家用css3 + PNG实现GIF动画效果.代码很简单主要用到了css3的animation属性,代码如下: @-webkit-keyfr ...
- css 水珠动图,使用CSS3动画、渐变和伪元素实现的水滴动画
CSS 语言: CSSSCSS 确定 /* General Demo Style */ @import url(http://fonts.googleapis.com/css?family=Lato: ...
- css 水珠动图,使用CSS3实现的水滴涟漪动画
CSS 语言: CSSSCSS 确定 body { background-color: #31C5F3; overflow: hidden; } div { margin: 175px auto; } ...
- R语言gganimate包创建可视化gif动图、可视化动图:创建动态散点图动画基于transition_time函数、使用shadow_wake函数配置动画的渐变效果(gradual falloff)
R语言gganimate包创建可视化gif动图.可视化动图:创建动态散点图动画基于transition_time函数.使用shadow_wake函数配置动画的渐变效果(gradual falloff) ...
- html波浪动态效果,HTML5+CSS3逼真水波浪动画特效
HTML5+CSS3逼真水波浪动画特效 @keyframes move_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1) } 5 ...
- R语言gganimate包创建散点图动画图(gif)、transition_states函数根据分组变量创建动图、shadow_wake函数配置动画的渐变效果(gradual falloff)拖尾效应
R语言ggplot2可视化:gganimate包创建散点图动画图(gif).transition_states函数根据分组变量创建动图.shadow_wake函数配置动画的渐变效果(gradual f ...
- 50天50个前端小项目(纯html+css+js)第八天(形成波浪动画结合登录表单)
今天来做一个结合登录表单实现的波浪动画效果,没错,你没听错,重点不是表单,是波浪. 先看效果:首先是平平无奇的波浪效果 然后当你点击输入框的时候:例如输入框里的Email和Password是会一个单词 ...
- css设置元素抛物线,CSS3 transition 实现抛物线动画
您的位置: 富录-前端开发|web技术博客 > HTML&&CSS > CSS3 transition 实现抛物线动画 CSS3 transition 实现抛物线动画 发布 ...
最新文章
- JavaScript学习总结(五)——Javascript中==和===的区别
- pfSense DMZ配置
- wxWidgets:wxKeyEvent类用法
- leetcode------Remove Duplicates from Sorted Array II
- vue-awesome-swiper使用
- css3自适应布局单位vw,vh你知道多少?
- 恰当地利用中间结果集
- Git 好用的客户端 SourceTree破解
- java ee 容器_javaee中web的四大容器简介
- OpenShift 4之唤醒休眠的OpenShift应用
- 深度学习技术在社会化推荐场景中的总结(附数据集)
- ❤️《集成SSM框架—图书系统》Mybatis+Spring+SpirngMVC
- Json API接口数据生成
- php scrscriptipt,xss跨站脚本攻击 (初级-中级-高级)
- Vue 引入 zepto
- Nginx实现文件共享
- oracle 调整shared pool,Oracle设置Shared Pool的大小
- JAVA:Java Swing 练习题
- 2019年美国计算机科学排名,最新!2019年USNews美国大学计算机专业排名
- axios请求中添加token,Authorization中添加token