CSS动画3----- 跳动的心

最新推荐文章于 2021-12-09 15:40:50 发布

原创最新推荐文章于 2021-12-09 15:40:50 发布 · 659 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #3d #前端

前端动画特效专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用CSS绘制一个心形，并通过动画效果使其跳动。首先，利用正方形和两个圆创建基本心形，然后通过旋转和伪元素调整形状。接着，添加动画实现心形的动态跳动效果。

学习链接：B站视频

一、绘制心形

讲解

所谓心形，就是一个正方形，加两个直径等于正方形的圆组成的

在这里插入图片描述

然后再旋转45°，把边框去掉就获得一个爱心了

在这里插入图片描述

代码

<div class="heart"></div>

    .heart {   /* 为一个正方形 */
      position: relative;
      width: 200px;
      height: 200px;
      background-color: #e74c3c;
      transform: rotate(45deg); /* 旋转45° */
    }
    .heart::before,     /* 使用伪元素来构造圆 */
    .heart::after {
      position: absolute;
      content: '';
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-color: #e74c3c;
    }
    .heart::before {
      transform: translateX(-100px);
    }
    .heart::after {
      transform: translateY(-100px);
    }

二、跳动起来

演示

(莫名的害怕)

在这里插入图片描述

代码

<div class="heart"></div>

    .heart {  /* 为一个正方形 */
      position: relative;
      width: 200px;
      height: 200px;
      background-color: #e74c3c;
      transform: rotate(45deg) scale(.5);  /* 旋转45° */
      opacity: .5;
      animation-name: hd;
      animation-duration: 2s;
      animation-iteration-count: infinite;  /* 无限循环 */
    }

    .heart::before,   /* 使用伪元素来构造圆 */
    .heart::after { 
      position: absolute;
      content: '';
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background-color: #e74c3c;
    }
    .heart::before {
      transform: translateX(-100px);
    }
    .heart::after {
      transform: translateY(-100px);
    }

    @keyframes hd {  /* 定义动画的变化帧：缩放、透明度 */
      25% {
        opacity: 1;
        transform: rotate(45deg) scale(1); 
      }
      50% {
        opacity: .5;
        transform: rotate(45deg) scale(.5);
      }
      75% {
        opacity: 1;
        transform: rotate(45deg) scale(1);
      }
      to {
        opacity: .5;
        transform: rotate(45deg) scale(.5); 
      }
    }