<style>
        .box{
            width: 200px;
            height: 400px;
            position: relative;
            margin: 30px auto;
            transform: all 0.5s;
        }
        @keyframes moves{
            from{box-shadow: 0 0 0 transparent;}
            30%{box-shadow: 0 0 50px rgb(236, 57, 57);}
            60%{box-shadow: 0 0 80px rgb(241, 97, 97);}
        }
        .box>div{
            animation: moves 1s infinite;
            transition-delay: 1s;
        }
        .box_1{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: red;
            border-bottom: 0;
        }
        div:nth-child(2){
            position: absolute;
            top: 0;
            left:80px;
        }
        .box_2{
            width: 100px;
            height: 130px;
            background: red;
            transform: rotateZ(57deg);
           
        }
        .box>div:nth-child(3){
            position: absolute;
            top: 2px;
            right: 31px;
            background-color: red;
            border-radius: 50% 50% 0% 0;
            box-shadow: 0 0 0 transparent !important;
        }
        .box>div:last-child{
            position: absolute;
            top: 4px;
            left: 12px;
            transform: rotateZ(122deg);
            border-radius: 0 0% 50% 50%;
        }
        /* .box:hover>div{
            box-shadow: 0 0 10px rgb(241, 97, 97);
        } */
    </style>
</head>
<body>
    <div class="box">
        <div class="box_1"></div>
        <div class="box_1"></div>
        <div class="box_2"></div>
        <div class="box_2"></div>
    </div>
</body>
</html>

html跳动的心实现代码的更多相关文章

  1. 使用transform属性和animation属性制作跳动的心

    transform属性允许我们对元素进行旋转.缩放.移动和倾斜: animation属性允许我们对元素实现一些动画效果: 跳动的心源码 <!DOCTYPE html> <html l ...

  2. Yii2-核心框架代码规范

    1.概述 简单说,我们使用PSR-2兼容规范,所以应用于PSR-2的一切对我们的代码也同样适用. 文件必须使用 <?php 或 <?= 标签. 文件未尾应该有一个新行. PHP代码文件必须 ...

  3. [WPF,XAML] 跳动的心

    原文:[WPF,XAML] 跳动的心 没什么艺术细胞,原谅,原谅! <Canvas Width="0" Height="0"> <Canvas ...

  4. TurnipBit-MicroPython开发板：跟孩子一起DIY跳动的心

    天是越来越热了,小心脏也是越跳越快啊,为了表达现在激动的心情,必须做个激动的心开始跳动.紧接着就开始带领大家做个激动的心. 首先说说要借助的平台,这次仅仅需要借助一块TurnipBit开发板. Tur ...

  5. 【ShaderToy】跳动的心❤️

    写在前面 注:如果你还不了解ShaderToy,请看开篇. 作为ShaderToy系列的第一篇,我们先来点简单的.下面是效果: (CSDN目前不能传gif文件了,暂时空缺,可以看下面的原shader效 ...

  6. 纯CSS制作“跳动的心”demo

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  7. CSS_跳动的心

    详细教程CSS3 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. CSS3学习笔记（2）—左右跳动的红心

    还在为无法表达内心澎湃的心情而着急吗?还在为制作跳动的心而烦恼吗?哈哈,今天我就把代码全部奉上,为你们追妹子添点贡献,下面来看最终的动态效果(事先说明一下:我用的截屏gif制作软件是绿色版的,所以gi ...

  9. js特效,加速度,图标跳动

    看到一个在地图上的特效,就是标注当前位置之后,图标一直在跳动,那效果看着比较得劲,就自己写了个图标跳动的jsjs代码: setTimeout("jump()",5); var t= ...

随机推荐

  1. update_engine-整体结构(一)

    update_engine简介 update_engine是A/B升级的核心逻辑.理解了update_engine就理解了在Android系统中A/B升级是如何运行的.它的代码放在源码目录下syste ...

  2. 蓝桥第八届省赛 javaB组承压计算

    X星球的高科技实验室中整齐地堆放着某批珍贵金属原料. 每块金属原料的外形.尺寸完全一致,但重量不同.金属材料被严格地堆放成金字塔形. 7 5 8 7 8 8 9 2 7 2 8 1 4 9 1 8 1 ...

  3. C# .NET 实体类转Dictionary

    -- System.Reflection.PropertyInfo[] cfgItemProperties = cfgItem.GetType().GetProperties(System.Refle ...

  4. Android USB ADB ATUH 验证包验证流程

    #define ADB_AUTH_TOKEN 1 #define ADB_AUTH_SIGNATURE 2 #define ADB_AUTH_RSAPUBLICKEY 3   1. 连接USB,手机发 ...

  5. HTML 部分非常用标签

    标签 描述 示例 <!DOCTYPE>  定义文档类型. HTML5 : <!DOCTYPE html> HTML4.* :<!DOCTYPE HTML PUBLIC & ...

  6. innodb使用大字段text，blob的一些优化建议(转)

    原文 https://yq.aliyun.com/articles/9072 最近看到一些老应用,在表结构的设计上使用了text或者blob的字段:其中一个应用,对blob字段的依赖非常的严重,查询和 ...

  7. js中的数据类型、以及浅拷贝和深拷贝

    一.js中的数据类型 1.基本类型(值类型):Undefined.Boolean.String.Number.Symbol 2.引用类型:函数.数组.对象.null.new Number(10)都是对 ...

  8. .net core2.2

    GetCurrentDirectory returns the worker directory of the process started by IIS rather than the app's ...

  9. sql server top 10 IO性能查询

    use master go ), ((case qs.statement_end_offset then datalength(qt.text) else qs.statement_end_offse ...

  10. memory_profiler的使用

    作用:memory_profiler是用来分析每行代码的内存使用情况 使用方法一: 1.在函数前添加 @profile 2.运行方式: python -m memory_profiler memory ...