2022年 7 月 03日- (星期日) / Published in css 设计, html 设计, new code design, 前端设计

用html css 制作聚光灯照射文字特效闪光文字动画效果cid1175+源码下载

html and css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webIQ</title>

    <link rel="stylesheet" href="" />
<style>	
  * {
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: black;
}

p {
  position: relative;
  font-family: sans-serif;
  font-size: 4em;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #000, #fff, #000);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: animate 6s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes animate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}
</style>
  </head>
  <body>
    <p>Learn Web Designing with webIQ</p>
  </body>
</html>

在线演示

让链接同时具备两种打开方式