使用CSS和HTML绘制一个跳动的爱心

最新推荐文章于 2024-05-25 16:50:22 发布

TRXYE 至臻

最新推荐文章于 2024-05-25 16:50:22 发布

阅读量5.5k

点赞数 7

分类专栏：前端学习-动画文章标签：前端 html css 动画

本文链接：https://blog.csdn.net/qq_39936163/article/details/88825501

版权

前端学习-动画专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用HTML和纯CSS来绘制一个跳动的爱心

首先我们先写好html元素和并给一个初始宽高并让其居中。

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

body{
  margin: 0;
}
.heart{
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: red;
}

一个小技巧 ：给元素设置绝对定位，并将四个方向的定位都设为0 ，然后将margin设置为auto，即可实现元素在父元素的正中心。
效果如下：
在这里插入图片描述

下面进入到关键部分，给这个元素设置伪元素。

.heart:before{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 30px;
  height: 50px;
  content: '';
  border-radius: 30px 30px 0 0;
  background: white;
  left: 30%;
}

效果如下：
在这里插入图片描述
给它加一个旋转：

.heart:before{
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

在CSS中，坐标系原点在左上角，x轴正方向向右，y轴正方向向下。transform-origin属性是定义transform操作的原点，第一个值是在x轴的位置，第二个值是在y轴的位置。0 和100%的意思就是新定义的原点在x轴的原点，y轴的末端（即宽度的末端），也就是左下角。
以左下角为原点，并旋转-45°后的效果如下：
在这里插入图片描述
这样就得到了爱心的一边，那么我再定义一个伪元素

.heart:after{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 30px;
  height: 50px;
  content: '';
  border-radius: 30px 30px 0 0;
  background: white;
  left: -30%;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

除了定位不一样，旋转中心与旋转角度不一样以外，其他的都一样。
这时候的效果如下图：
在这里插入图片描述
这样一个爱心就完成了。那么要怎样才能让它跳动起来呢？
通过@keyframes定义跳动的动画，再给他设置animation属性就可以啦，代码如下：

@keyframes heart-beat {
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.5);
  }
  100%{
    transform: scale(1);
  }
}
.heart{
  animation: heart-beat 1s ease infinite;
}

在这里插入图片描述
有点奇怪，把背景与伪元素的颜色对换一下。

.heart{
  background: white;
}
.heart:before,.heart:after{
  background: red;
}

改过之后又发现整个页面会随着动画的改变而抖动，主要是因为直接main标签直接包裹的这个div会被这个div撑开，而这个div又要时时刻刻保持在屏幕的中央，放大的时候撑开导致屏幕大小的变化因此出现抖动。
修改方式：
1.先将heart类的样式中宽高去掉
2.给main元素添加wrap类

<main class="wrap">

3.给wrap类添加样式，主要是确定宽高，然后居中

.wrap{
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

这样就正常啦。

TRXYE 至臻

关注

7
点赞
踩
37

收藏

觉得还不错? 一键收藏
4
评论
使用CSS和HTML绘制一个跳动的爱心

使用HTML和纯CSS来绘制一个跳动的爱心首先我们先写好html元素和并给一个初始宽高并让其居中。<body> <main> <div class="heart"></div> </main></body>body{ margin: 0;}.heart{ width: 100px; he...
复制链接

扫一扫