情人节-纯CSS实现跳动爱心

最新推荐文章于 2024-07-11 16:15:52 发布

G018_star sky♬

最新推荐文章于 2024-07-11 16:15:52 发布

阅读量550

点赞数 2

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_42526440/article/details/122909561

版权

CSS 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>520</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background: pink;
    }

    .box {
      width: 150px;
      height: 150px;
      background: #ff0000;
      margin: 200px auto;
      margin-bottom: 80px;
      /* 盒子旋转45度 */
      transform: rotate(45deg) scale(0.9);
      /* 绑定动画 */
      animation: change 1s infinite;
      box-shadow: 0 0 30px 5px rgba(255, 0, 0, 0.7);
    }

    .box::after,
    .box::before {
      content: "";
      position: absolute;
      width: 150px;
      height: 150px;
      background: #ff0000;
      /* 让插入的两个边框变成圆角 */
      border-radius: 50%;
      /* 给盒子设置阴影效果 */
      box-shadow: 0 0 30px 5px rgba(255, 0, 0, 0.7);
    }

    .box::after {
      /* 让这个盒子向左偏移68px */
      left: -68px;
    }

    .box::before {
      /* 让这个盒子向上偏移68px */
      top: -68px;
    }

    /* 创建动画 */
    /* 要让爱心动起来其实很简单，只需要变形-缩放 */
    @keyframes change {
      0% {
        transform: rotate(45deg) scale(0.85);
      }

      50% {
        transform: rotate(45deg) scale(1);
      }

      100% {
        transform: rotate(45deg) scale(0.85);
      }
    }

    p {
      text-align: center;
      font-size: 30px;
      font-weight: 520;
      color: rgba(255, 0, 0, 0.5);
      /* 文字阴影 */
      text-shadow: 0 0 2px rgba(255, 0, 0, 0.5);
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <p>若你脆弱不堪，我愿将弱点向你暴露无遗</p>
  <p>若你假装坚强，我愿将你的柔软轻拥怀中</p>
</body>

</html>

效果展示：
在这里插入图片描述

G018_star sky♬

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
情人节-纯CSS实现跳动爱心

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>520</title> <style> * { margin: 0; padding
复制链接

扫一扫

专栏目录