- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="utf-8">
- <style type="text/CSS">
- /* 初始化 reset*/ body,button,dd,dl,dt,form,h1,h2,h3,h4,h5,h6,hr,input,li,ol,p,td,textarea,th,ul{margin:0;padding:0;}
- body,button,input,select,textarea{font:14px/1.5 "Microsoft Yahei" ,\5b8b\4f53,sans-serif;}
- h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size:100%;} em,i{font-style:normal;}
- ol,ul{list-style:none;} a{text-decoration:none; color:#666666;} a:hover{text-decoration:none;
- color:#ffa000;} img,input{border:none;} img{ display:block;} textarea{resize:none;}
- a,input,button,select,textarea{outline:none;} a,button{cursor:pointer;}
- /* 清除浮动 */ .clearfix:before,.clearfix:after{display:table;content:"";}
- .clearfix:after{clear:both;} .clearfix{zoom:1;} .box{width: 100px;height:
- 100px;margin:100px auto;position: relative;border: 1px solid #ccc;} .reward,.big{font-size:
- 38px;color:green;display: block; position: absolute;top: 20px;left:30px;-webkit-transition:
- all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition:
- all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition:
- all .25s ease-in-out;} .box .big{position: fixed;top: 50%;left:50%;margin:-100px
- 0 0 -100px;font-size: 200px;animation: gogo 1.5s 1;display: none;opacity:0;}
- @keyframes gogo{ 0%{-webkit-transform: scale(1); -moz-transform: scale(1);
- -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);opacity:0.5;}
- 30%{-webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform:
- scale(1); -o-transform: scale(1); transform: scale(1);opacity:1;} 70%{-webkit-transform:
- scale(3); -moz-transform: scale(3); -ms-transform: scale(3); -o-transform:
- scale(3); transform: scale(3);opacity:1;} 100%{-webkit-transform: scale(1);
- -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1);
- transform: scale(1);opacity:0;} }
- </style>
- </head>
- <body>
- <div class="box">
- <i class="iconfont reward" id="icon">
- 赞
- </i>
- <i class="iconfont big" id="bigger">
- 赞
- </i>
- </div>
- </body>
- </HTML>
- <script type="text/javascript">
- var icon = document.getElementById('icon');
- var bigger = document.getElementById('bigger');
- icon.onclick = function(){
- bigger.style.display = 'block';
- }
- </script>
来源: http://www.qdfuns.com/article/20708/f8bc6921e0b504e9bb8638e532c1313c.html