css3动画，点击圆形背景扩展整个页面效果

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

巴特西

css3动画，点击圆形背景扩展整个页面效果

最新文章

热门文章