css+js实现图片网格动画显示效果代码
代码语言:html
所属分类:动画
代码描述:css+js实现图片网格动画显示效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Orbitron&family=Quicksand:wght@300&display=swap");
html,
body {
background-color: #121212;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 100%;
font-size: 16px;
font-weight: bold;
color: #aaa;
font-family: "Quicksand", serif;
}
@media (max-width: 800px) {
html,
body {
font-size: 13px;
}
}
@media (max-width: 650px) {
html,
body {
font-size: 10px;
}
}
.wrapper {
display: grid;
justify-content: center;
grid-template-columns: repeat(2, 1fr);
gap: 7rem 5rem;
margin: 5rem 0;
}
@media (max-width: 480px) {
.wrapper {
grid-template-columns: repeat(1, 1fr);
}
}
@media (min-width: 1300px) {
.wrapper {
grid-template-columns: repeat(3, 1fr);
}
}
.box {
--box-width: 20rem;
--box-height: 30rem;
--frag-width: calc(var(--box-width) / var(--col));
--frag-height: calc(var(--box-height) / var(--row));
--img-url: url("//repo.bfw.wiki/bfwrepo/image/6257e9f53b418.png");
display: flex;
justify-content: center;
flex-wrap: wrap;
width: var(--box-width);
height: var(--box-height);
position: relative;
}
.box::before {
conte.........完整代码请登录后点击上方下载按钮下载查看
网友评论0