闲来无事看到点赞效果还不错 就来模仿看看 - - 还好 w3c 有 CDN 不然要自己去找图标 直接引用之~~~~
话说之前要看清颜色什么的很累人啊 截图拿颜色
OK 接下来就是特效了
从没有到正常大小 停顿 1S 最后瞬间爆炸
看出来 w3c 的 CSSer 很不错 很多代码复用等等 ~~~~
我就不做按钮了
最近在看老姚的笔记 打个广告 老姚的笔记 还是相当不错的~~~~
html 代码
- <!doctype html>
- <html lang="en">
- <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 class="icon-awesome-thumbs-up" id="win_state"><span > 赞 </span></div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/21736/974916de12dc6974fe5177de7ddc9300.html