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

時間 2019-12-07

標籤 no.3 css transition transform 配合製做動畫欄目 CSS 简体版

原文原文鏈接

課程概述

做業提交截止時間：09-01css

任務目的

深度理解掌握 transition-timing-function 以及它的意義
學會配合使用 CSS transform 和CSS transition 製做流暢動畫
使用 CSS 僞元素觸發過渡效果
合理的使用 CSS 佈局

任務描述

在咱們提供給你的 HTML 文件基礎上，適當的添加 CSS transition 和 CSS transform 屬性，實現視頻 demo 中的效果；
鼠標 hover 上去的時候，出現小貓笑起來的動畫；
動畫 demo
下載.html 文件
transition 和transform 各項子屬性的值能夠自定；
對 CSS 佈局比較感興趣的同窗，在學有餘力的狀況下，能夠嘗試本身用 CSS 畫出小貓。

任務注意事項

注意瀏覽器中的兼容性
請注意代碼風格的整齊、優雅
HTML 及 CSS 代碼結構清晰、規範
代碼中含有必要的註釋

在線學習參考資料

個人代碼

<!DOCTYPE html>
<!-- saved from url=(0055)http://jadyoap.bj.bcebos.com/ife%2FcssCatAnimation.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% ;
                transition: all 1s cubic-bezier(0.28, 0.50, 0.60, 0.83);
            }
            .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;
                transition: all 1.2s cubic-bezier(0.51, 0.25, 0.41, 0.69);
            }
            .eye-bottom {
                height: 50px;
                width: 100px;
                border-radius: 40% 40% 50% 50%;
                position: absolute;
                margin-top: 48px;
                border-top: 2px solid #46240b;
                background: #f6f7f2;
                transition: all 1.2s;
            }
            .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;
                transition: all 1.2s cubic-bezier(0.94, 0.26, 0.11, 0.58);
            }
            /* 鼻子 */
            .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;
                transition: all 1.2s;
            }
            .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樣式 寫在這裏*/
            .face:hover~.ear-wrap .left{
                transform: rotate(-23deg);
                transform-origin:50% 100%;
            }
            .face:hover~.ear-wrap .right{
                transform: rotate(23deg);
                transform-origin:50% 100%;
            }
            .face:hover .eye-core{
                transform: scaleX(0.75);
            }
            .face:hover .eye-bottom{
                transform: translateY(-15px);
            }
            .face:hover .face-red{
                opacity: 1;
            }
            .face:hover .mouth{
                border-radius: 0% 40% 50% 50%;
            }
           
        </style>
    </head><style type="text/css" id="4924523920"></style>
    <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>

總結一下：html

①hover選擇兄弟元素 css3

            /*鼠標hover樣式 寫在這裏*/
            .face:hover{
                cursor: pointer;
            }
            .face:hover~.ear-wrap .left{
                transform :rotate(-30deg);
            }
            .face:hover~.ear-wrap .right{
                transform :rotate(30deg);
            }
            .face:hover .face-red{
                opacity: 0.8;
            }

②利用transform，transition等完成貓笑的效果瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。