A nifty dynamic indicator effect
An animation indicating effect with transition background effect implemented using css and js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" 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 class="button"> <div class="compass"></div> <div class="msg">Look here!</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>
.