上次做项目的时候，要求点击链接，这个链接的圆形背景扩散充满整个页面，今天把这个效果整理一下，是简单的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>
时间： 2024-11-16 15:31:26