<!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>