模仿W3Cfuns 点赞效果 by 前端开发者 · Published 2018年5月4日10:36:04 · Updated 2018年5月8日00:43:14 摘要：网站前端开发_前端开发者丨web前端 https://www.rokub.com html 代码 <!doctype html><br /> <html lang=”en”><br /> <head><br /> <meta charset=”…… 网站前端开发_前端开发者丨web前端 https://www.rokub.com html 代码 <!doctype <span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html">html</a></span>><br /><br /> <<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html">html</a></span> lang=”en”><br /><br /> <head><br /><br /> <meta charset=”UTF-8″><br /><br /> <meta name=”Generator” content=”EditPlus®”><br /><br /> <meta name=”Author” content=””><br /><br /> <meta name=”Keywords” content=””><br /><br /> <meta name=”Description” content=””><br /><br /> <title>W3CFunsLike</title></p><br /> <p> <style><br /><br /> @font-face{font-family:’Glyphicons Halflings’;src:url(https://cdn.res.w3cfuns.com/fonts/icons/glyphicons-halflings-regular.eot);src:url(https://cdn.res.w3cfuns.com/fonts/icons/glyphicons-halflings-regular.eot?#iefix) format(’embedded-opentype’),url(https://cdn.res.w3cfuns.com/fonts/icons/glyphicons-halflings-regular.woff2) format(‘woff2’),url(https://cdn.res.w3cfuns.com/fonts/icons/glyphicons-halflings-regular.woff) format(‘woff’),url(https://cdn.res.w3cfuns.com/fonts/icons/glyphicons-halflings-regular.ttf) format(‘truetype’),url(https://cdn.res.w3cfuns.com/fonts/icons/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format(‘svg’)}<br /><br /> @font-face{font-family:W3CfunsIcons;src:url(https://cdn.res.w3cfuns.com/fonts/icons/W3CfunsIcons.eot?d6frwe);src:url(https://cdn.res.w3cfuns.com/fonts/icons/W3CfunsIcons.eot?d6frwe#iefix) format(’embedded-opentype’),url(https://cdn.res.w3cfuns.com/fonts/icons/W3CfunsIcons.ttf?d6frwe) format(‘truetype’),url(https://cdn.res.w3cfuns.com/fonts/icons/W3CfunsIcons.woff?d6frwe) format(‘woff’),url(https://cdn.res.w3cfuns.com/fonts/icons/W3CfunsIcons.svg?d6frwe#W3CfunsIcons) format(‘svg’);font-weight:400;font-style:normal}<br /><br /> [class^=”icon-“], [class*=” icon-“] {<br /><br /> font-family: ‘W3CfunsIcons’;}<br /><br /> .icon-awesome-thumbs-up:before{content:”\f164″}<br /><br /> #win_state{</p><br /> <p> position: absolute;<br /><br /> top: 0;<br /><br /> left: 0;<br /><br /> right: 0;<br /><br /> bottom: 0;<br /><br /> opacity: 0;<br /><br /> width: 300px;<br /><br /> height: 300px;<br /><br /> margin: auto;<br /><br /> text-shadow: 0px 0px 10px rgb(187, 187, 187);<br /><br /> text-align: center;<br /><br /> font-size: 300px;<br /><br /> color: rgb(0, 187, 0);<br /><br /> -webkit-animation: win_state 2.5s ease 0s;<br /><br /> -moz-animation: win_state 2.5s ease 0s;<br /><br /> -o-animation: win_state 2.5s ease 0s;<br /><br /> -ms-animation: win_state 2.5s ease 0s;<br /><br /> animation: win_state 2.5s ease 0s;</p><br /> <p> }<br /><br /> #win_state>span{<br /><br /> position: absolute;<br /><br /> top: 0;<br /><br /> left: 0;<br /><br /> line-height: 370px;<br /><br /> font-size: 70px;<br /><br /> text-indent: 150px;<br /><br /> color: #FFF;</p><br /> <p> }<br /><br /> @keyframes win_state{<br /><br /> 0%{<br /><br /> -webkit-transform: scale(.1);<br /><br /> -moz-transform: scale(.1);<br /><br /> -o-transform: scale(.1);<br /><br /> -ms-transform: scale(.1);<br /><br /> transform: scale(.1);<br /><br /> opacity: 0;<br /><br /> }<br /><br /> 25%{<br /><br /> -webkit-transform: scale(1);<br /><br /> -moz-transform: scale(1);<br /><br /> -o-transform: scale(1);<br /><br /> -ms-transform: scale(1);<br /><br /> transform: scale(1);<br /><br /> opacity: 1;<br /><br /> }<br /><br /> 85%{<br /><br /> -webkit-transform: scale(1);<br /><br /> -moz-transform: scale(1);<br /><br /> -o-transform: scale(1);<br /><br /> -ms-transform: scale(1);<br /><br /> transform: scale(1);<br /><br /> opacity: 1;<br /><br /> }<br /><br /> 100%{<br /><br /> -webkit-transform: scale(7);<br /><br /> -moz-transform: scale(7);<br /><br /> -o-transform: scale(7);<br /><br /> -ms-transform: scale(7);<br /><br /> transform: scale(7);<br /><br /> opacity: 0;<br /><br /> }</p><br /> <p> }</p><br /> <p> </style><br /><br /> </head><br /><br /> <body><br /><br /> <div class=”icon-awesome-thumbs-up” id=”win_state”><span >赞</span></div><br /><br /> </body><br /><br /> </<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html">html</a></span>> Share
0 整理前端面试题|网站前端开发_前端开发者 2018年5月4日22:11:16 by 前端开发者 · Published 2018年5月4日22:11:16 · Last modified 2018年5月8日00:43:13
0 前端开发javascript逻辑飞机大战 改良版 2018年5月12日20:30:20 by 前端开发者 · Published 2018年5月12日20:30:20 · Last modified 2018年5月12日20:52:28
0 IE9中line-height不能垂直居中问题并mac细黑字体被宋体替换问题的解决|网站前端开发_前端开发者 2018年5月3日21:03:01 by 前端开发者 · Published 2018年5月3日21:03:01 · Last modified 2018年5月21日17:51:44
近期评论