<!DOCTYPE html>
<html>
<head>
<title>筱白迩</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
/*font-family: 微软雅黑;*/
}
body{
background-color: black;
perspective: 800px;
}
@keyframes go{
0%{
transform: rotateX(45deg);
}
50%{
transform: rotateX(-45deg);
}
100%{
transform: rotateX(45deg);
}
}
.box{
width: 1000px;
height: 350px;
/*background-color: green;*/
margin: 165px auto;
border: 5px solid #666;
border-radius: 20px;
animation: go 5s infinite linear;
}
.box:hover{
animation-play-state: paused;
}
.box ul{
display: flex;
list-style: none;
height: 350px;
}
.box ul li{
width: 200px;
height: 300px;
/*background-color: green;*/
margin: auto;
transform-style: preserve-3d;
}
.box ul li img{
width: 200px;
height: 300px;
border: 2px solid #fff;
transition: 1s;
}
.box ul li .text{
width: 200px;
height: 300px;
background-color: black;
position: absolute;
transform: rotateY(-90deg);
margin-top: -304px;
transition: 1s;
}
.box ul li:hover .text{
transform: rotateY(0deg);
}
.box ul li:hover img{
transform: rotateY(90deg);
}
.box ul li .text h3{
color: #fff;
text-align: center;
font-size: 26px;
line-height: 80px;
}
.box ul li .text p{
color: #fff;
text-indent: 2em;
font-family: 微软雅黑;
line-height: 30px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="1.0.jpg">
<div class="text">
<h3>执笔天下</h3>
<p>
继承了兴复志向 任生死何妨（姜维）
那连环赤壁永不灭的火光（庞统）
奇谋在汉中征伐里 恩怨的流淌（法正）
亲情牵扯无言的彷徨 走马荐丞相（徐庶）
</p>
</div>
</li>
<li>
<img src="3.png">
<div class="text">
<h3>执笔红妆</h3>
<p>
一声烈弓惊响 不顾满头风霜（黄忠）
子午献策轻狂 南谷自溃亡（魏延）
夫人何必感伤 再起也辉煌（孟获）
定计攻心平南疆 挥泪军营旁（马谡）
</p>
</div>
</li>
<li>
<img src="3.jpg">
<div class="text">
<h3>执笔书画</h3>
<p>
我回首看那长坂坡百万刀枪
谁知龙胆内有多重的担当（赵云）
举目望 望不到割须弃袍的模样
虽是铁骑突围离西凉 此生必回乡（马超）
</p>
</div>
</li>
<li>
<img src="4.jpg">
<div class="text">
<h3>执笔花甲</h3>
<p>
我漂泊流浪 辗转在乱世的沙场
誓挽救战火中大汉的危亡（刘备）
数十年纷争怎忍见苍生的目光
抬头一叹只愿天下有 安乐的希望（刘禅）
</p>
</div>
</li>
</ul>
</div>
</body>
</html>
