div+css实现三维立体铅笔旋转动画效果代码-html代码-BFW代码库

div+css实现三维立体铅笔旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现三维立体铅笔旋转动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    body {
    width: 100vw; height: 100vh;
    margin: 0;
    overflow: hidden;
}

body * {
    position: absolute;
    transform-style: preserve-3d;
}
body *::before, body *::after {
    position: absolute;
    content: '';
}

.pen {
    --point-big-radius: 1.25vw;
    --point-small-radius: calc(var(--point-big-radius) / (2 * tan(180deg / 6)));
    
    --pen-big-radius: 8vw;
    --pen-small-radius: calc(var(--pen-big-radius) / (2 * tan(180deg / 6)));

    --point-angle: 35deg;
    --point-length: calc((var(--pen-small-radius) - var(--point-small-radius)) /  cos(90deg - var(--point-angle)));
    --point-height: calc(var(--point-length) * cos(var(--point-angle)));
    
    --pen-length: 18vw;
    --ring-height: 1vw;
    --metal-height: 4vw;
    --eraser-height: 4vw;
    
    top: 50%; left: 50%;
    width: calc(var(--point-big-radius) * 2);
    aspect-ratio: 1/1;
    transform: translate(-15vw, 15vw) rotateX(118deg) rotateY(38deg) rotateZ(-60deg);
    animation: penRotationAnimation 6s linear infinite;

    /* hexagon points */
    --point1-x: calc(var(--point-big-radius) + var(--point-big-radius) * sin(2 * 1 * 3.14 / 6));
    --point1-y: calc(var(--point-big-radius) + var(--point-big-radius) * cos(2 * 1 * 3.14 / 6));
    --point2-x: calc(var(--point-big-radius) + var(--point-big-radius) * sin(2 * 2 * 3.14 / 6));
    --point2-y: calc(var(--point-big-radius) + var(--point-big-radius) * cos(2 * 2 * 3.14 / 6));
    --point3-x: calc(var(--point-big-radius) + var(--point-big-radius) * sin(2 * 3 * 3.14 / 6));
    --point3-y: calc(var(--point-big-radius) + var(--point-big-radius) * cos(2 * 3 * 3.14 / 6));
    --point4-x: calc(var(--point-big-radius) + var(--point-big-radius) * sin(2 * 4 * 3.14 / 6));
    --point4-y: calc(var(--point-big-radius) + var(--point-big-radius) * cos(2 * 4 * 3.14 / 6));
    --point5-x: calc(var(--point-big-radius) + var(--point-big-radius) * sin(2 * 5 * 3.14 / 6));
    --point5-y: calc(var(--point-big-radius) + var(--point-big-radius) * cos(2 * 5 * 3.14 / 6));
    --point6-x: calc(var(--point-big-radius) + var(--point-big-radius) * sin(2 * 6 * 3.14 / 6));
    --point6-y: calc(var(--point-big-radius) + var(--point-big-radius) * cos(2 * 6 * 3.14 / 6));
}
@keyframes penRotationAnimation {
    to { transform: translate(-15vw, 15vw) rotateX(118deg) rotateY(38deg) rotateZ(calc(-60deg + 1turn)); }
}



/* PENCIL POINT */
.pen::before {
    width: 100%; height: 100%;
    background: #6f6e70;
    clip-path: polygon(var(--point1-x) var(--point1-.........完整代码请登录后点击上方下载按钮下载查看