关灯
开启左侧

模仿W3Cfuns 点赞效果

[复制链接]
小川 发表于 2018-11-7 17:59:34 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="Generator" content="EditPlus®">
  6.   <meta name="Author" content="">
  7.   <meta name="Keywords" content="">
  8.   <meta name="Description" content="">
  9.   <title>W3CFunsLike</title>

  10.   <style>
  11.     @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')}
  12.     @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}
  13.     [class^="icon-"], [class*=" icon-"] {
  14.     font-family: 'W3CfunsIcons';}
  15.     .icon-awesome-thumbs-up:before{content:"\f164"}
  16.     #win_state{

  17.         position: absolute;
  18.         top: 0;
  19.         left: 0;
  20.         right: 0;
  21.         bottom: 0;
  22.         opacity: 0;
  23.         width: 300px;
  24.         height: 300px;
  25.         margin: auto;
  26.         text-shadow: 0px 0px 10px rgb(187, 187, 187);
  27.         text-align: center;
  28.         font-size: 300px;
  29.         color: rgb(0, 187, 0);
  30.         -webkit-animation: win_state 2.5s ease 0s;
  31.         -moz-animation: win_state 2.5s ease 0s;
  32.         -o-animation: win_state 2.5s ease 0s;
  33.         -ms-animation: win_state 2.5s ease 0s;
  34.         animation: win_state 2.5s ease 0s;

  35.     }
  36.     #win_state>span{
  37.         position: absolute;
  38.         top: 0;
  39.         left: 0;
  40.         line-height: 370px;
  41.         font-size: 70px;
  42.         text-indent: 150px;
  43.         color: #FFF;

  44.     }
  45.     @keyframes win_state{
  46.         0%{
  47.             -webkit-transform: scale(.1);
  48.             -moz-transform: scale(.1);
  49.             -o-transform: scale(.1);
  50.             -ms-transform: scale(.1);
  51.             transform: scale(.1);
  52.             opacity: 0;
  53.         }
  54.         25%{
  55.             -webkit-transform: scale(1);
  56.             -moz-transform: scale(1);
  57.             -o-transform: scale(1);
  58.             -ms-transform: scale(1);
  59.             transform: scale(1);
  60.             opacity: 1;
  61.         }
  62.         85%{
  63.             -webkit-transform: scale(1);
  64.             -moz-transform: scale(1);
  65.             -o-transform: scale(1);
  66.             -ms-transform: scale(1);
  67.             transform: scale(1);
  68.             opacity: 1;
  69.         }
  70.         100%{
  71.             -webkit-transform: scale(7);
  72.             -moz-transform: scale(7);
  73.             -o-transform: scale(7);
  74.             -ms-transform: scale(7);
  75.             transform: scale(7);
  76.             opacity: 0;
  77.         }

  78.     }

  79.   </style>
  80. </head>
  81. <body>
  82.   <div class="icon-awesome-thumbs-up" id="win_state"><span >赞</span></div>
  83. </body>
  84. </html>
复制代码


 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 最佳新人

    注册账号后积极发帖的会员

1关注

1粉丝

105帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )