css呼吸灯
Posted rain111
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css呼吸灯相关的知识，希望对你有一定的参考价值。
css呼吸灯
CSS中animation动画
Animations由两部分组成：
- css动画的配置；
- animation-name ：xx （设置关键帧的名称为xx）；
- animation-duration：1s （动画持续时间为1s）；
- animation-timing-function： linear （动画时间曲线：linear、ease（默认）、ease-in 、ease-out、ease-in-out、cubic-bezier(n,n,n,n) ） 。
- animation-delay:2s (动画等待2后开始)；
- animatiom-iteration-count：infinite （动画播放次数）；
- animation-direction：alternate（设置动画播放形式，规定动画是否在下一周期逆向地播放 nomal、reverse ）；
- animation-fill-mode： （动画结束的最后一帧，规定对象动画时间之外的状态）；
- animation-play-state： （设置动画是否暂停）；
- keyframes关键帧：一系列的keyframes（用来描述动画的开始、过程、结束状态）；
- from to：
- 百分比：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>呼吸灯</title>
<style>
.btn-group
width: 100px;
height: 100px;
.box
width: 100px;
height: 100px;
border: 1px solid #333;
.breath
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid #333;
border-radius: 50%;
position: relative;
.breath .transcribe
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid #333;
border-radius: 50%;
background-color: red;
animation: myMove 1s linear infinite;
animation-play-state:running;
.breath .transcribe:hover
background-color:green;
/* animation-play-state:paused; */
@keyframes myMove
0%
opacity: 1;
/* visibility:visible; */
25%
opacity: 0;
/* visibility:visible; */
100%
opacity: 0;
/* visibility: hidden; */
</style>
</head>
<body>
<div class="btn-group">
<button onclick="pause()">暂停</button>
<button onclick="start()">开始</button>
</div>
<div class="box">
<span class="breath">
<span class="transcribe"></span>
</span>
</div>
</body>
</html>
<script type="text/javascript">
function pause ()
let ele = document.querySelector(\'.transcribe\')
console.log("pause", ele);
ele.style.animationPlayState = "paused"
function start ()
let ele = document.querySelector(\'.transcribe\')
console.log("start", ele);
ele.style.animationPlayState = "running"
function shouldResize()
console.log("current", window.innerWidth, window.innerHeight);
function shouldLoad()
console.log("onload");
window.addEventListener("resize", shouldResize)
window.addEventListener("load", shouldLoad)
</script>
arduino呼吸灯流水编程问题
对数字端口3、5、6、9进行编程，行成流水灯形式呼吸灯效果，3号灯完全熄灭后，5号灯点亮以此类推，亮度变化（PWM）要求：范围为0-255，以30为间隔阶梯式增加及减少，每次变化时间为延迟62毫秒），循环两次。创造栗可视化arduino
呼吸灯完成一个要怎么接着下一个呼吸灯？
ps：我查这个问题的原因是，我想要设计的流水呼吸灯，是在第一个灯递增到一定亮度的时候，接下来的灯依次开始呼吸，对此我没有头绪。 参考技术A 你用的是 Uno 吧？ io口应该足够了
以上是关于css呼吸灯的主要内容，如果未能解决你的问题，请参考以下文章