好看的图片展示效果
程序员文章站
2022-05-28 09:59:31
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.concat {
width: 160px;
height: 160px;
margin: 0 auto;
position: absolute;
color: #fff;
font-size: 18px;
animation: moveOne 6s linear infinite alternate;
transform-style: preserve-3d;
}
@keyframes moveOne {
0% {
transform: rotateX(0deg) rotateY(0deg);
right: 40%;
top: 5%;
}
100% {
transform: rotateX(90deg) rotateY(90deg);
right: 10%;
top: 30%;
}
}
.box1 {
width: 80px;
height: 80px;
position: absolute;
top: 50%;
left: 50%;
/* transform: translateX(-50%) translateY(-50%); */
transform-style: preserve-3d;
animation: moveTwo 3s linear infinite alternate;
}
/* 星期二 */
@keyframes moveTwo {
0% {
transform: translateX(-50%) translateY(-50%) rotateX(30deg) rotateY(30deg) rotate(30deg);
}
100% {
transform: translateX(-50%) translateY(-50%) rotateX(120deg) rotateY(120deg) rotate(120deg);
}
}
.box1>li {
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
position: absolute;
}
.box1>li:nth-child(1) {
background: pink;
transform: translateY(-40px) rotateX(90deg);
}
.box1>li:nth-child(2) {
background: blue;
transform: translateX(40px) rotateY(90deg);
}
.box1>li:nth-child(3) {
background: yellow;
transform: translateY(-40px) rotateX(-90deg);
}
.box1>li:nth-child(4) {
background: pink;
transform: translateX(-40px) rotateY(-90deg);
}
.box1>li:nth-child(5) {
background: blue;
transform: translateZ(-40px);
}
.box1>li:nth-child(6) {
background: pink;
transform: translateZ(40px);
}
.box2 {
width: 160px;
height: 160px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
transform-style: preserve-3d;
}
.box2>li {
width: 160px;
height: 160px;
line-height: 160px;
text-align: center;
position: absolute;
opacity: 0.7;
}
.box2>li:nth-child(1) {
background: pink;
transform: translateY(-80px) rotateX(90deg);
}
.box2>li:nth-child(2) {
background: blue;
transform: translateX(80px) rotateY(90deg);
}
.box2>li:nth-child(3) {
background: yellow;
transform: translateY(80px) rotateX(-90deg);
}
.box2>li:nth-child(4) {
background: pink;
transform: translateX(-80px) rotateY(-90deg);
}
.box2>li:nth-child(5) {
background: blue;
transform: translateZ(-80px);
}
.box2>li:nth-child(6) {
background: pink;
transform: translateZ(80px);
}
.concat:hover .box2>li:nth-child(1) {
background: pink;
transform: translateY(-120px) rotateX(90deg);
}
.concat:hover .box2>li:nth-child(2) {
background: blue;
transform: translateX(120px) rotateY(90deg);
}
.concat:hover .box2>li:nth-child(3) {
background: yellow;
transform: translateY(120px) rotateX(-90deg);
}
.concat:hover .box2>li:nth-child(4) {
background: pink;
transform: translateX(-120px) rotateY(-90deg);
}
.concat:hover .box2>li:nth-child(5) {
background: blue;
transform: translateZ(-120px);
}
.concat:hover .box2>li:nth-child(6) {
background: pink;
transform: translateZ(120px);
}
</style>
</head>
<body>
<div class="concat">
<ul class="box box1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul class="box box2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
</html>
把<li>里面的数字换成图片就可以了。
图片示例：
如有疑问或补充请提出来。
转载请附上链接，谢谢