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;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0