Animation

使用以下代码即可：

[[include :arma3:animation]]
[[module css]]
:root {
--body-image-1:第一张照片;
--body-image-2:第二张照片;
--body-image-3:第三张照片;
--body-image-4:第四张照片;
--body-image-height:照片高度;
}
[[/module]]

能干什么？

能点击图片把边边变成同样的颜色！

OPEN PASSWORD

CSS部分

[[module css]]
.flex-all {
display:flex;
}
:root {
--body-image-height:auto;
}
.img.image1 {
background-image:url(var(--body-image-1));
height:var(--body-image-height));
}
.img.image1:hover {
.flex-all {
background-image:url(var(--body-image-1));
height:var(--body-image-height));
}
}
.img.image2 {
background-image:url(var(--body-image-2));
height:var(--body-image-height));
}
.img.image2:hover {
.flex-all {
background-image:url(var(--body-image-2));
height:var(--body-image-height));
}
}
.img.image3 {
background-image:url(var(--body-image-3));
height:var(--body-image-height));
}
.img.image3:hover {
.flex-all {
background-image:url(var(--body-image-3));
height:var(--body-image-height));
}
}
.img.image4 {
background-image:url(var(--body-image-4));
height:var(--body-image-height));
}
.img.image4:hover {
.flex-all {
background-image:url(var(--body-image-4));
height:var(--body-image-height));
}
}
.img {
border:1px dotted white;
}
.header-body::before {
content:"=";
position:absolate;
top:0;
left:0;
}
[[/module]]

HTML部分

[[div class="flex-all"]]
[[div class="img image1"]]
 
[[/div]]
[[div class="img image2"]]
 
[[/div]]
[[div class="img image3"]]
 
[[/div]]
[[div class="img image4"]]
 
[[/div]]
[[/div]]