一颗跳动的心(css3)

认真你就输了丶
认真你就输了丶 发布于 2016-11-29 08:56:11 浏览:1562 类型:原创 - 随笔 分类:HTML/CSS - css 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>一颗跳动的心</title>
    <style type="text/css">
    *{
        margin:0 ;
        padding:0;
    }
    body{
        background:#1a1c24;
    }
    /* 盒子 */
    #heart,#echo{
        position:fixed;
        width: 300px;
        height: 300px;
        top: 100px;
        left: 250px;
        text-align: center;
        -webkit-transform: scale(0.95);
           -moz-transform: scale(0.95);
            -ms-transform: scale(0.95);
             -o-transform: scale(0.95);
                transform: scale(0.95);
    }
    #heart{ z-index:8; }
    #echo{ z-index:7; }
    /* 心 初始化 */
    #heart::before,#heart::after,#echo::before, #echo::after{
        content:"";
        position: absolute;
        top: 40px;
        width: 150px;
        height: 240px;
        background: #c66c75;
        border-radius: 150px 150px 0 0;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
                transform-origin: 0 100%;
    }
    #heart::before,#echo::before{
        left: 150px;
    }
    #heart::after,#echo::after{
        left:0;
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
    }
    /* 一些小样式 */
    #heart::after {
      box-shadow:
        inset -6px -6px 0px 6px rgba(255,255,255,0.1);
    }
    #heart::before {
      box-shadow:
        inset 6px 6px 0px 6px rgba(255,255,255,0.1);
    }
    #heart i::after{
        content:"认真你就输了丶";
        position: absolute;
        top:35%;
        left:15%;
        color: rgba(255,255,255,0.8);
        font-weight: 100;
        font-size: 30px;
        text-shadow: -1px -1px 0px rgba(0,0,0,0.2);
        z-index:10;
    }
    /* 心要动起来 */
    @keyframes heartbeat {
        0%   { transform: scale(0.95);}
        100% { transform: scale(0.95);}
        50%  { transform: scale(1.00);}

    }
    @-webkit-keyframes heartbeat {
        0%   { -webkit-transform: scale(0.95);}
        100% { -webkit-transform: scale(0.95);}
        50%  { -webkit-transform: scale(1.00);}
    }

    @keyframes echo {
        0%{
            opacity:0.1;
            transform: scale(1);
        }
        100%{
            opacity:0;
            transform: scale(1.4);
        }
    }
    @-webkit-keyframes echo {
       0%{
            opacity: 0.1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }
        100%{
            opacity: 0;
            -webkit-transform: scale(1.4);
            transform: scale(1.4);
        }
    }
    #heart, #echo{
        -webkit-animation-duration: 2000ms;
                animation-duration: 2000ms;
        -webkit-animation-timing-function:
                cubic-bezier(0, 0, 0, 1.74);
                animation-timing-function:
                cubic-bezier(0, 0, 0, 1.74);
        -webkit-animation-delay: 500ms;
                animation-delay: 500ms;
        -webkit-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
        -webkit-animation-play-state: running;
                animation-play-state: running;
    }
    #heart,#echo{
      -webkit-animation-name: heartbeat;
              animation-name: heartbeat;
    }
    #echo{
      -webkit-animation-name: echo;
              animation-name: echo;
    }
    </style>
</head>
<body>
    <div id="heart">
        <i></i>
    </div>
    <div id="echo">
    </div>
</body>
</html>
标签:
z
给个赞 9 人点赞
收藏 12 人收藏
评论 已有 7 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
Raman0716
Raman07162016-12-05 17:28:597F
emoticon展开代码
window.close();
举报 支持 (0) 回复 (0)
Scoripion
Scoripion2016-12-04 09:44:366F
哈哈 可以可以
举报 支持 (0) 回复 (0)
老姚
老姚2016-11-29 15:45:545F
没认真也输了 //@认真你就输了丶:姚哥,  你认真了。。哈哈emoticon //@老姚:原来是你的id,因为心代表爱情,我还以为。。 //@认真你就输了丶:我假装没听懂emoticon //@老姚:意味深长啊emoticon
举报 支持 (0) 回复 (0)
认真你就输了丶
认真你就输了丶2016-11-29 15:41:324F
姚哥,  你认真了。。哈哈emoticon //@老姚:原来是你的id,因为心代表爱情,我还以为。。 //@认真你就输了丶:我假装没听懂emoticon //@老姚:意味深长啊emoticon
举报 支持 (0) 回复 (1)
老姚
老姚2016-11-29 15:39:563F
原来是你的id,因为心代表爱情,我还以为。。 //@认真你就输了丶:我假装没听懂emoticon //@老姚:意味深长啊emoticon
举报 支持 (0) 回复 (1)
认真你就输了丶
认真你就输了丶2016-11-29 15:37:202F
我假装没听懂emoticon //@老姚:意味深长啊emoticon
举报 支持 (0) 回复 (1)
老姚
老姚2016-11-29 15:33:331F
意味深长啊emoticon
举报 支持 (0) 回复 (1)
认真你就输了丶 认真你就输了丶 作者

涸辙遗鲋,旦暮成枯;人而无志,与彼何殊.

作者最新