箭頭跟隨鼠標轉

時間 2019-12-11

標籤箭頭跟隨鼠標简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <script type="text/javascript" src="./js/index.js"></script>
</head>
<body>
    <div></div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

div {
    height: 100px;
    width: 100px;
    background-color: #f00;
    clip-path: polygon(
        50% 0,
        40% 10%,
        45% 10%,
        45% 100%,
        55% 100%,
        55% 10%,
        60% 10%,
        50% 0%);
    position: fixed;
    left: 50%;
    margin-left: -50px;
    top: 100%;
    margin-top: -90px;
    transform: rotate(-45deg);
      transform-origin: 50% 100%;    
}

addEventListener('DOMContentLoaded', () => {
    var arrow = document.getElementsByTagName('div')[0];
    addEventListener('mousemove', function(e) {
        var pos = e.pageX / document.documentElement.clientWidth * 100;
        pos -= 50;
        pos = pos / 50 * 90 + 'deg';
        arrow.style.transform = `rotate(${pos})`;
    });
});

相關標籤/搜索