带有过渡背景效果的动画指示

2018-02-27 11:08:12来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

一个漂亮的动态指示效果

使用css,js实现的一个带有过渡背景效果的动画指示效果

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta content="width=device-width, initial-scale=1">    <title></title>    <style>        html, body { height: 100%; }        body {            font-family: 'microsoft yahei',Arial,sans-serif;            margin: 0;            background: radial-gradient(#666, #222);        }        .button {            position: absolute;            left:50%; top:50%;            width:140px; height:140px;            margin:-70px 0 0 -70px;            cursor: pointer;        }        .compass {            position: absolute;            width:100%; height:100%;            background: #444;            border-radius: 0 50% 50% 50%;            border: 10px solid white;            box-shadow: 0 0 8px rgba(0,0,0,.2);            border-right-color: coral;            border-bottom-color: coral;            transition: border-radius .2s;            box-sizing: border-box;        }        .button:hover .compass {            border-radius: 50%;        }        .msg {            position: absolute;            width:100%; height:100%;            line-height: 140px;            text-align: center;            color: #fff;            font-size: 20px;            font-weight: 300;        }    </style></head><body><div >    <div ></div>    <div >看这里 !</div></div><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script>    $(document).on('mousemove', function(e) {        var x = e.pageX;        var y = e.pageY;        var w = $(this).width();        var h = $(this).height();        var angle = Math.atan2(y-(h/2), x-(w/2)) * (180/Math.PI);        var rotate = angle + (180-45);        $('.button .compass')                .css('-webkit-transform', 'rotate('+rotate+'deg)')                .css('-moz-transform', 'rotate('+rotate+'deg)')                .css('-ms-transform', 'rotate('+rotate+'deg)')                .css('-o-transform', 'rotate('+rotate+'deg)')                .css('transform', 'rotate('+rotate+'deg)');    });</script></body></html>

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台