在网页设计中,为了使页面更加美观,编辑者经常会给网页添加一些动画效果,例如文字呼吸效果
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<p id="breath">文字呼吸效果</p>
</div>
<script>
var breath = document.querySelector('#breath');
var transparency = 10;
var reduce = true; //记录当前做透明度增加或降低操作
function result() {
if (reduce === true){
transparency -= 1;
if (transparency === 0){
reduce = false;
}
} else if (reduce === false){
transparency += 1;
if (transparency === 10){
reduce = true;
}
}
breath.style.opacity = transparency/10;
console.log(transparency/10)
}
setInterval(result,200);
</script>
</body>
</html>