css一些基础效果

1.旋转

.center>.bj>.div1>ul>li>.img1:hover {transform: rotate(-360deg);transition: 1s}/*旋转*/
.center>.bj>.div1>ul>li>.img2:hover {transform: rotateY(360deg);transition: 1.5s}/*Y轴旋转*/
.center>.bj>.div1>ul>li>.img3:hover {transform: rotate(360deg);transition: 1s}

2.缩放

.center>.bj>.div2>.d2>ul>li>div{width:260px;height:180px;overflow: hidden}/*图片父元素设置溢出隐藏*/
.center>.bj>.div2>.d2>ul>li>div>img{width:260px;transition: 1s;}/*设置图片过渡时间*/
.center>.bj>.div2>.d2>ul>li>div:hover img{transform:scale(1.2,1.2);}
/*点击缩放，此处是放大1.2倍，移开鼠标恢复原状*/

3.遮罩层覆盖图片

.foot>.bj>.d2>ul>.li2{position: absolute;left:310px;top:0;transition: 3s;}/*子级定位绝对+过渡时间*/
.foot>.bj>.d2>ul>.li4{position: absolute;left:950px;top:0;transition: 3s;}

.foot>.bj>.d2>ul>.li1:hover +.li2{left:20px;background: papayawhip;opacity: 0.6}/*鼠标划过li1，li2的变化*/
.foot>.bj>.d2>ul>.li3:hover +.li4{left:660px;background: papayawhip;opacity: 0.6}

 

4.遮罩层隐藏在img上方

<li><img src="images/center/index-01.jpg"/>
                       <div><img src="images/center/zoom.png"/></div>
                   </li>

.foot>.bj>.d2>.u1>li{float: left;list-style: none;margin-left: 30px;width:260px;height:260px;
position: relative;overflow: hidden}/*溢出隐藏、父级相对定位*/
.foot>.bj>.d2>.u1>li>img{width:260px;height:260px;}
.foot>.bj>.d2>.u1>li>div{width:260px;height:260px;background: cyan;opacity: 0.3;
    position: absolute;left:0;top:-260px;transition: 0.5s;}/*子级绝对定位、透明度*/
.foot>.bj>.d2>.u1>li>div>img{margin-top: 120px;margin-left: 115px;}
.foot>.bj>.d2>.u1>li:hover div{top:0;}/*top值为0.直接定位下来*/

5.遮罩层上下效果

    <div id="tu">
        <div class="div1">SCENERY</div>
        <img src="images/center/index-08.jpg"/>
        <div class="div2">SCENERY</div>
    </div>

.foot>.bj>.d2>ul>li>div{width:260px;height:200px;position: relative;overflow: hidden}
.foot>.bj>.d2>ul>li>div>div{width:260px;height:100px;background: cyan;opacity: 0.4;text-align: center
;line-height: 100px;}
.foot>.bj>.d2>ul>li>div>.div1{position: absolute;left: 0;top:-100px;z-index: 5;transition: 1s;}
.foot>.bj>.d2>ul>li>div>.div2{position: absolute;left: 0;top:200px;z-index: 5;transition: 1s;}
.foot>.bj>.d2>ul>li>div:hover  .div1{top:0;}
.foot>.bj>.d2>ul>li>div:hover  .div2{top:100px;}