一.主要思路是

二.完整参考代码：

三.附上部分参考注释

四.最终效果

一.主要思路是

构造一个大盒子，里面放left、right、bottom三个小盒子，并将三个盒子设置好边框宽度、高度、弧度达到想要的形状（大致为上面两个圆下面一个矩形），为三个小盒子设置好背景色和阴影效果，最后为其设置动画效果

二.完整参考代码：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>简易跳动爱心</title><style>@keyframes myanimation {   0%{transform: scale(1) rotate(225deg);}50%{transform: scale(1.2) rotate(225deg);}100%{transform: scale(1) rotate(225deg);}}.all{width: 400px;height: 300px;top: 50px;                           position: relative;                  }.left{left: 30px;width: 200px;height: 200px;border-radius: 65%;        }.right{right: 30px;width: 200px;height: 200px;border-radius: 65%;          }.bottom{bottom: 30px;left: 100px;width: 200px;height: 200px;transform: rotate(45deg);border-radius: 8%;            }.left,.right,.bottom{position: absolute;        box-shadow:0 0 40px orangered;     animation: myanimation 1.5s ease infinite normal;     background: linear-gradient(-90deg, orangered 0%, orangered 100%);   }</style>
</head>
<body><div class="all"><div class="left"></div><div class="right"></div><div class="bottom"></div></div>
</body>
</html>

三.附上部分参考注释

