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 ...
随机推荐
- 1. git 基础
参考文档: https://www.liaoxuefeng.com/wiki/896043488029600 https://git-scm.com/docs/git-fsck 一.介绍 Linus一 ...
- opencv 截取任意四边形区域的图像
截取任意四边形区域的图像. mask就是结果. 需要定义四边形区域,分别是 tl, tr, bl, br std::map<int, std::set<int>> genera ...
- HTTP 与HTTPS 简单理解
HTTP协议,即超文本传输协议(Hypertext transfer protocol).是一种详细规定了浏览器和万维网(WWW = World Wide Web)服务器之间互相通信的规则,通过因 ...
- celery 异步发送短信验证码、延迟任务
短信 celery.py import os, django os.environ.setdefault("DJANGO_SETTINGS_MODULE", "luffy ...
- MySQL 王者晋级之路
3.2 Query Cache: 3.3 存储引擎 一.TokuDB的特点: – 插入性能加快20到80倍– 压缩数据减少存储空间– 数据量可扩展到几个TB– 不会产生索引碎片– 支持Hot Colu ...
- 无聊系列 - C#中一些常用类型与java的类型对应关系
昨天在那个.NET转java群里,看到一位朋友在问C#的int 对应java的哪个对象,就心血来潮,打算写一下C#中一些基础性的东西,在java中怎么找. 1. 基础值类型 如:int,long,do ...
- git push 报504 (因提交文件内容过大而失败的解决方案)
Enumerating objects: 60, done. Counting objects: 100% (60/60), done. Delta compression using up to 4 ...
- git操作记录（如何回退到某个历史版本，如何提交部分文件等方法）
当前项目使用git管理代码,在使用的过程中会遇到一些问题,这里记录下 1.合并代码后 在合并组员的代码后会出现下面的界面,开始的时候都会关闭,重新打开,乐此不疲到忍无可忍 解决方法: 出现这种界面是要 ...
- 洛谷 P2656 （缩点 + DAG图上DP）
### 洛谷 P2656 题目链接 ### 题目大意: 小胖和ZYR要去ESQMS森林采蘑菇. ESQMS森林间有N个小树丛,M条小径,每条小径都是单向的,连接两个小树丛,上面都有一定数量的蘑菇.小胖 ...
- Autoware 笔记 No. 5——基于GNSS的定位
1. 前言 在之前的笔记No.2 中,我们直接采用ndt_matching的方法实现定位,但需要在打开rviz中,通过2D Pose Estimate指定初始位置.加入GNSS后,可以帮助ndt_ma ...