div+css实现立体上下折纸滚动幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:div+css实现立体上下折纸滚动幻灯片效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { font-family: system-ui, sans-serif; display: grid; place-content: center; margin: 0; min-height: 100vh; background-color: #FBF7F4; background-image: linear-gradient(#E2363650 1px, transparent 1px), linear-gradient(to right, #E2363650 1px, #FBF7F4 1px); background-size: 1em 1em; perspective: 3000em; perspective-origin: center; } div { transform-style: preserve-3d; box-sizing: border-box; } .back { position: relative; width: 10em; height: 10em; } .back:before { content: ""; position: absolute; width: 100%; height: 100%; top: -5.5ch; z-index: -1; background-image: linear-gradient(#0001 20%, #0005, #0001 80%); filter: blur(1ch); } .top, .btm { position: absolute; z-index: -1; width: 110%; height: 0.75em; left: -5%; background-color: #1f2020; border-radius: 100vmax; box-shadow: inset 3px 3px 0 #999, inset -3px -3px 0 #fffe, 0 0 2px 2px #0003; } .top { top: -3.9em; } .btm { top: 6.2em; } .cont { width: 10em; height: 3em; position: relative; } .ac { backface-visibility: hidden; position: absolute; width: 100%; height: 3em; top: 0; left: 0; display: grid; place-content: center; border: 1px solid #0003; border-radius: 0.35em; background-color: #F9F6EF; background-image: linear-gradient(90deg, #0000 20%, #fff, #0000 80%), linear-gradient(-135deg, #0000 80%, #1f202090 150%), radial-gradient(#fff 40%, #F9F6EF 80%, #EBEBE3); transform: rotatex(calc(var(--a) * 36deg)) translatez(5em); -webkit-user-select: none; -ms-user-select: none; user-select: none; font-weight: 900; color: #E2363680; text-shadow: 1px 1px 0 #eee, 0 0 0 #666; } .ac:before { position: absolute; content: ""; inset: 0; border-radius: inherit; background-image: linear-gradient(90deg, #0009, #000, #0009); translate: 0 3px -1px; } .cont { --s: 13s; --state: running; animation: rot-cont var(--s) linear infinite var(--state) forwards; } .cont:hover { --state: paused; } @keyframes rot-cont { 0% { transform: rotatex(0deg); } 100% { transform: rotatex(360deg); } } body { background-color: #ffaa00; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb100' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffb800' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-3.........完整代码请登录后点击上方下载按钮下载查看
网友评论0