首页 > 其他分享 >不一样的纯H5C3动画爱心

不一样的纯H5C3动画爱心

时间:2022-11-13 17:22:27浏览次数:40  
标签:动画 top move height 爱心 animation background line H5C3

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

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

<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>

  看成品

  

  

 

标签:动画,top,move,height,爱心,animation,background,line,H5C3
From: https://www.cnblogs.com/dengsir39/p/16886352.html

相关文章

  • 李峋的爱心代码[转载]
    1<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">2<HTML>3<HEAD>4<TITLE>❤......
  • vuejs实现很多照片组成爱心样式
    vuejs实现很多照片组成爱心样式链接:https://pan.baidu.com/s/1GrnFwY0Kotz3-2dT9X8oTA?pwd=0011提取码:0011 ......
  • 【Android动画九章】-浮动菜单
    上几节讨论了各种各样的属性动画,这里将这些知识组合起来,模拟如下图所示的浮动菜单功能。1.activity_main.xml:<?xmlversion="1.0"encoding="utf-8"?><FrameLayoutxmlns......
  • 【Android动画九章】-属性动画集
    上一节通过ObjectAnimator类见识了什么是Android属性动画,不过都是单一的动画,下面通过例子学习一下组合动画也就是动画集是如何实现的,主要可以通过几种方式来实现,下面一一介......
  • 【Android动画九章】-LayoutAnimationController
    publicclassLayoutAnimationControllerextendsObjectjava.lang.Object↳android.view.animation.LayoutAnimationController可以看出LayoutAnimationControlle......
  • 3D银河系例子动画js特效
    3D银河系例子动画js特效安装好nodejs就可以运行了。三个文件,全部源代码。链接:https://pan.baidu.com/s/1LjXFDZ9ocKL6ArZb9QWWtg?pwd=0011提取码:0011 ......
  • JQuery animate 动画研究汇总
    jquery.color.js要放在juqery-1.8.3.js这个核心库的下面:.aspx代码如下:<%@PageTitle=""Language="C#"MasterPageFile="~/SAMPLE_CODE/AMST_SAMPLE.master"AutoEventWire......
  • intent跳转时添加动画效果实例
    系统默认的intent跳转效果非常生硬,丑陋,影响用户体验,怎么添加跳转动画呢?首先新建两个动画文件:zoomin.xml:<?xmlversion="1.0"encoding="utf-8"?><setxmlns:android="htt......
  • SVG动画之AnimatedVectorDrawable学习以及使用
    LZ-Says:伙计,一路走来,走散了一些人,留下了最真的人,切勿悲伤,切勿心寒。抬起头,微笑继续向前行~前言上一篇,我们了解了SVG以及静态Vector图像使用,坐标地址如下:​​AndroidStudy......
  • iOS开发_UITableViewCell动画
    -(void)tableView:(UITableView*)tableViewwillDisplayCell:(UITableViewCell*)cellforRowAtIndexPath:(NSIndexPath*)indexPath{cell.transform=CGA......