css实现立体白纸彩笔手写字鼠标悬浮三维旋转效果代码
代码语言:html
所属分类:悬停
代码描述:css实现立体白纸彩笔手写字鼠标悬浮三维旋转效果代码,识别放上去试试。
代码标签: css 立体 白纸 彩笔 手写字 鼠标 悬浮 三维 旋转
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Waiting+for+the+Sunrise&display=swap"); *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { font-family: "Waiting for the Sunrise", cursive; background-color: #111; min-height: 100vh; display: grid; place-items: center; perspective: 1800px; overflow: hidden; } body *:not(:empty) { transform-style: preserve-3d; } .cell { position: absolute; width: 5%; height: 100%; z-index: 2; } .cell:nth-child(1) { left: 0%; } .cell:nth-child(1):hover ~ .scene { --rz: 40deg; --rx: 45deg; } .cell:nth-child(2) { left: 5%; } .cell:nth-child(2):hover ~ .scene { --rz: 36deg; --rx: 45deg; } .cell:nth-child(3) { left: 10%; } .cell:nth-child(3):hover ~ .scene { --rz: 32deg; --rx: 45deg; } .cell:nth-child(4) { left: 15%; } .cell:nth-child(4):hover ~ .scene { --rz: 28deg; --rx: 45deg; } .cell:nth-child(5) { left: 20%; } .cell:nth-child(5):hover ~ .scene { --rz: 24deg; --rx: 45deg; } .cell:nth-child(6) { left: 25%; } .cell:nth-child(6):hover ~ .scene { --rz: 20deg; --rx: 45deg; } .cell:nth-child(7) { left: 30%; } .cell:nth-child(7):hover ~ .scene { --rz: 16deg; --rx: 45deg; } .cell:nth-child(8) { left: 35%; } .cell:nth-child(8):hover ~ .scene { --rz: 12deg; --rx: 45deg; } .cell:nth-child(9) { left: 40%; } .cell:nth-child(9):hover ~ .scene { --rz: 8deg; --rx: 45deg; } .cell:nth-child(10) { left: 45%; } .cell:nth-child(10):hover ~ .scene { --rz: 4deg; --rx: 45deg; } .cell:nth-child(11) { left: 50%; } .cell:nth-child(11):hover ~ .scene { --rz: 0deg; --rx: 45deg; } .cell:nth-child(12) { left: 55%; } .cell:nth-child(12):hover ~ .scene { --rz: -4deg; --rx: 45deg; } .cell:nth-child(13) { left: 60%; } .cell:nth-child(13):hover ~ .scene { --rz: -8deg; --rx: 45deg; } .cell:nth-child(14) { left: 65%; } .cell:nth-child(14):hover ~ .scene { --rz: -12deg; --rx: 45deg; } .cell:nth-child(15) { left: 70%; } .cell:nth-child(15):hover ~ .scene { --rz: -16deg; --rx: 45deg; } .cell:nth-child(16) { left: 75%; } .cell:nth-child(16):hover ~ .scene { --rz: -20deg; --rx: 45deg; } .cell:nth-child(17) { left: 80%; } .cell:nth-child(17):hover ~ .scene { --rz: -24deg; --rx: 45deg; } .cell:nth-child(18) { left: 85%; } .cell:nth-child(18):hover ~ .scene { --rz: -28deg; --rx: 45deg; } .cell:nth-child(19) { left: 90%; } .cell:nth-child(19):hover ~ .scene { --rz: -32deg; --rx: 45deg; } .cell:nth-child(20) { left: 95%; } .cell:nth-child(20):hover ~ .scene { --rz: -36deg; --rx: 45deg; } .scene { position: relative; transform: rotateX(var(--rx, 15deg)) rotateZ(var(--rz, 0deg)); transition: transform 0.25s ease-out; } .pencil { --woodColor: burlywood; position: absolute; left: 0; top: 0; background-color: #f0f7; width: 0; height: 15em; transform: translate(-50%, -50%); } .pencil > div { position: absolute; left: 0; top: 0; width: 1em; height: 100%; background-image: linear-gradient(90deg, #0002, 20%, #0000, 80%, #0002), radial-gradient(circle at center -0.5em, var(--woodColor) 1em, var(--inkColor) 0); transform: translateX(-50%) translateZ(1em) rotateY(var(--ry, 0deg)) translateZ(-0.86em); transform-style: preserve-3d; } .pencil > div:nth-child(1) { --ry: 0deg; } .pencil > div:nth-child(2) { --ry: 60deg; } .pencil > div:nth-child(3) { --ry: 120deg; } .pencil > div:nth-child(4) { --ry: 180deg; } .pencil > div:nth-child(5) { --ry: 240deg; } .pencil > div:nth-child(6) { --ry: 300deg; } .pencil > div::before { content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 0.86em; background-image: radial-gradient(circle at bottom, var(--inkColor) 40%, var(--woodColor) 40%, #000 400%); transform: rotateX(90deg); transform-origin: top; } .pencil > div::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3em; background-image: linear-gradient(90deg, #0002, 20%, #0000, 80%, #0002), radial-gradient(circle at bottom, var(--inkColor) 33%, var(--woodColor) 0); transform: rotateX(163.5deg); transform-origin: top; -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); } .pencil:nth-child(2) { --inkColor: dodgerblue; top: 11.5em; left: 10em; } .pencil:nth-child(3) { --inkColor: hotpink; top: 12em; left: 6em; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0