呼吸灯效果html,css之呼吸灯效果
1、首先脑补一个知识点,我们在代码中经常看到-webkit或-moz,那这些有什么作用了,看下代码就知道了:
-webkit-border-radius: 2px; /*Webkit:谷歌支持:圆角*/
-moz-border-radius: 2px; /*Mozilla:火狐支持:圆角*/
-ms-border-radius: 2px; /*Microsoft:IE9支持:圆角*/
-o-border-radius: 2px; /*Opera支持:圆角*/
border-radius: 2px; /*圆角*/
2、好了,呼吸灯的原理就是修改标签的不透明度,主要利用到css3的animation动画
html>
呼吸灯
/* css代码 */
3、css代码是这样的:
.breath_light {
width: 50px; /* 宽度 */
height: 4px; /* 高度 */
opacity: 0.1; /* 不透明度 */
overflow: hidden; /* 溢出隐藏 */
background: #99dd33; /* 背景色 */
margin: 25% auto; /* 外边距 */
/* IE10、Firefox and Opera,IE9以及更早的版本不支持 */
animation-name: breath; /* 动画名称 */
animation-duration: 3s; /* 动画时长3秒 */
animation-timing-function: ease-in-out; /* 动画速度曲线:以低速开始和结束 */
animation-iteration-count: infinite; /* 播放次数:无限 */
/* Safari and Chrome */
-webkit-animation-name: breath; /* 动画名称 */
-webkit-animation-duration: 3s; /* 动画时长3秒 */
-webkit-animation-timing-function: ease-in-out; /* 动画速度曲线:以低速开始和结束 */
-webkit-animation-iteration-count: infinite; /* 播放次数:无限 */
}
@keyframes breath {
from { opacity: 0.1; } /* 动画开始时的不透明度 */
50% { opacity: 1; } /* 动画50% 时的不透明度 */
to { opacity: 0.1; } /* 动画结束时的不透明度 */
}
@-webkit-keyframes breath {
from { opacity: 0.1; } /* 动画开始时的不透明度 */
50% { opacity: 1; } /* 动画50% 时的不透明度 */
to { opacity: 0.1; } /* 动画结束时的不透明度 */
}
原文:http://my.oschina.net/cobish/blog/303796
呼吸灯效果html,css之呼吸灯效果相关推荐
- 书翻页效果php,Css实现翻书效果
如何实现翻书效果在一些小说站中经常应用,其实实现起来也很简单,下面是用div+css 实现翻书效果. body{ overflow: hidden; margin: 0; padding: 0; } ...
- html导航凹凸效果,纯CSS实现底部弧度效果(凹凸圆弧)
相信大家再开中中都遇到过底部边为圆弧(凹凸圆弧),其它三边都正常的情况,这种图之前我都会采用图片去搞,但是身为一名开发人员(算是程序员了),应该从便曾的角度去解决问题,所以今天分享下纯css实现底部弧 ...
- html5实现立体照片墙效果,利用css制作3D照片墙效果
利用css制作3D照片墙,具体代码如下所示: 无标题文档 以上代码是准备工作,在html代码的body主体中放了一个div,里面包着你想要显示在照片墙上的照片,数量可以任意.接着开始着手写样式. bo ...
- android 音符动画效果,纯css实现音符跳动效果
效果如图: image.png 代码: 纯css实现音符跳动效果 .voice { display: flex; align-items: flex-end; justify-content: cen ...
- html实现的动画效果代码,CSS实现雨滴动画效果的实例代码
玻璃窗 今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. .window { position: absolute; width: 10 ...
- html中数字效果,使用css实现电子数字效果
在生活中我们看到电子表的显示方式 现在我们就实现这样的效果,核心就是每个数字构建后再合并,话不多说上代码 html结构 css结构 /* The Digits */ .light{ 200px; ba ...
- html div点击选中效果,纯css实现选中切换效果
最近不太忙,多写几篇文章.很多时候我们用js来实现视觉效果,其实不用那么麻烦,掌握一些常用的css知识能让你事半功倍,这篇文章讲的是使用纯css来实现一个列表项的选中效果,希望对你有所帮助 实现这个效 ...
- 不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果 原文:不可思议的纯 CSS 实现鼠标跟随效果 直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
- php3d按钮,CSS实现3D按钮效果
这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...
- CSS实现开灯关灯的效果
CSS实现开灯关灯的效果 1. html文件 <!DOCTYPE html> <html lang="en"><head><meta ch ...
最新文章
- OKR的本质是什么?目标如何制定?
- 如何使用ADLab搭建活动目录实验环境来练习渗透测试技术
- python调用math函数_Python中sqrt函数使用方法
- conky在ubuntu xfce4下面的配置
- datetime模块日期转换和列表sorted排序
- java supplier_Java 函数式编程
- 53. (待补) (使用单链表)实现简单的管理系统 MVC 将链表作为内存数据模型,将文件作为数据库,将终端作为交互界面。读文件生成 链表,修改链表写入文件。...
- Arm 中国原 CEO 被“罢免”,新指定“官方”:已获员工大力支持
- 利用Python批量修改多个ass字幕文件
- Linux常见查看日志命令
- 【技术贴】Realtek HD声卡下QQ语音话筒没声音解决办法
- rockchip的yocto编译环境的搭建
- 大连计算机学校附近的逸林,逸林街附近学校
- 未来计算机的研究热点主要有人工智能,人工智能的发展及其影响研究
- parametrize参数化中使用skip标记
- 【ARM汇编】第三章:ARM指令系统
- python版本换行问题
- git 修改远端 commit 信息
- 人工智能专业就业方向盘点
- 计算机自带游戏怎么调,如何设置电脑游戏全屏?