css自适应鲜花堆积效果代码
代码语言:html
所属分类:响应式
代码描述:css自适应鲜花堆积效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Amatic+SC"); body { height: 100vh; overflow: hidden; background: #feae1c; perspective: 800px; } body div { transform-style: preserve-3d; } .m { color: white; position: absolute; z-index: 1; left: 0; font-family: "Amatic SC", cursive; text-align: center; top: 50%; transform: translateY(-50%); width: 200px; left: 0; right: 0; margin: auto; } .w { height: 100vh; position: absolute; transform: translateZ(calc((-150vw) - 1000px)); width: 100%; } .w .s { filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4)); background: url("//repo.bfw.wiki/bfwrepo/icon/6311635799511.png"); background-size: cover; background-position: center; width: 500px; height: 460px; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: auto; } .w .s:nth-of-type(1) { transform: translateY(-50%) translateZ(100px) rotate(100deg); opacity: 1; } .w .s:nth-of-type(2) { transform: translateY(-50%) translateZ(200px) rotate(200deg); opacity: 1; } .w .s:nth-of-type(3) { transform: translateY(-50%) translateZ(300px) rotate(300deg); opacity: 1; } .w .s:nth-of-type(4) { transform: translateY(-50%) translateZ(400px) rotate(400deg); opacity: 1; } .w .s:nth-of-type(5) { transform: translateY(-50%) translateZ(500px) rotate(500deg); opacity: 1; } .w .s:nth-of-type(6) { transform: translateY(-50%) translateZ(600px) rotate(600deg); opacity: 1; } .w .s:nth-of-type(7) { transform: translateY(-50%) translateZ(700px) rotate(700deg); opacity: 1; } .w .s:nth-of-type(8) { transform: translateY(-50%) translateZ(800px) rotate(800deg); opacity: 1; } .w .s:nth-of-type(9) { transform: translateY(-50%) translateZ(900px) rotate(900deg); opacity: 1; } .w .s:nth-of-type(10) { transform: translateY(-50%) translateZ(1000px) rotate(1000deg); opacity: 1; } .w .s:nth-of-type(11) { transform: translateY(-50%) translateZ(1100px) rotate(1100deg); opacity: 1; } .w .s:nth-of-type(12) { transform: translateY(-50%) translateZ(1200px) rotate(1200deg); opacity: 1; } .w .s:nth-of-type(13) { transform: translateY(-50%) translateZ(1300px) rotate(1300deg); opacity: 1; } .w .s:nth-of-type(14) { transform: translateY(-50%) translateZ(1400px) rotate(1400deg); opacity: 1; } .w .s:nth-of-type(15) { transform: translateY(-50%) translateZ(1500px) rotate(1500deg); opacity: 1; } .w .s:nth-of-type(16) { transform: translateY(-50%) translateZ(1600px) rotate(1600deg); opacity: 1; } .w .s:nth-of-type(17) { transform: translateY(-50%) translateZ(1700px) rotate(1700deg); opacity: 1; } .w .s:nth-of-type(18) { transform: translateY(-50%) translateZ(1800px) rotate(1800de.........完整代码请登录后点击上方下载按钮下载查看
网友评论0