练习居中和用css动画练习

第一种垂直居中的方式

.jz{height: 50px;width: 300px;position: fixed;background: #333;top:50%;left: 50%;margin-top: -25px;margin-left: -150px}

<div class="jz"></div>

第二种垂直居中的方式 ,解决css3兼容性问题

.jz2{height: 50px;width: 200px;position: fixed;background: #555;top:50%;left: 50%;transform: translate(-100px,-25px)}

<div class="jz2"></div>

第三种垂直居中的方式 便利，不需要计算

.jz3{height: 50px;width: 150px;position: fixed;background: #888;top:0;left: 0;right: 0;bottom: 0;margin: auto;}

<div class="jz3"></div>

第四种垂直居中的方式 弹性盒子 这个方法适用性不高，但是在某个元素中使用可行

html,body{height: 100%;width: 100%}
    body{display: flex;justify-content: center;align-items: center;height: 100%;}
    .jz4{height: 50px;width: 100px;background: #111;z-index: 10;} 

<div class="jz4"></div>

第五种垂直居中的方式，使用text-align:center 和vertical-align:middle，用一个100%元素作为参照物

.jz5{text-align:center}
       .jz5 img{vertical-align:middle}
       .jz5 span{display:inline-block;vertical-align:middle,height:100%;width:0;}

<div>
    <img src="../img/1.jpg" >
    <span></span>
</div>

css定位实现图片放大效果

 .scaleimg{height: 400px;width: 800px;margin: 40px auto;}
    .scaleimg div{float: left;height: 70;width: 112px;padding: 5px;border: 1px solid #444;position: relative;margin: 10px}
    .scaleimg div img:nth-of-type(1){display: block;height: 60px;width: 100px;padding: 5px;border: 1px solid #444}
    .scaleimg div img:nth-of-type(2){display: block;height: 100px;width: 140px;padding: 5px;border: 1px solid #444;display: none;position: absolute;top: -15px;left: -15px;}
    .scaleimg div:hover img:nth-of-type(2){display: block;z-index: 10;}

 <div class="scaleimg">
        <div>
            <img src="../img/1.jpg" />
            <img src="../img/1.jpg" />
        </div>
        <div>
            <img src="../img/1.jpg" />
            <img src="../img/1.jpg" />
        </div>
        <div>
            <img src="../img/1.jpg" />
            <img src="../img/1.jpg" />
        </div>
        <div>
            <img src="../img/1.jpg" />
            <img src="../img/1.jpg" />
        </div>
    </div>
<div style="display: flex;flex-wrap: wrap;">

css3放大旋转

.roimg{position: relative;height: 200px;width: 200px;border-radius: 50%;}
        .roimg div:nth-of-type(1){position: absolute;height: 160px;width: 160px;border-radius: 50%;background: url("../img/1.jpg") no-repeat;background-origin: border-box;border: 20px solid rgba(255,255,255, .5);transition: 1s;}
        .roimg div:nth-of-type(2){height: 200px;width: 200px;border-radius: 50%;text-align: center;line-height: 200px;background: #111;color: #fff;transition: 1s;transform: scale(0);font-size: 24px}
        .roimg:hover div:nth-of-type(1){transform: scale(0) rotate(360deg);}
        .roimg:hover div:nth-of-type(2){transform: scale(1) rotate(360deg);}

<div class="roimg">
        <div></div>
        <div>文字</div>
</div>

css3放大旋转透明度变0

.roimg2{position: relative;height: 200px;width: 200px;border-radius: 50%;}
        .roimg2 div:nth-of-type(1){position: absolute;height: 160px;width: 160px;border-radius: 50%;background: url("../img/1.jpg") no-repeat;background-origin: border-box;border: 20px solid rgba(255,255,255, .5);transition: .5s;}
        .roimg2 div:nth-of-type(2){height: 200px;width: 200px;border-radius: 50%;text-align: center;line-height: 200px;background: #111;color: #fff;font-size: 24px}
        .roimg2:hover div:nth-of-type(1){transform: scale(2) rotate(360deg);opacity: 0;}

<div class="roimg2">
        <div></div>
        <div>文字</div>
</div>

css3y轴转180度

.roimg3{position: relative;height: 200px;width: 200px;border-radius: 50%;margin: 0 auto;}
        .roimg3 div:nth-of-type(1){position: absolute;height: 160px;width: 160px;border-radius: 50%;background: url("../img/1.jpg") no-repeat;background-origin: border-box;border: 20px solid rgba(255,255,255, .5);transition: .5s;transform-origin: left center;}
        .roimg3 div:nth-of-type(2){height: 200px;width: 200px;border-radius: 50%;text-align: center;line-height: 200px;background: #111;color: #fff;font-size: 24px}
        .roimg3:hover div:nth-of-type(1){transform:rotateY(180deg);}

<div class="roimg3">
        <div></div>
        <div>文字</div>
</div>