CSS3第二节之transition过渡动画

一、transition过渡小案例

应用到的样式
position：relative、absolute；	:first-child；选中第一个元素
transition：all 0.5;	:last-child;选中最后一个元素
display：none、block；	:nth-child(n);选中某个元素
transform-origin: top right;允许您更改转换元素的位置。	transform: rotate(ndeg);旋转角度

1、点击导航栏跳出子导航

		* {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        .subnav {
            margin: 100px auto;
            width: 50px;
        }

        .subnav ul li {
            width: 50px;
            height: 30px;
            line-height: 30px;
            margin-top: 10px;
            position: relative;
            text-align: center;            
            background-color: rgb(245, 188, 188);
        }

        .subnav ul li div {
            position: absolute;
            right: 50px;
            top: 0;
            width: 180px;
            height: 30px;
            z-index: -999;
            transition: all 0.5;
            display: none;
            background-color: rgb(212, 252, 174);
        }

        .subnav ul li:hover div {
            display: block;   
        }

 	<div class="subnav">
        <ul>
            <li>首页
                <div>点击进入</div>
            </li>
            <li>京东
                <div>点击进入</div>
            </li>
            <li>淘宝
                <div>点击进入</div>
            </li>
            <li>唯品会
                <div>点击进入</div>
            </li>
            <li>拼多多
                <div>点击进入</div>
            </li>
        </ul>
    </div>

2、点击过渡旋转图片

		div {
            width: 250px;
            height: 170px;
            margin: 350px auto;
            position: relative;
        }

        div img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.6s;
            transform-origin: top right;
        }

        div:hover img:first-child {
            transform: rotate(60deg);
        }

        div:hover img:nth-child(2) {
            transform: rotate(120deg);
        }

        div:hover img:nth-child(3) {
            transform: rotate(180deg);
        }

        div:hover img:nth-child(4) {
            transform: rotate(240deg);
        }

        div:hover img:nth-child(5) {
            transform: rotate(300deg);
        }

        div:hover img:last-child {
            transform: rotate(360deg);
        }

	<div>
        <img src="../05transition点击旋转的楚乔/images/1.jpg" alt="">
        <img src="../05transition点击旋转的楚乔/images/2.jpg" alt="">
        <img src="../05transition点击旋转的楚乔/images/3.jpg" alt="">
        <img src="../05transition点击旋转的楚乔/images/4.jpg" alt="">
        <img src="../05transition点击旋转的楚乔/images/5.jpg" alt="">
        <img src="../05transition点击旋转的楚乔/images/6.jpg" alt="">
    </div>

3、鼠标移动到图片缩进效果

 	 div{
            width: 600px;
            height: 400px;
            border: 1px solid red;
            overflow: hidden;
        }
        div img{
            width: 650px;
            height: 400px;
            transition: all 0.6;
        }
        div:hover img{
            margin-left: -20px;
        }

	<div>
        <img src="../common/images/2.jpg">
    </div>

4、鼠标经过显示阴影

 	div {
            width: 400px;
            height: 250px;
            margin: 100px auto;
            
        }
        div img{
            width: 400px;
            height: 250px;           
            transition: all 0.6;
        }
        div:hover img{  
            box-shadow: 0px 10px 20px rgba(228, 46, 46, 0.5);
            transform: translateY(-20px);
            /* 20px正数为向下缩影，负数为向上缩影 */
        }

	<div>
        <img src="../common/images/2.jpg" alt="">
    </div>

5、css3音乐盒翻转案例

	 body{
            background: pink;
        }
        .box{
            width: 300px;
            height: 300px;
            margin: 100px auto;
            position: relative;
        }
        .top,.bottom{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: all 0.6s ease 0s;
            transform-origin: bottom;
            /* 在绝对定位中，盒子里border-radius和overflow一起用才有效果 */
            border-radius: 50%;
            overflow: hidden;
        }
        .box:hover .bottom{            
            transform: rotateX(180deg)
        }

	<div class="box">
        <div class="top">
            <img src="../07音乐盒css3应用/resoues/musicb.jpg" alt="">            
        </div>
        <div class="bottom">
             <img src="../07音乐盒css3应用/resoues/musict.jpg" alt="">
        </div>
    </div>

6、动画过渡总结

样式参数	样式解释
background: -webkit-linear-gradient(#292929, #252525);	背景颜色线性渐变
display：-webkit-box；	使用盒子伸缩模型
-webkit-box-orient： horizontal、vertical、其中默认值是inline-axis，即横向排列	设置子元素排列方向
-webkit-box-flex：1；	子元素之间比例，仅作一个系数
-webkit-box-direction：normal、reverse、inherit	其中默认值是normal
-webkit-perspective：400px；	将平面图形转换为具有透视的3D图形(元素距离视图的距离，以像素计)
-webkit-transition-delay: 250ms;	动画延迟250毫秒