Skip to main content
 首页 » 学习笔记 » html5/css3

模仿W3Cfuns点赞效果

2016年05月24日3206
<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>W3CFunsLike</title>
    
  <style>
    @font-face{font-family:'Glyphicons Halflings';src:url(http://cdn.res.w3cfuns.com/fonts/icons/glyphicons-halflings-regular.eot);src:url(http://cdn.res.w3cfuns.com/fonts/icons/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(http://cdn.res.w3cfuns.com/fonts/icons/glyphicons-halflings-regular.woff2) format('woff2'),url(http://cdn.res.w3cfuns.com/fonts/icons/glyphicons-halflings-regular.woff) format('woff'),url(http://cdn.res.w3cfuns.com/fonts/icons/glyphicons-halflings-regular.ttf) format('truetype'),url(http://cdn.res.w3cfuns.com/fonts/icons/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')}
    @font-face{font-family:W3CfunsIcons;src:url(http://cdn.res.w3cfuns.com/fonts/icons/W3CfunsIcons.eot?d6frwe);src:url(http://cdn.res.w3cfuns.com/fonts/icons/W3CfunsIcons.eot?d6frwe#iefix) format('embedded-opentype'),url(http://cdn.res.w3cfuns.com/fonts/icons/W3CfunsIcons.ttf?d6frwe) format('truetype'),url(http://cdn.res.w3cfuns.com/fonts/icons/W3CfunsIcons.woff?d6frwe) format('woff'),url(http://cdn.res.w3cfuns.com/fonts/icons/W3CfunsIcons.svg?d6frwe#W3CfunsIcons) format('svg');font-weight:400;font-style:normal}
    [class^="icon-"], [class*=" icon-"] {
    font-family: 'W3CfunsIcons';}
    .icon-awesome-thumbs-up:before{content:"\f164"}
    #win_state{
        
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        width: 300px;
        height: 300px;
        margin: auto;
        text-shadow: 0px 0px 10px rgb(187, 187, 187);
        text-align: center;
        font-size: 300px;
        color: rgb(0, 187, 0);
        -webkit-animation: win_state 2.5s ease 0s;
        -moz-animation: win_state 2.5s ease 0s;
        -o-animation: win_state 2.5s ease 0s;
        -ms-animation: win_state 2.5s ease 0s;
        animation: win_state 2.5s ease 0s;
        
    }
    #win_state>span{
        position: absolute;
        top: 0;
        left: 0;
        line-height: 370px;
        font-size: 70px;
        text-indent: 150px;
        color: #FFF;
        
    }
    @keyframes win_state{
        0%{
            -webkit-transform: scale(.1);
            -moz-transform: scale(.1);
            -o-transform: scale(.1);
            -ms-transform: scale(.1);
            transform: scale(.1);
            opacity: 0;
        }
        25%{
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -o-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }
        85%{
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -o-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }
        100%{
            -webkit-transform: scale(7);
            -moz-transform: scale(7);
            -o-transform: scale(7);
            -ms-transform: scale(7);
            transform: scale(7);
            opacity: 0;
        }
    }
  </style>
 </head>
 <body>
  <div id="win_state"><span >赞</span></div>
 </body>
</html>
微信