CSS 实现按钮及线呼吸灯效果
1. [代码]style
view sourceprint?
01
<style>
02
body{
03
font-family:'Segoe UI Light','Segoe UI',Arial,'微软雅黑',sans-serif;
04
font-size: 20px;
05
color:#333333;
06
07
}
08
.breath {
09
margin:100px auto;
10
text-indent:-999em;
11
height:4px;
12
line-height: 4px;
13
width: 50px;
14
overflow:hidden;
15
16
background: #99dd33;
17
color: #fff;
18
opacity:0.1;
19
20
-webkit-box-shadow: 0 0 5px #99dd33;
21
-moz-box-shadow: 0 0 5px #99dd33;
22
-ms-box-shadow: 0 0 5px #99dd33;
23
-o-box-shadow: 0 0 5px #99dd33;
24
box-shadow: 0 0 5px #99dd33;
25
-webkit-border-radius:2px;
26
-moz-border-radius:2px;
27
-ms-border-radius:2px;
28
-o-border-radius:2px;
29
border-radius:2px;
30
31
-webkit-animation-name: breath;
32
-webkit-animation-duration: 6s; /*人的普通呼吸时间是3秒每次,深呼吸时间是6秒每次*/
33
-webkit-animation-timing-function: ease-in-out;
34
-webkit-animation-iteration-count: infinite;
35
}
36
37
@-webkit-keyframes 'breath' {
38
from {
39
opacity:0.1;
40
}
41
50% {
42
opacity:1;
43
}
44
to {
45
opacity:0.1;
46
}
47
}
48
49
@-webkit-keyframes 'breath2' {
50
from {
51
opacity:0.5;
52
}
53
50% {
54
opacity:1;
55
}
56
to {
57
opacity:0.5;
58
}
59
}
60
61
.size2{
62
63
width:100px;
64
height:30px;
65
line-height:25px;
66
text-indent:0;
67
backgroundrange;
68
text-align:center;
69
text-shadow:1px 1px 3px #333;
70
71
-webkit-box-shadow:0 0 5px orange;
72
-moz-box-shadow: 0 0 5px orange;
73
-ms-box-shadow: 0 0 5px orange;
74
-o-box-shadow: 0 0 5px orange;
75
box-shadow: 0 0 5px orange;
76
77
-webkit-animation-name: breath2;
78
}
79
</style>
2. [代码]body
1
<div class="breath" title="呼吸线">line</div>
2
<div class="breath size2" title="呼吸按钮">按钮</div>
个性鼠标图标
本片段来源:http://www.huiyi8.com/shubiao/gexing/
转载于:https://blog.51cto.com/ygjlv/1429904
CSS 实现按钮及线呼吸灯效果相关推荐
- jQuery+js+css实现键盘按键呼吸灯效果
#直接上效果图: ##说明:需要引入jQuery文件,图片地址自选本地即可 <!DOCTYPE html> <html lang="en"><head ...
- css怎么动画中该透明度,通过css3动画和opacity透明度实现呼吸灯效果
本文介绍了通过css3动画和opacity透明度实现呼吸灯效果的方法,分享给大家,具体如下: 呼吸灯 /*也可以通过加层罩,通过设置层罩透明度来实现亮度动画*/ body{ background-co ...
- 用CSS3快速实现呼吸灯效果-案例
呼吸灯效果 核心 @keyframes breath {from { opacity: 0.1; } /* 动画开始时的不透明度 */50% { opacity: 1; } /* 动画50% 时的不透 ...
- css3实现科技感的呼吸灯效果
呼吸灯效果是一种常见的灯光效果,比如网页的按钮,现实生活中比如电脑的开机按钮. 使用CSS3的animation方法可以实现很多迷人的网页动画特效. 使用CSS3 配合box-shadow即可实现类似 ...
- CSS3特效 - 呼吸灯效果
CSS3特效 - 呼吸灯效果 1. 效果图 2. 代码如下 <!DOCTYPE html> <html> <head><meta http-equiv=&qu ...
- Arduino ESP32利用PWM实现板载LED呼吸灯效果
Arduino ESP32利用PWM实现板载LED呼吸灯效果 LEDC简介 LED控制(LEDC)外围设备主要用于控制LED的强度,尽管它也可以用于生成PWM信号用于其他目的.它具有16个通道,可以生 ...
- 一个定时器实现IO模拟pwm,呼吸灯效果
以定时器1为例 uchar time1_10ms = 0; uchar time1_100ms = 0; bit IS_10ms = 0; bit IS_100ms = 0; ...
- ESP32-C3使用LEDC外设实现呼吸灯效果
这次有一个项目计划使用ESP32-C3来做主控. 根据手册可以知道,ESP32-C3自带一个LED控制器. 这个控制器可以方便的实现呼吸灯效果.那接下来我们盘它. 本次实验使用的板子是安信可的ESP- ...
- STM32:PWM驱动LED达到呼吸灯效果(内含:1.接线原理图/实物图+2.代码部分+3.注意事项/补充知识点部分)
1.接线原理图: LED正极接PA0,负极接GND,即高电平电亮,低电平熄灭.占空比越大,LED越亮:占空比越小,LED越暗. 实物图: LED在不断的改变亮度,实现呼吸灯效果.(是LED完全亮完全灭 ...
最新文章
- 一小时Thinkphp后台(2)
- Android Studio窗口组成
- 【撸码师的读书笔记】 深入理解Java虚拟机——JVM高级特性与最佳实践
- 推销自己的前端技术书籍
- Nginx学习总结(13)——Nginx 重要知识点回顾
- shell 创建文件_vba代替鼠标打开文件夹
- 分享一个自己写的py扫描路径工具
- 解决开发工具文件夹拖不进图片文件
- 关于fork函数的使用
- 马斯克:未来将尝试打造超级高铁运输系统 时速是飞机的2倍
- 哈哈,我用Python开发了一个搜题神奇
- 这款优秀的检验工具SolidWorks Inspection你用过吗?
- 【程序人生】有个程序员男朋友是什么体验?被公开吐槽
- 剑指 Offer第 11 天 双指针(简单)
- 后端工作中遇到的问题总结(一)
- 离线强化学习(Offline RL)系列3: (算法篇) IQL(Implicit Q-learning)算法详解与实现
- 【渝粤教育】电大中专Office办公软件 (14)作业 题库
- iphone自带计算机删除,如何清理iPhone上的垃圾文件
- 腾讯T9纯手写基于Mycat中间件的分布式数据库架构笔记
- 垃圾分类绿色环保垃圾不落地家园更美丽PPT模板
热门文章
- html标记的索引,基于HTML标记分析及中文切词的网页索引研究与实现
- android string数字字符串如何使用科学计数法,JSONObject 偶遇 数字字符串变为科学计数法 如何变为普通数字字符串...
- ajax mysql点赞_php+mysql结合Ajax实现点赞功能完整实例
- c从oracle到mysql移植_数据库从oracle移植到mysql时需要进行的修改
- mysql5.1怎么备份,MySQL 5.1升级到MySQL 5.5的步骤
- 《软件需求分析(第二版)》第 15 章——变更管理 重点部分总结
- php dom 丢失内容,PHP DOMDocument缺失
- 简述springmvc过程_spring mvc的工作流程是什么?
- easyui中onchange事件_React中类似Vue的“模板语法”
- HTML音乐播放没声音,网页没有声音但系统显示有声音怎么回事?如何解决?