CSS transition 和 CSS transform 配合

原創 qq_42535842 2020-02-23 22:42

ife_設計師

No.3 - CSS transition 和 CSS transform 配合製作動畫

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>純 CSS 實現貓笑起來的動畫</title>
    <style type="text/css">
        body {
            background-color: #d69a44;
        }
        /* face */
        .face {
            position: absolute;
            left: 50%;
            margin-left: -175px;
            top:40px;
            width: 350px;
            height: 250px;
            border-radius: 50% 50% 30% 30%;
            border: 2px solid #3f200b;
            z-index: 10;
            background: #fbf8f1;
            overflow: hidden;
        }
        /* ear */
        .ear-wrap {
            position: absolute;
            width: 300px;
            left: 50%;
            margin-left: -150px;
            /*   top: 100px; */
        }
        .ear-wrap{
            position: absolute;
            left: 50%;
            width: 300px;
            margin-left: -150px;
            margin-top: 20px;
        }
        .ear {
            position: absolute;
            width: 80px;
            height: 100px;
            border: 2px solid #000;
            background: #fbf8f1;
            border-radius: 100% 10% 50% 0% ;
        }

        .ear-wrap .right {
            left: auto;
            right: 0;
            border-radius: 10% 100% 0% 50%;
            background: #f1ac2b;
        }
        /* 頭髮 */
        .hair {
            position: absolute;
            width: 120px;
            height: 120px;
            left: 50%;
            margin-left: 50px;
            margin-top: -40px;
            background: #f3b32e;
            border-radius: 50% 50% 50% 50%;
        }
        /* 眼睛 */
        .eye-wrap {
            position: absolute;
            width: 280px;
            height: 70px;
            top: 90px;
            left: 50%;
            margin-left: -140px;
            overflow: hidden;
        }
        .eye {
            height: 100px;
            width: 100px;
            position: absolute;
        }
        .eye-circle {
            width: 100px;
            height: 80px;
            border: 2px solid #482507;
            overflow: hidden;
            position: absolute;
            background: #fff;
            border-radius: 50% 50% 40% 40%;
            box-sizing: border-box;
        }
        .eye-core {
            height: 55px;
            width: 46px;
            border-radius: 50% 50% 50% 50%;
            /* margin: 0 auto; */
            background: #000;
            position: absolute;
            left: 50%;
            margin-left: -23px;
        }
        .eye-bottom {
            height: 50px;
            width: 100px;
            border-radius: 40% 40% 50% 50%;
            position: absolute;
            margin-top: 48px;
            border-top: 2px solid #46240b;
            background: #f6f7f2;
        }
        .eye-wrap .right {
            left: auto;
            right: 0px;
        }
        .face-red {
            position: absolute;
            height: 20px;
            width: 70px;
            background: red;
            top: 45px;
            /*top: 64px;*/
            left: 18px;
            border-radius: 50% 50% 50% 50%;
            background: #e85a5e;
            opacity: 0.0;
        }
        /* 鼻子 */
        .nose {
            width: 20px;
            height: 10px;
            border-bottom: 8px solid #000;
            border-radius: 0% 0% 50% 50%;
            top: 154px;
            left: 50%;
            margin-left: -10px;
            position: absolute;
        }
        /* 嘴巴 */
        .mouth-wrap {
            position: absolute;
            top: 168px;
            width: 80px;
            left: 50%;
            margin-left: -40px;
            height: 20px;
            overflow: hidden;
        }
        .mouth {
            width: 40px;
            height: 40px;
            border-bottom: 4px solid #000;
            border-right: 4px solid #000;
            border-radius: 0% 40% 50% 20%;
            margin-top: -26px;
            position: absolute;
            left: 0;
        }
        .mouth-wrap .right {
            border-bottom: 4px solid #000;
            border-right: none;
            border-left: 4px solid #000;
            border-radius: 40% 0% 20% 50%;
            position: absolute;
            left: auto;
            right: 0;
        }
        /*鼠標hover樣式 寫在這裏*/
        /*hover在父元素上，對子元素進行樣式調整。*/
        .ear-wrap .left,.ear-wrap .right {
            transition: transform 1.0s ease-out .2s;/*過渡效果0.2s後開始，持續1s,以慢速結束，*/
            /* Firefox 4 */
            -moz-transition:transform 1.0s ease-out .2s;
            /* Safari and Chrome */
            -webkit-transition:transform 1.0s ease-out .2s;
            /* Opera */
            -o-transition:transform 1.0s ease-out .2s;
        }
        .container:hover .ear-wrap .right {
            -webkit-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -o-transform: rotate(30deg);
            transform: rotate(30deg);/*右邊耳朵順時針旋轉30度*/
        }
        .container:hover .ear-wrap .left {
            -webkit-transform: rotate(-30deg);
            -moz-transform: rotate(-30deg);
            -ms-transform: rotate(-30deg);
            -o-transform: rotate(-30deg);
            transform: rotate(-30deg);/*左邊耳朵順時針旋轉30度*/
        }
        .eye-core {
            transition: width 1.0s ease-out .2s,margin-left 1.0s ease-out .2s;/*過渡效果0.2s後開始，持續1s,以慢速結束，*/
            /* Firefox 4 */
            -moz-transition:width 1.0s ease-out .2s,margin-left 1.0s ease-out .2s;
            /* Safari and Chrome */
            -webkit-transition:width 1.0s ease-out .2s,margin-left 1.0s ease-out .2s;
            /* Opera */
            -o-transition:width 1.0s ease-out .2s,margin-left 1.0s ease-out .2s;
        }
        .container:hover .eye-core {
            width: 36px;
            margin-left: -18px;
        }
        .eye-bottom {
            transition: margin-top 1.0s ease-out .2s;/*過渡效果0.2s後開始，持續1s,以慢速結束，*/
            /* Firefox 4 */
            -moz-transition:margin-top 1.0s ease-out .2s;
            /* Safari and Chrome */
            -webkit-transition:margin-top 1.0s ease-out .2s;
            /* Opera */
            -o-transition:margin-top 1.0s ease-out .2s;
        }
        .container:hover .eye-bottom {
            margin-top: 30px;
        }
        .face-red {
            transition: opacity 1.0s ease-out .2s;/*過渡效果0.2s後開始，持續1s,以慢速結束，*/
            /* Firefox 4 */
            -moz-transition:opacity 1.0s ease-out .2s;
            /* Safari and Chrome */
            -webkit-transition:opacity 1.0s ease-out .2s;
            /* Opera */
            -o-transition:opacity 1.0s ease-out .2s;
        }
        .container:hover .face-red {
            opacity:1.0;
        }
        .mouth-wrap .left,.mouth-wrap .right {
            transition: border-radius 1.0s ease-out .2s;/*過渡效果0.2s後開始，持續1s,以慢速結束，*/
            /* Firefox 4 */
            -moz-transition:border-radius 1.0s ease-out .2s;
            /* Safari and Chrome */
            -webkit-transition:border-radius 1.0s ease-out .2s;
            /* Opera */
            -o-transition:border-radius 1.0s ease-out .2s;
        }
        .container:hover .mouth-wrap .left {
            border-radius: 0% 40% 50% 50%;
        }
        .container:hover .mouth-wrap .right {
            border-radius: 40% 0% 50% 50%;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 臉 -->
    <div class="face">
        <!-- 頭髮 -->
        <div class="hair">
            <div></div>
        </div>
        <!-- 眼睛 -->
        <div class="eye-wrap">
            <div class="eye left">
                <div class="eye-circle">
                    <div class="eye-core"></div>
                </div>
                <div class="eye-bottom"></div>
                <div class="face-red"></div>
            </div>
            <div class="eye right">
                <div class="eye-circle">
                    <div class="eye-core"></div>
                </div>
                <div class="eye-bottom"></div>
                <div class="face-red"></div>
            </div>
        </div>
        <!-- 鼻子 -->
        <div class="nose">
        </div>
        <!-- 嘴巴 -->
        <div class="mouth-wrap">
            <!-- <div class="mouth-top"></div> -->
            <div class="mouth left"></div>
            <div class="mouth right"></div>
        </div>
    </div>
    <!-- 耳朵 -->
    <div class="ear-wrap">
        <div class="ear left"> </div>
        <div class="ear right"> </div>
    </div>
</div>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章