zoukankan      html  css  js  c++  java
  • 心跳动画

    这个心制作稍微有点难度,关键旋转后的对照
    <style type="text/css">
            .heart{
                200px;
                height: 180px;
                position: relative;
                animation: heartAnimation 2s infinite;
            }
            .heart::before,.heart::after{
                position: absolute;
                left: 100px;
                top: 0;
               
                100px;
                height: 160px;
                content: '';
                border-radius: 50px 50px 0 0;
                transform-origin: 0 100%;
                transform: rotate(-45deg);
            }
            .heart::after{
                transform: rotate(45deg);
                transform-origin: 100% 100%;
                left: 0;
            }
            @keyframes heartAnimation{
                0%{
                    transform: scale(.3);
                }
                20%{
                    transform: scale(.7);
                }
                40%{
                    transform: scale(.9);
                }
                50%{
                    transform: scale(1);
                }
                60%{
                    transform: scale(.9);
                }
                80%{
                    transform: scale(.7);
                }
                100%{
                    transform: scale(.3);
                }
            }
        </style>
    </head>
    <body>
        <div class="heart"></div>
    </body>
  • 相关阅读:
    4. Android框架和工具之 android-async-http
    3. Android框架和工具之 xUtils(BitmapUtils)
    自定义多列排序:C++/Java实现
    Java套接字
    Java泛型
    线程同步之生产者消费者
    面向对象之深复制与浅复制
    谈谈多线程
    递归与尾递归
    单例模式:Instance
  • 原文地址:https://www.cnblogs.com/adialike/p/6401033.html
Copyright © 2011-2022 走看看