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 ...
随机推荐
- Linux学习（四） 忘记密码解决方法
很多朋友经常会忘记Linux系统的root密码,linux系统忘记root密码的情况该怎么办呢?重新安装系统吗?当然不用!进入单用户模式更改一下root密码即可. 步骤如下: 重启linux系统 3 ...
- Jenkins之插件Publish HTML reports的使用
前提: 下载插件HTML Publisher plugin 一.安装 安装好HTML Publisher plugin之后,会在新建或者编辑项目时,在[增加构建后操作步骤]出现[Publish HTM ...
- Apache（基于主机名）
1.配置hosts文件 (1).hosts文件作用是定义IP地址与主机名的映射关系,即强制将某个主机名地址解析到指定的IP地址. (2)输入命令“vi /etc/hosts”,打开hosts文件,输入 ...
- jTopo介绍（一）
jTopo(Javascript Topology library)是一款完全基于HTML5 Canvas的关系.拓扑图形化界面开发工具包.jTopo关注于数据的图形展示,它是面向开发人员的,需要进行 ...
- 20191004 「HZOJ NOIP2019 Round #9」20191004模拟
综述 第一次 rk1 ,激动. 题目是 COCI 18/19 Round #1 的三至五题. 得分 \(100+100+20\) \(\mathrm{cipele}\) 问题描述 HZOJ1313 题 ...
- python名片 项目
---恢复内容开始--- 综合应用 —— 名片管理系统 目标 综合应用已经学习过的知识点: 变量 流程控制 函数 模块 开发 名片管理系统 系统需求 程序启动,显示名片管理系统欢迎界面,并显示功能菜单 ...
- Paper | Densely Connected Convolutional Networks
目录 黄高老师190919在北航的报告听后感 故事背景 网络结构 Dense block DenseNet 过渡层 成长率 瓶颈层 细节 实验 发表在2017 CVPR. 摘要 Recent work ...
- 《一起学mysql》5
基准函数 用于评估不同机器之间的性能差别 MariaDB [jason]> select benchmark(10000000,md5('test')); +-------------- ...
- SourceTree 版本跳过bitbucket注册方法
1.安装sourcetree时 需要选择 bitbucket账号,这个令人头疼 当然肯定有办法来跳过这一步 2.关闭当前安装界面 进入 C:\Users\Administrator\AppData ...
- 【UOJ#74】【UR #6】破解密码
[UOJ#74][UR #6]破解密码 题面 UOJ 题解 发现这个过程是一个字符串哈希的过程. 把第一位单独拿出来考虑,假设这个串是\(p+S\),旋转后变成了\(S+p\). 其哈希值分别是:\( ...