最近抖音很火的让你会计算机的朋友给你做个爱心突然火了，我也不出意外的收到了朋友的邀请，自己做肯定太麻烦了于是乎百度第一步，惊呆了！网上全都是一个爱心，变着法的火焰爱心，换汤不换药，那我们肯定是要整点不一样的咯

　　首先要表达出我们的中心，是个爱心，其次是简单，再加点动画过渡大功告成！朋友后面跟我得瑟说别人的爱心都一样，还以为我们只能做一种爱心哈哈哈，虽然没有那个炫酷，但这是咱手工打造的“不撞衫”嘛

<html>

<head>

    <style>

        * {

            margin: 0;

            padding: 0;

            color: #FFF;

        }

        html,

        body {

            width: 100%;

            height: 100%;

        }

        body {

            background: linear-gradient(to top, #09203f 0%, #537895 100%);

        }

        .box {

            position: absolute;

            top: 200px;

            right: 0;

            left: 0;

            margin: auto;

            width: 300px;

            height: 300px;

        }

        h1 {

            text-align: center;

        }

        .heart {

            position: relative;

            font-size: 0;

            width: 138px;

            margin: 50px auto;

        }

        .heart>div {

            position: absolute;

            top: -5px;

            width: 10px;

            height: 10px;

            border-radius: 5px;

        }

        .h-line-4 {

            animation: h-line-move-4 3.8s infinite;

        }

        .h-line-3,

        .h-line-5 {

            animation: h-line-move-3 3.8s infinite;

        }

        .h-line-2,

        .h-line-6 {

            animation: h-line-move-2 3.8s infinite;

        }

        .h-line-1,

        .h-line-7 {

            animation: h-line-move-1 3.8s infinite;

        }

        .h-line-0,

        .h-line-8 {

            animation: h-line-move-0 3.8s infinite;

        }

        .h-line-0 {

            left: 0px;

            animation-delay: 0s;

            background-color: #3cba92;

            filter: hue-rotate(20deg);

        }

        .h-line-1 {

            left: 17px;

            animation-delay: 0.15s;

            background-color: #3cba92;

            filter: hue-rotate(40deg);

        }

        .h-line-2 {

            left: 34px;

            animation-delay: 0.3s;

            background-color: #3cba92;

            filter: hue-rotate(60deg);

        }

        .h-line-3 {

            left: 51px;

            animation-delay: 0.45s;

            background-color: #3cba92;

            filter: hue-rotate(80deg);

        }

        .h-line-4 {

            left: 68px;

            animation-delay: 0.6s;

            background-color: #3cba92;

            filter: hue-rotate(100deg);

        }

        .h-line-5 {

            left: 85px;

            animation-delay: 0.75s;

            background-color: #3cba92;

            filter: hue-rotate(120deg);

        }

        .h-line-6 {

            left: 102px;

            animation-delay: 0.9s;

            background-color: #3cba92;

            filter: hue-rotate(140deg);

        }

        .h-line-7 {

            left: 119px;

            animation-delay: 1.05s;

            background-color: #3cba92;

            filter: hue-rotate(160deg);

        }

        .h-line-8 {

            left: 136px;

            animation-delay: 1.2s;

            background-color: #3cba92;

            filter: hue-rotate(180deg);

        }

        @keyframes h-line-move-4 {

            0%,

            10%,

            90%,

            100% {

                height: 10px;

                top: -5px;

            }

            45%,

            55% {

                height: 94px;

                top: -23px;

            }

        }

        @keyframes h-line-move-3 {

            0%,

            10%,

            90%,

            100% {

                height: 10px;

                top: -5px;

            }

            45%,

            55% {

                height: 90px;

                top: -31px;

            }

        }

        @keyframes h-line-move-2 {

            0%,

            10%,

            90%,

            100% {

                height: 10px;

                top: -5px;

            }

            45%,

            55% {

                height: 80px;

                top: -37px;

            }

        }

        @keyframes h-line-move-1 {

            0%,

            10%,

            90%,

            100% {

                height: 10px;

                top: -5px;

            }

            45%,

            55% {

                height: 60px;

                top: -31px;

            }

        }

        @keyframes h-line-move-0 {

            0%,

            10%,

            90%,

            100% {

                height: 10px;

                top: -5px;

            }

            45%,

            55% {

                height: 30px;

                top: -15px;

            }

        }

    </style>

</head>

<body>

    <div class="box">

        <h1>为爱冲锋的勇士！<br />值得所有人尊重！</h1>

        <div class="heart">

            <div class="h-line-0"></div>

            <div class="h-line-1"></div>

            <div class="h-line-2"></div>

            <div class="h-line-3"></div>

            <div class="h-line-4"></div>

            <div class="h-line-5"></div>

            <div class="h-line-6"></div>

            <div class="h-line-7"></div>

            <div class="h-line-8"></div>

        </div>

    </div>

</body>

</html>

　　看成品

　　

　　

不一样的纯H5C3动画爱心的更多相关文章

  1. 8个超炫酷的纯CSS3动画及源码分享

    在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...

  2. 纯CSS3动画：一棵跳舞的树

    <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...

  3. 8个超震撼的HTML5和纯CSS3动画源码

    HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...

  4. 11个超震撼的HTML5和纯CSS3动画源码

    1.jQuery多功能手风琴个人信息菜单面板 这是一款基于jQuery的手风琴个人信息菜单面板,每一个菜单项展开后可以自定义布局,因此可以为每一个菜单项实现多功能.类似这样的多功能菜单还有jQuery ...

  5. H5C3动画

    1 渐变 /* 渐变:不同颜色之间的柔和过渡 线性渐变:沿着某条直线发生渐变效果 注意:渐变准备来说是一张背景图 语法:linear-gradient */ background-image: lin ...

  6. 【翻译】西川善司的「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密，后篇

    http://www.4gamer.net/games/216/G021678/20140714079/     连载第2回的本回,  Arc System Works开发的格斗游戏「GUILTY G ...

  7. 【翻译】西川善司「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密，前篇（2）

    Lighting和Shading(2)镜面反射的控制和模拟次级表面散射技术 http://www.4gamer.net/games/216/G021678/20140703095/index_2.ht ...

  8. 36纯 CSS 动画原理，在页面上表现日蚀现象

    原文地址:https://segmentfault.com/a/1190000015070543 感想: 动画,背景颜色 HTML code: <div class="sky" ...

  9. 5种漂亮的纯CSS3动画按钮特效

    这次我们要来分享一款很不错的CSS3按钮动画,这款CSS3按钮一共有5种动画方式,每一种都是鼠标滑过动画形式,虽然这些动画按钮不是十分华丽,但是小编觉得不像其他按钮那样很难扩展,我们可以修改CSS代码 ...

随机推荐

  1. 免杀手法-tcp套字节传递shellcode学习

    免杀手法-tcp套字节传递shellcode学习

  2. 「题解报告」Blocks

    P3503 Blocks 题解 原题传送门 思路 首先我们可以发现,若 \(a_l\) ~ \(a_r\) 的平均值大于等于 \(k\) ,则这个区间一定可以转化为都大于等于 \(k\) 的.我们就把 ...

  3. 第五十六篇：webpack的loader(四) -打包js中的高级语法

    好家伙, 1.打包处理js文件中的高级语法 webpack只能打包处理一部分高级的JavaScript 语法.对于那些webpack无法处理的高级js 语法,需要借 助于 babel-loader 进 ...

  4. 在OpenCloudOS 上安装.NET 6

    开源操作系统社区 OpenCloudOS 由腾讯与合作伙伴共同倡议发起,是完全中立.全面开放.安全稳定.高性能的操作系统及生态.OpenCloudOS 沉淀了多家厂商在软件和开源生态的优势,继承了腾讯 ...

  5. KingbaseES 数据库软件卸载

    关键字: KingbaseES.卸载   一.安装后检查 在安装完成后,可以通过以下几种方式进行安装正确性验证: 1. 查看安装日志,确认没有错误记录; 2. 查看开始菜单: 查看应用程序菜单中是否安 ...

  6. 【设计模式】Java设计模式 - 原型模式

    [设计模式]Java设计模式 - 原型模式 不断学习才是王道 继续踏上学习之路,学之分享笔记 总有一天我也能像各位大佬一样 原创作品,更多关注我CSDN: 一个有梦有戏的人 准备将博客园.CSDN一起 ...

  7. Web开发框架『express』的基本使用 —— { }

    基本 res.send([body]) 和 res.end([data] [, encoding]) 的区别 1.参数的区别: res.send([body]): body这个参数可以是[Buffer ...

  8. R语言-tidyr和dplyr

    一.安装和加载 1.安装并加载tidyr和dplyr包 install.packages("tidyr") library(tidyr) install.packages(&quo ...

  9. 云服务器 Centos7 部署 Elasticsearch 8.0 + Kibana 8.0 指南

    文章转载自:https://mp.weixin.qq.com/s/iPfh9Mkwxf5lieiqt6ltxQ 服务器是命令行模式登录,没法以浏览器方式访问.而官方推荐的快捷部署方式,在kibana ...

  10. 安装ceph (快速) 步骤三： Ceph 客户端

    大多数 Ceph 用户不会直接往 Ceph 存储集群里存储对象,他们通常会使用 Ceph 块设备. Ceph 文件系统.或 Ceph 对象存储这三大功能中的一个或多个. 前提条件 先完成存储集群快速入 ...