css实现瀑布流图片滚动加入渐显动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现瀑布流图片滚动加入渐显动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* SDA Demo */ @keyframes appear { from { opacity: 0; scale: 0.8; } to { opacity: 1; scale: 1; } } @media (prefers-reduced-motion: no-preference) { img { animation: appear linear; animation-timeline: view(); animation-range: entry 25% cover 50%; } } /* ETC */ img { width: 100%; max-width: 300px; border-radius: 1rem; } li { list-style: none; } li:nth-child(even) { margin-top: 8rem; } li:nth-child(odd):not(:first-child) { margin-top: -4rem; } ul { padding: 0; display: grid; grid-template-columns: auto auto; gap: 0 1rem; justify-content: center; } </style> </head> <body translate="no"> <ul> <li><img src="https://source.unsplash.com/random/300x300/?fruit" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&1" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&2" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&3" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&4" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&5" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&6" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&7" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&8" alt=""></li> <li><img src="https://source.unsplash.com/random/300x300/?fruit&9".........完整代码请登录后点击上方下载按钮下载查看
网友评论0