HBuilder-旋转图片动画效果（简易）

妮可珍郝坎

于 2023-03-02 12:52:32 发布

阅读量936

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/nikezhenhaokan/article/details/129298658

版权

需自备三张图片，依次命名为a1.jpg a2.jpg a3.jpg

代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>旋转图片</title>
  <style type="text/css">
  *{  margin:0px;
      padding:0px;
      transition:all 1s;  }
  body{   background:blanchedalmond;  }

  .main{width:700px;
        height:400px;
        margin:100px auto; 
	   }  
  .box {width:200px;
        height:200px;
        border:5px solid #fff;
        box-shadow:0 0 10px #000;
        float:left;
        margin:5px;
        cursor:pointer;
        overflow:hidden;  
		}
 .rotate img{width:200px;
             height:200px;
			}
  .cap{  width:170px;
         height:170px;
         background:springgreen;
         color:palevioletred;
         padding:15px;
         line-height:140%;
         font-size:12px;
         -webkit-transform:rotate(900deg);  }
  .cap p{   font-size:14px;  }
  .rotate{  width:200px;
            height:400px;     }
  .box:hover .rotate{ transform:rotate(900deg);
   -webkit-transform:rotate(900deg);  }
 </style>
 </head>
 <body>
  <div class="main">
	   <div class="box">
		<div class="rotate">
		 <img src="img/a3.jpg"/>
			 <div class="cap">
			  <h3>绘画</h3>
			  <p>在技术层面上，是一个以表面作为支撑面，再在其之上加上颜色的做法，那些表面可以是纸张或布，加颜色的工具可以通过画笔，也可以通过刷子、海绵或是布条等，也可以运用软件进行绘画。</p>
			 </div>
		</div>
	  </div>
	  <div class="box">
		<div class="rotate">
		 <img src="img/a2.jpg"/>
			 <div class="cap">
			  <h3>临摹</h3>
			  <p>临摹是指按照原作仿制书法和绘画作品的过程。临，是照着原作写或画；摹，是用薄纸（绢）蒙在原作上面写或画。广义的临摹，所仿制的不一定是字画，也可能是碑、帖等。</p>
			 </div>
		</div>
	  </div>
	  <div class="box">
		<div class="rotate">
		 <img src="img/a1.jpg"/>
			 <div class="cap">
			  <h3>素描</h3>
			  <p>素描使用相对单一的色彩，借助明度变化来表现对象的绘画方式。素描的绘画工具多种多样，并不局限于某一工具。速写是一种相对快速的素描形式。素描水平是反映绘画者绘画基础水平和基本造型能力的重要指标之一。</p>
			 </div>
		</div>
	  </div>
  </div>
 </body>
</html>

效果如下：