css实现永远盯着鼠标方向的眼球效果代码-html代码-BFW代码库

css实现永远盯着鼠标方向的眼球效果代码

代码语言：html

所属分类：其他

代码描述：css实现永远盯着鼠标方向的眼球效果代码，无js代码，纯粹css+div实现。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
/* */
:root {
    --color: darkblue;
    /* sensor */
    --num: 12;
    --partial: calc(1turn / var(--num));
    --i: 0;
    --angle: calc(var(--partial) * var(--i));
    height: 100%;
    animation: 5s infinite look-around;
}

:root:hover {
    animation: unset;
}

body {
    height: 100%;
    display: grid;
    place-content: center;
    place-items: center;
    overflow: hidden;
}

body > * {
    grid-area: 1 / 1;
}

.viewport {
    perspective: 400px;
    border-radius: 50%;
    outline: 1px solid var(--color);
    pointer-events: none;
}

.box {
    width: 100px;
    aspect-ratio: 1;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateZ(calc(var(--angle) - 90deg))
        rotateY(calc(70deg - var(--j) * 15deg));
    transition: transform 200ms;
}
.face {
    --stop: 60deg;
    --offset: calc((180deg - var(--stop)) / var(--num));
    --deg: calc(var(--stop) + var(--offset) * var(--n));
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: inherit;
.........完整代码请登录后点击上方下载按钮下载查看