上次做項目的時候，要求點擊鏈接，這個鏈接的圓形背景擴散充滿整個頁面，今天把這個效果整理一下，是簡單的css3的動畫特效，粘貼下面的代碼看效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>自己測試寫博客的01</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="format-detection" content="telephone=no, address=no"> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script> <style type="text/css"> .box1{height: 200px;background: #eee;} .box2{background: #ffc658;width: 100px;height: 100px;border-radius: 50%;margin:40px 0 0 100px;;line-height: 100px;text-align: center;color: #fff;font-size: 20px; cursor: pointer;transition: all 0.5s ease-in-out;} .box3{position: relative;transform: scale(30);z-index: 2;opacity: 0.6;} </style> </head> <body> <div class="box1"></div> <div class="box2">點我</div> <script type="text/javascript"> $(document).ready(function(){ $(".box2").click(function(){ $(this).addClass("box3").text(""); setTimeout('window.location.href="https://www.baidu.com/"',500); }); }); </script> </body> </html>