div+css实现活塞驱动动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现活塞驱动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap"); *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { font-family: "Permanent Marker", cursive; background-color: var(--backgroundColor, #333); color: #fff; min-height: 100vh; display: grid; grid-template-columns: repeat(11, 1fr); place-items: center; font-size: 24px; perspective: 720px; overflow: hidden; } body *:not(:empty) { transform-style: preserve-3d; } input[type=checkbox] { position: fixed; display: none; } input[type=checkbox]#animate:checked ~ .scene { --animationPlayState: running; --animationOn: 1; } input[type=checkbox]#threeD:checked ~ .scene { --3d: 1; --mbm: none; --backgroundColor: #444; } input[type=checkbox]#threeD:checked ~ .backgroundColor { --backgroundColor: #444; } .backgroundColor { position: fixed; inset: 0; background-color: var(--backgroundColor, #333); } .scene { position: absolute; transform: rotateX(calc(var(--3d, 0) * (30deg - 60deg * var(--y, 0)))) rotateY(calc(var(--3d, 0) * (100deg * var(--x, 0) - 50deg))) translateZ(-3em); transition: transform 1s ease-out; } .back { position: absolute; inset: -50em; background-color: var(--backgroundColor, #333); background-image: radial-gradient(transparent 25em, var(--backgroundColor, #333) 50em), repeating-linear-gradient(90deg, #fff1 0 2px, #fff0 0 2em), repeating-linear-gradient(#fff1 0 2px, #fff0 0 2em); transition: background-color 0.5s; } h1 { position: absolute; inset-inline: -.........完整代码请登录后点击上方下载按钮下载查看
网友评论0