css实现简单音乐符效果
css实现简单音乐符效果
利用css3中的transform、animation、keyframes实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width:60px;
height:40px;
position:relative;
margin:100px auto;
transform:rotate(180deg);
}
.box span{
position:absolute;
background:lightblue;
width:10px;
}
.box span:nth-child(1){
height:50px;
left:0px;
animation:run 0.8s linear 0s infinite alternate;
}
.box span:nth-child(2){
height:50px;
left:15px;
animation:run 0.9s linear 0s infinite alternate;
}
.box span:nth-child(3){
height:50px;
left:30px;
animation:run 1s linear 0s infinite alternate;
}
.box span:nth-child(4){
height:50px;
left:45px;
animation:run 0.7s linear 0s infinite alternate;
}
.box span:nth-child(5){
height:50px;
left:60px;
animation:run 0.8s linear 0s infinite alternate;
}
@keyframes run{
10%{
height:20%;
}
20%{
height:40%;
}
40%{
height:60%;
}
70%{
height:80%
}
100%{
height:100%
}
}
</style>
</head>
<body>
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
效果图：
css实现简单音乐符效果的更多相关文章
- CSS自适应的占位符效果
一种不错的自适应input效果,分享一下.html section : <div style="width:500px;height:500px;margin:300px auto;b ...
- css制作简单loading动画效果【css3 loading加载动画】
曾经以为,loading的制作需要一些比较高深的web动画技术,后来发现大多数loading都可以用“障眼法”做出来.比如一个旋转的圆圈,并不都是将gif图放进去,有些就是画个静止图像,然后让它旋转就 ...
- 使用CSS实现一个简单的幻灯片效果
方法一: 简单的CSS代码实现幻灯片效果 方法二: 使用CSS3 Animation来制作幻灯片 方法一: 简单的CSS代码实现幻灯片效果 话不多说,直接上代码 <!DOCTYPE html&g ...
- Css实现一个简单的幻灯片效果页面
使用animation动画实现一个简单的幻灯片效果. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2 ...
- css实现简单的告警提示动画效果
需求:css实现简单的告警提示动画效果,当接收到实时信息的时候,页面弹出告警信息的动画效果 <!DOCTYPE html> <html lang="en"> ...
- 有趣的css—简单的下雨效果2.0版
简单的下雨效果2.0版 前言 笔者上一篇发布的文章有趣的css-简单的下雨效果中有位老哥给我提了一个很棒的建议,大致意思是波纹应该产生于雨滴的消失处. 这是按照老哥的建议完善后的效果图: 由于我制作G ...
- 有趣的css—简单的下雨效果
简单的下雨效果 前言 最近在b站上看到一个下雨效果的视频,感觉思路很清奇,我也按照自己的思路做了一个简单的下雨效果. 由于我制作GIF图片的工具最多只支持制作33FPS的GIF图,所以看起来可能有一点 ...
- html css的简单学习（二）
html css的简单学习(二) <!Doctype html>告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...
- 你想不到的！CSS 实现的各种球体效果【附在线演示】
CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...
随机推荐
- CodeForces - 1250L（思维+贪心）
题意 https://vjudge.net/problem/CodeForces-1250L 有三类人,a,b,c,现在要把这些人分成三个组,a和c类的不能在同一组,问分组后三组的最大的人数的最小值是 ...
- 数据分析三剑客 numpy,oandas,matplotlib
数据分析: 是不把隐藏在看似杂乱无章的数据域背后的信息提炼出来,总结出所研究对象内在规律 NumPy(Numerical Python) 是 Python 语言的一个扩展程序库,支持大量的维度数组与矩 ...
- java中的字符串二
public class TestString { public static void main(String[] args) { // TODO Auto-generated method stu ...
- flask-windows部署
由于supervisor不支持windows,但要防止程序异常中断,所以需要采取措施 通过pywin32,使得flask以服务的方式运行 创建pythonservice.py import win32 ...
- sql语句优化的30种方法
转载于:https://www.cnblogs.com/Little-Li/p/8031295.html 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的 ...
- 物联网架构成长之路(36)-Vue前端入门
1. 前言 物联网平台,需要有一个类似大屏看板的功能. 找了一圈,发现阿里已经有对应的DataV产品,但是那个价格有点贵啊.所以找了这个[http://datav.jiaminghi.com/demo ...
- java基本类型包装类之间的值比较问题
废话不多说,先看代码 Integer a = 2;Integer b = 2;if(a==b){ System.out.println("相等");}else{ System.ou ...
- H3C S12508单板卡 通过bootware升级software版本
H3C S12508单板卡 通过bootware升级software版本 案例:S12508更换主控板LST1MRPNC1 ,该板卡状态为Slave状态: 设备状态:S12508共2台做了堆叠,共含4 ...
- 计算机基础 ---- 编码（er）
1.字符集与编码 字符集:字符组成的集合,汉字,字母,符号被收录到标准的字符集合 编码:规定每个字符使用一个字节还是多个字节存储,那些字节来存储的规定 术语:字符编码(character encodi ...
- 我的周记12——"站在现在看前人对未来的预测，很有意思"
万里风云三尺剑,一庭花草半床书 聊聊最近很火的5G B站有个up主 老师好我叫何同学 优秀啊,点赞. 他做了一个5G测速的视频火啦 视频链接:https://www.bilibili.com/vi ...