css+js实现三维碎纸机碎纸动画效果代码
代码语言:html
所属分类:动画
代码描述:css+js实现三维碎纸机碎纸动画效果代码,点击绿色开关就会开始碎纸。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { font-size: 72vmin; } *, *::before, *::after { box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; perspective: 1em; overflow: hidden; background-image: radial-gradient(circle farthest-corner at 10% 20%, #61baff 0%, #a6effd 90%); } .shredder { transform-style: preserve-3d; transform: rotateX(-40deg) rotateY(0deg); } .shredder__side { position: absolute; width: 1em; height: 0.2em; border: 0.003em solid rgba(0, 0, 0, 0.01); transform-style: preserve-3d; } .shredder__top { transform-origin: 50% 100%; transform: translate(-50%, -0.2em) rotateX(90deg); background-image: linear-gradient(#999, #bbb); } .shredder__top::before { content: ""; position: absolute; top: 50%; left: 50%; width: 0.8em; height: 0.03em; background-image: linear-gradient(#555, #333); border: 0.002em solid rgba(0, 0, 0, 0.01); transform: translate(-50%, -50%); } .shredder__front { transform: translateX(-50%); background-image: linear-gradient(#bbb, #999); } .shredder__btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; top: 50%; left: 50%; width: 0.12rem; height: 0.12rem; font: inherit; font-weight: 700; color: rgba(0, 0, 0, 0.75); text-transform: uppercase; background-color: #298a29; border-radius: 20%; border: none; border-top: 0.005em solid rgba(0, 0, 0, 0.15); transform: translate(-50%, -50%); transition: box-shadow 200ms, border-width 150ms linear; cursor: pointer; } .shredder__btn::before { content: ""; position: absolute; left: 50%; width: 0.075em; height: 0.075em; border-radius: 50%; border: 0.01em solid rgba(0, 0, 0, 0.5); border-top-color: transparent; transform: translate(-50%, -50%); } .shredder__btn::after { content: ""; position: absolute; top: 0.02em; left: 50%; width: 0.01em; height: 0.04em; background-color: rgba(0, 0, 0, 0.5); transform: translateX(-50%); } .shred:not(.complete) .shredder__btn { border-width: 0.001em; box-shadow: 0 0 0.02em #19db19; background-image: radial-gradient(#19db19, #298a29); } .shredder__paper { display: flex; justify-content: center; align-items: center; position: absolute; left: 50%; height: 0.5em; width: 0.75em; overflow: hidden; transform-style: preserve-3d; } .shredder__paper p { font-family: Arial, sans-serif; font-size: 0.05em; font-weight: 900; line-height: 1.3; text-align: center; text-transform: uppercase; color: #111; overflow-wrap: anywhere; } .shredder__paper--input.........完整代码请登录后点击上方下载按钮下载查看
网友评论0