当然也可以尝试用用z-index属性来设置重叠效果是否满意

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>跳动爱心</title>
    <style>
        @keyframes myanimation {

/*这里要达到的效果主要是控制bottom盒子旋转缩放后位置通过角度计算达到重合*/
            0%{
                transform: scale(1) rotate(225deg);
            }
            50%{
                transform: scale(1.2) rotate(225deg);
            }
            100%{
                transform: scale(1) rotate(225deg);
            }
            /*变换效果：
            scale()表示对标签进行缩放可以写两个参数，第一个参数控制水平方向缩放，第二个控制垂直方向缩放
            rotate()表示对标签进行旋转，括号内写需要旋转度数*/
        }
        .all{
            width: 400px;
            height: 300px;
            top: 50px;                           /*图像上下左右位置参数可根据自身需求调整*/
            position: relative;                  /*.all作为父元素，需为其设置相对位置，“子绝父相”*/
        }
        .left{
            left: 30px;
            width: 200px;
            height: 200px;
            border-radius: 65%;        /*调整左上盒子的弧度*/
        }
        .right{
            right: 30px;
            width: 200px;
            height: 200px;
            border-radius: 65%;          /*调整右上盒子的弧度*/
        }
        .bottom{
            bottom: 30px;
            left: 100px;
            width: 200px;
            height: 200px;

transform: rotate(45deg);    /*将下面的盒子旋转45度达到目标图形*/            
            border-radius: 8%;            /*调整下方盒子的弧度*/
        }
        .left,.right,.bottom{
            position: absolute;        /*三个子元素设置绝对位置属性*/
            box-shadow:0 0 40px orangered;

/*设置盒子阴影效果，四个参数含义：x轴偏移值，y轴偏移值，模糊度，颜色*/
            animation: myanimation 1.5s ease infinite normal;

/*调用animation属性为跳动激活属性，以常规动画方向无限循环跳动，每次跳动1.5秒*/
            background: linear-gradient(-90deg, orangered 0%, orangered 100%);

/*为三个子元素的背景设置渐变颜色，表示的意思是以负90度为渐变轴，从开始橘红色渐变到最后为橘红色，颜色建议选择相近色或相同色*/
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="left"></div>
        <div class="right"></div>
        <div class="bottom"></div>
    </div>
</body>
</html>

四.最终效果

html+css编写简单构造跳动爱心相关推荐

  1. Python超简单实现跳动爱心代码/opencv/几十行代码/新手也能学会

    Python超简单实现跳动爱心代码/opencv/几十行代码/新手也能学会 1.OpenCV逐帧处理视频获得坐标像素点 从网上寻找带有此同款爱心视频,原视频出处--<点燃我,温暖你>,截取 ...

  2. html跳动爱心代码,html+css实现跳动爱心❥(^_-)-Go语言中文社区

    跳动爱心主要用了些css3的动画效果@keyframe,实现后的效果如下图(截图效果比较差).代码再往下滑. 1.html代码 跳动爱心 2.css代码 *{ margin:0; padding:0; ...

  3. python爬虫简单实例-Python 利用Python编写简单网络爬虫实例3

    利用Python编写简单网络爬虫实例3 by:授客 QQ:1033553122 实验环境 python版本:3.3.5(2.7下报错 实验目的 获取目标网站"http://bbs.51tes ...

  4. 5去掉button按钮的点击样式_各种好看的小按钮合集，纯css编写，最近在学习时遇到的，记录成为笔记...

    写在前面 最近忙着实习的事,前往广州,租房,置办东西等等.用碎片化的时间看了一些博客,也看到不少我认为很不错的通过纯css来打造的按钮样式.记录下来以后开发的时候或许能用上. 亮起来按钮 <di ...

  5. button按钮样式_各种好看的小按钮合集，纯css编写，最近在学习时遇到的，记录成为笔记...

    写在前面 最近忙着实习的事,前往广州,租房,置办东西等等.用碎片化的时间看了一些博客,也看到不少我认为很不错的通过纯css来打造的按钮样式.记录下来以后开发的时候或许能用上. 亮起来按钮 < 简 ...

  6. web前端好学吗？如何能提高CSS编写技巧 提高Web前端开发效率

    前端开发学习每个人都想走捷径,即想高效快速学习又想掌握当今最新的前端技术知识.其实,这样的想法是对的,找对学习方法就能达到这个效果.前端开发学习每个阶段都是非常重要的,一部分为专业知识.另一部分实战经 ...

  7. python程序-30分钟学会用Python编写简单程序

    原标题:30分钟学会用Python编写简单程序 参与文末每日话题讨论,赠送异步新书 异步图书君 学习目标 知道有序的软件开发过程的步骤. 了解遵循输入.处理.输出(IPO)模式的程序,并能够以简单的方 ...

  8. 七夕情人节~html+css+javascript实现满屏爱心特效(程序员表白)

    ❉ 七夕情人节 ❤html+css+j❤实现满屏爱心特效(程序员表白) ❤程序员表白, 很多人和小编一样受到暴击,需要告白的同学加紧了,不要错过这个好时机. ❤许多程序员小伙伴总是苦于找不到合适的告白 ...

  9. 原生API编写简单富文本编辑器001

    原生API编写简单富文本编辑器001 系列文章快速阅读: 富文本编辑器开发系列-1-基础概念 富文本编辑器开发系列2-document.execCommand 的API 富文本编辑器开发系列3-sel ...

最新文章

  1. 我在 Spring 的 BeanUtils 踩到的那些坑，千万不要犯！
  2. git reset --hard 恢复
  3. Linux之交互式scripts
  4. HALCON示例程序circles.hdev边界轮廓的圆形拟合
  5. 用了自定义Banner后，SpringBoot瞬间变的高大上了...
  6. ES6新特性_let变量声明以及声明特性---JavaScript_ECMAScript_ES6-ES11新特性工作笔记003
  7. 程序员修神之路--分布式高并发下Actor模型如此优秀
  8. 得知发行组长老潘今天岗位上最后一天就要离开有感
  9. 控制器之间跳转实现转场动画,动画控制器概念
  10. [zz]在港内地学生办理工作签证指南(IANG)
  11. iPhone 定位记录「重要地点」有多危险？用这招秒查另一半行踪
  12. 服务器修改上传图片大小限制,修改IIS7默认上传大小限制
  13. 数据结构之中缀表达式计算
  14. 在一个递增有序的线性表中，有数值相同的元素存在。若存储方式为单链表，设计算法，去掉数值相同的元素，使得表中不再有重复的元素。
  15. oracle账号共享
  16. ESRI中国（北京）招聘售前技术工程师(招聘结束，谢谢大家！)
  17. phpMyAdmin 尝试连接到 MySQL 服务器,但服务器拒绝连接.您应该检查配置文件中的
  18. PICO-8虚拟幻想游戏机是一款理想的受限现代游戏机
  19. Sun OS Classic Command
  20. 20考研「数学一」真题+解析完整版

热门文章

  1. python提取word内容并写入excle
  2. Could not resolve view with name 'xxx' in servlet with name 'dispatcherServlet',
  3. 产品设计有哪些计算机应用,计算机应用专业产品设计方向
  4. 2008R2服务器提示 由于远程,Server2008R2远程桌面提示出现身份验证错误的问题解决...
  5. 安卓手机短信发不出去怎么办
  6. 2022SEO关键发包快速排名系统源码
  7. SQL优化 21 连击 + 思维导图
  8. bat cmd 获取管理员权限
  9. 刀剑英雄与服务器连接中断,服务器全面升级！遇见更强的《刀剑》
  10. 华为笔记本matebook14 2020锐龙安装Ubuntu20.04+美化