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>
  • 相关阅读:
    UnxUtils让windows下的dos命令变为linux下的命令
    Python多线程&进程
    Web前端工程师-优秀简历汇总
    最详细的Vuex教程
    Vue2.0 探索之路——生命周期和钩子函数的一些理解
    理解 $nextTick 的作用
    使用git rebase合并多次commit
    vim 退出命令(保存、放弃保存)
    Vue获取DOM元素样式 && 样式更改
    Vue Router的配置
  • 原文地址:https://www.cnblogs.com/adialike/p/6401033.html
Copyright © 2011-2022 走看看