一、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;