文章数量
36
访客量
4552
访问量
8980

css特效之发光卡片

阅读量:322
更新时间:2023-08-29 21:03:41

效果预览:效果预览
源码下载:关注公众号【RMRF】,回复【css12】可获取源码

使用@keyframes rotation关键帧动画,让圆环从 0 度旋转到 360 度,实现发光彩色圆环特效的卡片

HTML

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="container">
    <div class="card">
      <div class="card-content"></div>
    </div>
  </div>
</body>

</html>

CSS

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="container">
    <div class="card">
      <div class="card-content"></div>
    </div>
  </div>
</body>

</html>