手把手带你实现“我的心脏怦怦跳”效果

简介: 首先,经过仔细的观察,我发现,只要拿三个正方行其实就可以拼出这么一个爱心了。

5888b6c997424144b981d6719042e137_tplv-k3u1fbpfcp-zoom-crop-mark_3024_3024_3024_1702.gif


首先,经过仔细的观察,我发现,只要拿三个正方行其实就可以拼出这么一个爱心了。如下图:


image.png


也就是两个圆+一个方形,而两个圆我们只要两个方块搞个圆角就OK了,上代码:


<style>    body {      background-color: skyblue;    }    .heart {      width: 220px;      height: 200px;      margin: 100px auto;      /* 暂时为了看到 heart 的位置 */      background: #fff;      /* 用于里面盒子相对于父元素定位 */      position: relative;    }    .left, .right, .bottom {      width: 125px;      height: 125px;      background-color: red;      /* 定位 */      position: absolute;    }    .left {      left: 0;      border-radius: 50%;    }    .right {      right: 0;      border-radius: 50%;    }    .bottom {      /* 绝对定位元素水平居中 */      left: 0;      right: 0;      margin: 46px auto;      /* 也可以用下面这种方式水平居中,至于距离上面的高度是调着摆的       left: 50%;      transform: translateX(-50%);      margin-top: 46px;      */    }  </style></head><body>  <div class="heart">    <div class="left"></div>    <div class="right"></div>    <div class="bottom"></div>  </div></body></html>


到这里发现我们发现自己已经成功了一半:


image.png


咳咳,半个骨头已经画好了,剩下的半个交给你了……🤭


接下来,我们发现只要讲下面的元素旋转45°就好了


.bottom {  transform: rotateZ(45deg);}


image.png


现在基本上的形状就已经好了,我能可以把大盒子白色的背景去掉了。


那么剩下的,我们只要,给它加上阴影和让它跳起来就好了。


先给它加上阴影:


.left, .right, .bottom {  box-shadow: 0 0 20px red;}


然后让它动起来:


.heart {  animation: beat 1s ease-in infinite alternate;}@keyframes beat {  from {    transform: scale(1);  }  to {    transform: scale(1.1);  }}


到这里你的心已经可以跳了,是不是有一点激动🤩

目录
打赏
0
0
0
0
1
分享
相关文章
每天打卡,跟冰河肝这些项目,技术能力嗖嗖往上提升
前几天,就有不少小伙伴问我,冰河,你星球有哪些项目呢?我想肝你星球的项目,可以吗?今天,我就给大家简单聊聊我星球里有哪些系统性的项目吧。其实,每一个项目的价值都会远超门票。
170 0
每天打卡,跟冰河肝这些项目,技术能力嗖嗖往上提升
|
8月前
|
C#
手把手教你用C#写一个刷屏软件
手把手教你用C#写一个刷屏软件
手把手教你使用红队工具——caldera
它建立在MITRE ATT&CK框架上,是MITRE的一个活跃的研究项目。
2471 0
【仿真建模】第一课:AnyLogic入门基础教程 - 行人库入门讲解
点击面板,选择第三个图标,就是行人库行人库分为两个区域(空间标记和模块)从左边拽一个矩形墙出来把墙的外观的填充类型改为无填充拽两条目标线出来拽一个pedSource模块出来,作用是设置人的起始点设置目标线为左边的那条同样的,拽出一个Ped GoTo,作用是设置人的目的地,设置它的目标线为右边的那条最后,拽一个PedSink出来,作用是将到达目的地的人进行销毁点击运行加速播放运行效果展示。
954 0
【仿真建模】第一课:AnyLogic入门基础教程 - 行人库入门讲解
《算法基础课我的最爱》==》第一课(三)
《算法基础课我的最爱》==》第一课
75 0
《算法基础课我的最爱》==》第一课(二)
《算法基础课我的最爱》==》第一课
78 0
《算法基础课我的最爱》==》第一课(一)
《算法基础课我的最爱》==》第一课
85 0
撕书吧!编程小白!你也能学的哈佛CS50,全美最受欢迎计算机入门课
【新智元导读】自学计算机,到底如何入门?哈佛大学计算机导论课程 CS50推荐给编程小白们,这门课是哈佛最受欢迎的课程之一,老师风趣幽默,带你少走弯路,直奔编程大门。
477 0
撕书吧!编程小白!你也能学的哈佛CS50,全美最受欢迎计算机入门课