css做喇叭动画,使用CSS3模拟音箱（音响）声音扩展动画效果

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300);

* {

margin: 0;

padding: 0;

outline: none;

list-style: none;

text-decoration: none;

box-sizing: border-box;

color: #000;

background: transparent;

border: none;

}

html,

body {

height: 100%;

width: 100%;

}

body {

background: #202020;

font-family: 'Roboto', sans-serif;

overflow: hidden;

}

.bg {

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 100%;

background: url("http://thomaspodgro.com/crea/lbc-demo/bg.jpg") no-repeat center center;

background-size: 1920px;

overflow: hidden;

}

.sound-effect {

height: 100%;

width: 100%;

position: absolute;

top: 0;

left: 0;

}

.sound-effect span {

position: absolute;

top: 50px;

bottom: 0;

left: -320px;

right: 0;

margin: auto;

width: 0;

height: 0;

opacity: 0;

border-radius: 50%;

border: 2px #fff solid;

animation: soundEffect 4s linear infinite;

}

.sound-effect span:nth-of-type(2) {

animation: soundEffect 4s linear infinite 1s;

}

.sound-effect span:nth-of-type(3) {

animation: soundEffect 4s linear infinite 2.5s;

}

@keyframes soundEffect {

0% {

width: 0;

height: 0;

opacity: 1;

}

100% {

width: 400px;

height: 800px;

opacity: 0;

}

css做喇叭动画,使用CSS3模拟音箱（音响）声音扩展动画效果相关推荐

css 会飞的蝴蝶,CSS3怎么制作蝴蝶飞舞的动画
CSS3怎么制作蝴蝶飞舞的动画?蝴蝶飞舞的动画效果是什么样的?CSS3制作蝴蝶飞舞的动画需要注意哪些方面?今天给大家用CSS3做一个蝴蝶飞舞的动画. CSS3制作蝴蝶飞舞动画 body{ backgr ...
HTML+CSS教程（十）css3(3D属性详解及动画)
一.3D 转换 1.左手坐标系 :伸出左手,让拇指和食指成"L"形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指,食指和中指分别代表X.Y.Z 轴的正方 ...
纯CSS3模拟iPhone X背景切换动画
尽管iPhone已经没有像以前那么火了,但是苹果的UI设计还是可以肯定的.今天我们要给大家分享一款基于纯CSS3的iPhone X背景切换动画,整体的切换动画以淡入淡出为主,iPhone X屏幕的背景 ...
css元素发光效果图,纯CSS3实现圆圈动态发光特效动画的示例代码
本文主要介绍了纯CSS3实现圆圈动态发光特效动画的示例代码,分享给大家,具体如下: 效果图: 代码: 纯CSS3实现圆圈动态发光特效动画 body { background-color: #00000 ...
加载动画php,CSS3学习之页面加载动画（二）
本篇文章给大家分享6种css3的页面加载动画.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 在之前的文章[CSS3学习之页面加载动画(一)]中已经分享了四个CSS3的加载动画,今天 ...
导航条css代黑色背景代码,基于CSS3实现的黑色个性导航菜单效果
本文实例讲述了基于CSS3实现的黑色个性导航菜单效果.分享给大家供大家参考.具体如下: 黑色个性的CSS3导航菜单,竖直排列的菜单,基本原理与横向的区别并不大,适合学习CSS. 运行效果截图如下: 在 ...
css星空动画,【css3进阶】less实现星空动画
效果动图如下: 预览链接和代码在我的codepen:https://codepen.io/lio-mengxiang/pen/YzKrEde 知识点预览这篇文章的less技巧 + css技巧知识点包 ...
实用CSS3模拟实现一个雷达探测扫描动画特效
之前好长时间住在唐家岭,从路口往上地走的时候,总能看见一个一个的雷达,好壮观,今天用CSS3实现一个雷达探测扫描的效果. 目录 1. 实现思路 2. HTML部分的实现 3. 背景的效果 4. 蜘蛛 ...
css实现车轨动画转弯,css3实现沿椭圆轨迹旋转动画
需求 1.实现元素沿椭圆轨迹均匀旋转 2.鼠标点击事件.移入暂停运动 3.元素由远到近逐渐增大网上关于css3实现旋转的案例很多,我也是借鉴别人方法,这里不细说直接上代码,通过css3实现的旋转动画 ...

css做喇叭动画,使用CSS3模拟音箱（音响）声音扩展动画效果

css做喇叭动画,使用CSS3模拟音箱（音响）声音扩展动画效果相关推荐

最新文章

热门文章