js实现焦点图像随机排列效果代码
代码语言:html
所属分类:布局界面
代码描述:js实现焦点图像随机排列效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { height: 100vh; width: 100vw; display: grid; place-items: center; background-color: #fafafa; width: 100vw; overflow: hidden; } #stage { text-align: center; max-height: 100vh; height: 90vh; width: 100vw; font-size: 3vw; display: flex; max-width: 70vw; margin: 0 auto; max-height: 100vh; flex-direction: row; place-items: middle; align-items: center; } .img { border-radius: 50%; min-height: 2em; min-width: 2em; background-size: cover; background-position: 50% 50%; mix-blend-mode: multiply; animation: spotappear 1.5s cubic-bezier(0.9, 0.3, 0.2, 1) forwards; } .img:nth-child(2) { animation-delay: -0.5s; } .img:nth-child(3) { animation-delay: -0.75s; } .img:nth-child(4) { animation-delay: -0.25s; } @keyframes spotappear { 0% { transform: scale(1.5); opacity: 0; } } .img:before { content: ""; float: left; padding-top: 100%; /* initial ratio of 1:1*/ } .hide { position: absolute; z-index: -2; display: none; } </style> </head> <body> <div id="stage"> </div> <noscript>this entire demo is javascript</noscript> <script > var stage = document.querySelector("#stage"); // adding the blank duotone svg filter var total = Math.floor(Math.random() * 3) + 2; var lightColors = ["#ffe179", "#ffceeb", "#8dd7ff", "#8ee69c"]; var darkColors = [ "#552200", "#5d0000", "#003e4b", "#103164", "#ffb423", "#ff2e00", "#00bf63", "#4c94ff" ]; function drawImages() { function hexToRgb(hex) { // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; hex = hex.replace(shorthandRegex, function (m, r, g, b) { return r + r + g + g + b + b; }); var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; } for (i = 0; i < total; i++) { let randomLight = lightColors[Math.floor(Math.random() * lightColors.length)]; let randomDark = darkColors[Math.floor(Math.random() * darkColors.length)]; let rRed = .........完整代码请登录后点击上方下载按钮下载查看
网友评论0