[知了堂学习笔记]_css3特效第一篇--旋转的背景&翻书效果

一、html遮盖层与css3的旋转动画

 >效果图（加载可能会慢一点儿，请稍等...）：

>实现思路：在一个大的div中装入一个底层img和顶层的div（里面的内容按照以上图片呈现的样式布局），给底层图片设置样式让其成现出圆形图片的样式，通过绝对定位覆盖层的位置。给外层div添加鼠标悬浮的事件，当鼠标悬浮的时候让覆盖层的透明度改变，显示出底层的图片，同时让底层图片执行旋转动画。具体实现见以下代码。

>html代码：

 <div class="instruction">
    <a href="#">
      <img class="bgImg" src="images/shop3.jpg"> <!-- 底层图片 -->
      <div class="cover"><!-- 顶层 -->
      　　<img src="images/icon4.png"> <!-- 顶层图标 -->
      　　<h3>轻奢国际范儿</h3> <!-- 顶层标题 -->
     　　 <div>7大国际品牌联盟，<br>与英国斯林百兰床垫、新加坡HTL沙发等国际知名品牌深度联盟，
　　　　　　　　　　沙发、床垫可定制</div> <!-- 顶层内容 -->
     </div>
    </a>
 </div>

 >css代码

/*整个div  instruction 的样式 */
.instruction {
  
    width: 256px;
    height: 256px;