首页手记 C3-简单实现一颗可以跳动的爱心哦~

C3-简单实现一颗可以跳动的爱心哦~

标签：

CSS3

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>myHeart</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .heart{
                position:absolute;
                left: 50%;
                top:50%;
                margin-left: -150px;
                margin-top: -135px;
                width: 300px;
                height:270px;
                background: transparent;
                /*box-shadow: 2px 2px 5px #000;*/
                filter:drop-shadow(0px 0px 20px rgb(255,20,20));
                animation: test 1s linear infinite;
            }
            .heart:before,
            .heart:after{
                content: "";
                position: absolute;
                left: 150px;
                width: 150px;
                height: 240px;
                background: rgb(255,0,0);
                border-radius: 150px 150px 0 0;
                transform:rotate(-45deg);
                transform-origin: 0 100%;
            }
            .heart:after{
                left: 0;
                transform:rotate(45deg);
                transform-origin: 100% 100%;
            }
            @keyframes test{
                0%{
                    transform: scale(0.8,0.8);
                    opacity: 1;
                }
                25%{
                    transform: scale(1,1);
                    opacity: 0.8;
                }
                100%{
                    transform: scale(0.8,0.8);
                    opacity: 1;
                }
            }
        </style>
    </head>
    <body>
        <div class="heart"></div>
    </body>
</html>

点击查看更多内容