文字闪动效果

最新推荐文章于 2024-05-07 03:10:10 发布

前端菜菜子

最新推荐文章于 2024-05-07 03:10:10 发布

阅读量408

点赞数 2

分类专栏： css 文章标签： css3 文字闪动动效

本文链接：https://blog.csdn.net/weixin_41552521/article/details/93860712

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS3属性text-shadow

首先你需要了解text-shadow属性
多个阴影

	text-shadow:h-shadow v-shadow blur color,h-shadow v-shadow blur color,......;

在这里插入图片描述

实现文字闪动效果

利用js控制文字阴影的切换显示实现闪动的效果

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>文字闪动</title>
 <style>
  body,
  html {
   padding: 0;
   margin: 0;
   background: #000;
  }

  div {
   padding: 4vw 6.67vw;
   text-align: center;
   letter-spacing: 3px;
  }

  #ele span {
   font-size: 6.67vw;
   font-weight: 700;
   color: #fff;
   display: inline-block;
   transform: rotateZ(5deg);
   text-shadow: -3px -3px 0px #ff0095;
  }

  #EngLish span {
   font-size: 4vw;
   font-weight: 500;
   color: #fff;
   display: inline-block;
   text-shadow: -3px -3px 0px #ff0095;
  }

  #ele span.demo {
   text-shadow: -3px -3px 0px #00ccff, 3px 3px 3px #ff0095;
  }
 </style>
</head>

<body>
 <div id="ele">
   <span>文</span>
   <span>字</span>
   <span>闪</span>
   <span>动</span>
   <span>效</span>
   <span>果</span>
 </div>
 <div id="EngLish">
   <span>wenzishandongxiaoguo</span>
 </div>
 <script>
  var ELE = document.getElementById('ele');
  var SPANS = ELE.children;
  for (let i = 0; i < SPANS.length; i++) {
   setInterval(function () {
    SPANS[i].classList.add('demo')
    SPANS[i].style.transform = 'rotateZ(' + randomDeg() + 'deg)';
    setTimeout(function () {
     SPANS[i].classList.remove('demo')
    }, 200)
    setTimeout(function () {
     SPANS[i].classList.add('demo')
     setTimeout(function () {
     SPANS[i].classList.remove('demo')
    }, 400)
    }, 300)
   }, 1000)
  }
  // -15deg------15deg随机数
  function randomDeg() {
   let plusMinus = Math.random();
   let DEG;
   if (plusMinus>0.5) {
    DEG = Math.floor(Math.random()*16)
   } else {
    DEG = '-' + Math.floor(Math.random()*16)
   }
    return DEG
  }

 </script>
</body>

</html>

前端菜菜子

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
文字闪动效果

CSS3属性text-shadow首先你需要了解text-shadow属性多个阴影 text-shadow:h-shadow v-shadow blur color,h-shadow v-shadow blur color,......;实现文字闪动效果利用js控制文字阴影的切换显示实现闪动的效果<!DOCTYPE html><html lang="en...
复制链接

扫一扫