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

最新推荐文章于 2024-07-10 14:03:37 发布

weixin_30546189

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量156

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/gracestyle/p/5671390.html

版权

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

转载于:https://www.cnblogs.com/gracestyle/p/5671390.html

weixin_30546189

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3动画，点击圆形背景扩展整个页面效果

上次做项目的时候，要求点击链接，这个链接的圆形背景扩散充满整个页面，今天把这个效果整理一下，是简单的css3的动画特效，粘贴下面的代码看效果<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type"...
复制链接

扫一扫