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;
    font-size: 0;
    background: var(--color);
    transform: translateZ(calc(cos(var(--deg)) * 50px)) scale(sin(var(--deg)));
}
.face:nth-child(odd) {
    background: white;
}
.face:last-child {
    --n: -1;
    filter: drop-shadow(0 0 10px var(--color));
    transform: translateZ(calc(cos(var(--deg)) * 50px)) scale(sin(var(--deg)))
        scale(0.4);
}

/* sensor */
ol {
    --r: 50%;
    position: relative;
    width: 100vmax;
    aspect-ratio: 1;
    outline: 1px solid;
}

li {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    --x: calc(50% + sin(var(--partial)) * var(--r));
    --y: calc(50% - cos(var(--partial)) * var(--r));
    clip-path: polygon(50% 50%, 50% 0%, var(--x) var(--y));
    transform: rotate(calc(var(--partial) * (var(--n) - 0.5)));
}

li li {
    --size: calc(50% - 12.5% * var(--n));
    clip-path: circle(var(--size));
    background: rgba(0 0 255 / 0.2);
    background: unset;
    transform: unset;
}


/* counter */
li:nth-child(1)  { --n:  0; }
li:nth-child(2)  { --n:  1; }
li:nth-child(3)  { --n:  2; }
li:nth-child(4)  { --n:  3; }
li:nth-child(5)  { --n:  4; }
li:nth-child(6)  { --n:  5; }
li:nth-child(7)  { --n:  6; }
li:nth-child(8)  { --n:  7; }
li:nth-child(9)  { --n:  8; }
li:nth-child(10) { --n:  9; }
li:nth-child(11) { --n: 10; }
li:nth-child(12) { --n: 11; }

:root:has(ol > li:nth-child(1):hover)  { --i:  0; }
:root:has(ol > li:nth-child(2):hover)  { --i:  1; }
:root:has(ol > li:nth-child(3):hover)  { --i:  2; }
:root:has(ol > li:nth-child(4):hover)  { --i:  3; }
:root:has(ol > li:nth-child(5):hover)  { --i:  4; }
:root:has(ol > li:nth-child(6):hover)  { --i:  5; }
:root:has(ol > li:nth-child(7):hover)  { --i:  6; }
:root:has(ol > li:nth-child(8):hover)  { --i:  7; }
:root:has(ol > li:nth-child(9):hover)  { --i:  8; }
:root:has(ol > li:nth-child(10):hover) { --i:  9; }
:root:has(ol > li:nth-child(11):hover) { --i: 10; }
:root:has(ol > li:nth-child(12):hover) { --i: 11; }

:root:has(ul > li:nth-child(1):hover)  { --j:  0; }
:root:has(ul > li:nth-child(2):hover)  { --j:  1; }
:root:has(ul > li:nth-child(3):hover)  { --j:  2; }
:root:has(ul > li:nth-child(4):hover)  { --j:  3; }

@keyframes look-around {
    0% {
        --i: 10;
        --j: 0;
    }
    25% {
        --i: 5;
        --j: 1;
    }
    50% {
 .........完整代码请登录后点击上方下载按钮下载查看