效果图:
注:在html上引入你需要展示的图片
html代码如下:
<ul>
<li><img src="myself.jpg"></li>
<li><img src="cooler.jpg"></li>
<li><img src="yoghurt.jpg"></li>
<li><img src="blue_color.jpg"> </li>
<li><img src="cone.jpg"></li>
<li><img src="strawberry.jpg"> </li>
<li><img src="beverage.jpg"></li>
</ul>
<div><a href="index.html">返回主页</a></div>
注:在css上
你的背景可以是图片或者是自己选择一个背景色
body {
/* background-image: url(7.jpg); */
background: rgb(207, 238, 223);
}
css代码如下:
<style type="text/css">
body {
/* background-image: url(7.jpg); */
background: rgb(207, 238, 223);
}
* {
padding: 0;
margin: 0;
}
img {
border: 0;
width: 250px;
height: 250px;
}
li {
list-style: none;
}
ul {
width: 200px;
height: 200px;
margin: 200px auto;
position: relative;
-webkit-transform-style: preserve-3d;
}
li {
width: 200px;
height: 200px;
position: absolute;
text-align: center;
line-height: 200px;
font-size: 80px;
font-weight: bold;
color: #fff;
}
li:nth-child(1) {
-webkit-transform: rotateX(90deg) translateZ(200px);
}
li:nth-child(2) {
-webkit-transform: rotateX(270deg) translateZ(200px);
}
li:nth-child(3) {
-webkit-transform: rotateY(90deg) translateZ(200px);
}
li:nth-child(4) {
-webkit-transform: rotateY(270deg) translateZ(200px);
}
li:nth-child(5) {
-webkit-transform: translateZ(-200px);
}
li:nth-child(6) {
-webkit-transform: translateZ(200px);
}
ul {
-webkit-animation: run 5s linear infinite;
}
@-webkit-keyframes run {
0% {
-webkit-transform: rotateX(0deg) rotateY(0deg)
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg)
}
}
@-moz-keyframes run {
0% {
-webkit-transform: rotateX(0deg) rotateY(0deg)
}
100% {
-webkit-transform: rotateX(360deg) rotateY(360deg)
}
}
a {
text-decoration: none;
color: coral;
float: right
}
a:hover {
color: red;
}
</style>