2-9 CSS动画案例：跳动的心

最新推荐文章于 2023-11-12 00:15:00 发布

一生注定学霸命

最新推荐文章于 2023-11-12 00:15:00 发布

阅读量495

点赞数

分类专栏： HTML与CSS基础文章标签： css

本文链接：https://blog.csdn.net/qq_40282016/article/details/115730566

版权

HTML与CSS基础专栏收录该内容

12 篇文章 2 订阅

订阅专栏

1.分析:
一个心的构成由：两个圆和一个旋转45°的正方形构成
具体的移动方法构成方法没有绝对，只要有足够的想象力，能够做出来就可以。

<body>
 <div id="heart">
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
  </div>

*{margin:2; padding:0; box-sizing: border-box;}

#heart{
  margin:100px;/*移动heart的位置*/
  position: relative;/*absolute的定位基准，好调整圆的位置*/
  display: inline-block;/*heart大小为完全包含内部元素大小*/
  transition: all .5s;/*加一个过度，0.5可以直接缩写成.5*/
}

#heart:hover{
  transform: scale(1.5);/*鼠标浮上去放大1.5倍*/
}

#heart>.bottom{
  /*正方形*/
  width: 50px;
  height: 50px;
  transform: rotate(45deg);/*正方形旋转45度*/
  background: red;
}

#heart>.left{
  /*圆*/
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 100%;
  right:100%;/*将圆调整到左上角的位置*/
  transform:rotate(45deg) translateX(41px);
  /*将左上角的方形旋转再往右下角移动，具体移动数值自己不断尝试调整，直到完全贴合*/
  border-radius:50% 0 0 50%;/*平时变成圆可以简写成一个50%，此时调整两个角就一个一个试*/
  background: red;
}

#heart>.right{
  /*圆*/
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 100%;
  left: 100%;/*将圆调整到左上角的位置*/
  transform:rotate(45deg) translateY(41px);
  border-radius:50% 50% 0 0;
  background: red;
}

图解：
在这里插入图片描述

调整圆移动的位置，translate的数值即可

一生注定学霸命

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2-9 CSS动画案例：跳动的心

1.分析:一个心的构成由：两个圆和一个旋转45°的正方形构成具体的移动方法构成方法没有绝对，只要有足够的想象力，能够做出来就可以。<body> <div id="heart"> <div class="left"></div> <div class="right"></div> <div class="bottom"></div> </div>*{margin:
复制链接

扫一扫

专栏目录