介紹

本期我們通過vite+scss去完成一個(gè)橘貓心情變化的創(chuàng)意動(dòng)畫，這里的邏輯我們將不使用任何js代碼，僅依靠css來完成，所以，通過本期的動(dòng)畫，你可以到一些css動(dòng)畫和繪制的一些技巧。

正文

1.搭建與結(jié)構(gòu)

yarn?add?vite?sass?sass-loader
復(fù)制代碼

我們是用vite和sass去完成項(xiàng)目的構(gòu)建，和樣式的書寫，所以我們先安裝下他們。

<div?id="app">
????<div?class="warrper">
????????<div?class="sun">div>
????????<div?class="cloud">div>
????????<div?class="cat">
????????????<div?class="eye?left"><div?class="eye-hide">div>div>
????????????<div?class="eye?right"><div?class="eye-hide">div>div>
????????????<div?class="nose">div>
????????????<div?class="mouth">div>
????????div>
????div>
div>
復(fù)制代碼

在html我們先寫出結(jié)構(gòu)來。div#app作為主界面去填滿一屏，而div.warrper就作為主要內(nèi)容的展示區(qū)域也就是那個(gè)圓圈。然后，在圓圈里面我們放太陽div.sun，云朵div.cloud，貓div.cat，當(dāng)然貓里面還有眼睛鼻子嘴巴這些，至于貓的耳朵就用兩個(gè)偽類做個(gè)三角形去實(shí)現(xiàn)。

2.變量與界面

$cat:rgb(252, 180, 125);

:root{
    --bgColor:rgb(81, 136, 168);
    --eyeHideTop:0px;
    --cloudLeft:45%;
    --mouthRadius:10px 10px 0 0;
}
#app{
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: repeating-linear-gradient(0deg, hsla(340,87%,75%,0.2) 0px, hsla(340,87%,75%,0.2) 30px,transparent 30px, transparent 60px),repeating-linear-gradient(90deg, hsla(340,87%,75%,0.2) 0px, hsla(340,87%,75%,0.2) 30px,transparent 30px, transparent 60px),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
}

.warrper{
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 10px solid white;
    position: relative;
    overflow: hidden;
    background-color: var(--bgColor);
    transition: background-color 1s linear;
    cursor:url("./assets/fish.png"),default;
    &:hover{
        --bgColor:rgb(178, 222, 247);
        --eyeHideTop:-20px;
        --cloudLeft:100%;
        --mouthRadius:0 0 10px 10px;
    }
}
復(fù)制代碼

我們先定義貓的主色調(diào)，還有一些要變化的顏色和距離，因?yàn)槲覀円迫雽⑼ㄟ^css3去改變這些屬性，來達(dá)到某些動(dòng)畫的實(shí)現(xiàn)。

我們期望的是，當(dāng)鼠標(biāo)移入圓圈后，天空變晴，云朵退散，貓開心充滿精神，所以，bgColor：天空顏色，eyeHideTop貓的眼皮y軸距離，cloudLeft云朵x軸偏移距離，mouthRadius貓嘴巴的圓角值。目前來說，當(dāng)鼠標(biāo)移入div.warrper后，這些值都會(huì)發(fā)生變化。另外，我自定義了鼠標(biāo)圖標(biāo)移入圓圈變成了一條魚（即cursor:url(圖片地址)）。這里的hover后的值是我事先算好的，如果大家重新開發(fā)別的動(dòng)畫可以一邊做一邊算。

3.太陽與云朵

.sun{
    width: 50px;
    height: 50px;
    position: absolute;
    background-color: rgb(255, 229, 142);
    border:7px solid rgb(253, 215, 91);
    border-radius: 50%;
    left: 55%;
    top: 14%;
    box-shadow: 0 0 6px rgb(255, 241, 48);
}
復(fù)制代碼

太陽我們就畫個(gè)圓圈定好位置，然后用box-shadow投影去完成一點(diǎn)發(fā)光的效果。

然后，我們?cè)匍_始畫云朵~

.cloud{
    width: 100px;
    height: 36px;
    background-color: white;
    position: absolute;
    transition: left .6s linear;
    left: var(--cloudLeft);
    top: 23%;
    border-radius: 36px;
    animation: bouncy 2s ease-in-out infinite;
    &::before{
        content: '';
        width: 50px;
        height: 50px;
        background-color: white;
        border-radius: 50%;
        position: absolute;
        top: -23px;
        left: 18px;
    }
    &::after{
        content: '';
        width: 26px;
        height: 26px;
        background-color: white;
        border-radius: 50%;
        position: absolute;
        top: -16px;
        left: 56px;
    }
}

@keyframes bouncy {
    0% {
      transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}
復(fù)制代碼

云朵很簡單，我們就是畫一個(gè)圓角矩形，然后用兩個(gè)偽類畫一個(gè)大圓和小圓疊在一起就非常像云了，另外，我們?cè)偌觽€(gè)animation動(dòng)畫，讓他時(shí)大時(shí)小，有動(dòng)的感覺。

4.橘貓與動(dòng)畫

.cat{
    width: 180px;
    height: 160px;
    background-color: $cat;
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -90px;
    animation: wait 2s ease-in-out infinite;
    &::after,
    &::before{
        content: '';
        display: block;
        border-style: solid;
        border-width: 20px 30px;
        position: absolute;
        top: -30px;    
    }
    &::after{
        right: 0;
        border-color: transparent $cat $cat transparent;
    }
    &::before{
        left: 0;
        border-color: transparent transparent $cat $cat;
    }
    .eye{
        width: 42px;
        height: 42px;
        border-radius: 50%;
        position: absolute;
        top: 30px;
        background:white;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        .eye-hide{
            height: 20px;
            position: absolute;
            top: var(--eyeHideTop);
            left: -2px;
            right:-2px;
            background-color: $cat;
            transition: top .5s ease-in-out;
            z-index: 2;
        }
        &::before{
            content: "";
            height: 36px;
            width: 36px;
            background-color:black;
            border-radius: 50%;
        }
        &::after{
            content: "";
            width: 24px;
            height: 24px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            right: 0px;
            top: 0px; 
        }
        &.left{
            left: 24px;
        }
        &.right{
            right: 24px;
        }
    }
    .nose{
        width: 0;
        height: 0;
        border-top: 7px solid rgb(248, 226, 226);
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        position: absolute;
        left: 50%;
        margin-left: -7px;
        top: 70px;
    }
    .mouth{
        width: 26px;
        height: 20px;
        background-color: rgb(255, 217, 217);
        position: absolute;
        top: 85px;
        left: 50%;
        margin-left: -13px;
        border-radius: var(--mouthRadius);
        transition: border-radius .2s linear;
        overflow: hidden;
        &::after,
        &::before{
            content: "";
            position: absolute;
            display: block;
            top: 0;
            border-top: 7px solid white;
            border-left: 2px solid transparent;
            border-right: 2px solid transparent;
        }
        &::after{
            right: 5px;
        }
        &::before{
            left: 5px;
        }
    }
}

@keyframes wait{
    0% {
        bottom: -20px;
    }
    50% {
        bottom: -25px;
    }
    100% {
        bottom: -20px;
    }
}
復(fù)制代碼

我們可以實(shí)現(xiàn)分解出，耳朵（偽類）+ 一雙眼睛 + 鼻子 + 嘴（包含兩顆尖牙） = 貓。

通過以上代碼就不難看出主要都是在使用絕對(duì)定位來完成，面部器官的擺放。絕大部分都是css基礎(chǔ)代碼來實(shí)現(xiàn)的。唯一可以注意的點(diǎn)，就是耳朵這個(gè)三角形，我們是通過偽類實(shí)現(xiàn)，將它不設(shè)置寬高，而主是通過border-width+boder-color這個(gè)技巧去繪制出三角形的，算是個(gè)css小技巧吧，后面的鼻子和嘴巴里的尖牙都是這個(gè)小技巧來實(shí)現(xiàn)的。

另外，還要說的是那雙眼睛，我們用先填充白底再分別用偽類去實(shí)現(xiàn)里面的黑底圓和白色小圓，肯定有同學(xué)問了為什么不用border是實(shí)現(xiàn)白色圓框，就不用浪費(fèi)一個(gè)偽類去完成黑底圓了？因?yàn)槲覀冇昧薿verflow: hidden，他多余隱藏的內(nèi)容是border以下的元素，而border邊框可以無損，那么他的偽類能蓋不住他的border，這樣顯得眼皮垂下的圓圈還是很大不自然，所以我們又造了一個(gè)偽類去實(shí)現(xiàn)他的黑底，讓外圓不使用border了。

剩下的就是做一個(gè)等待的animation動(dòng)畫給貓，讓他上下移動(dòng)著，來實(shí)現(xiàn)不停的呼吸的效果。

這樣一直無精打采的橘貓就完成了。因?yàn)樵诘谝徊糠郑覀兪孪纫呀?jīng)把移入后改變的變量算好了，現(xiàn)在把鼠標(biāo)移入，效果就出現(xiàn)咯~

結(jié)語

講到這里我們就已經(jīng)完成了這個(gè)動(dòng)畫了，不得不說，看見食物這么激動(dòng)不愧都叫他胖橘！

這里有我這個(gè)動(dòng)畫【I Like Fish】^[2]codepen地址可以看到演示和代碼，有興趣的小伙伴可以康康。

本期還是比較側(cè)重基礎(chǔ)和動(dòng)畫創(chuàng)意的，主要是新手向，大佬勿噴，經(jīng)常用css寫寫動(dòng)畫挺有意思的，不僅可以熟悉基本功，而且會(huì)迸發(fā)出很多創(chuàng)意來，也是一種鍛煉自己的學(xué)習(xí)方式吧，多練習(xí)下，大家一起加油鴨~

關(guān)于本文

作者：jsmask

https://juejin.cn/post/7025456902322520101


往期干貨：
?26個(gè)經(jīng)典微信小程序+35套微信小程序源碼+微信小程序合集源碼下載（免費(fèi)）
?干貨~~~2021最新前端學(xué)習(xí)視頻~~速度領(lǐng)取
?前端書籍-前端290本高清pdf電子書打包下載

點(diǎn)贊和在看就是最大的支持??

可愛極了，用 CSS 實(shí)現(xiàn)一個(gè)超可愛的貓咪！

介紹

正文

1.搭建與結(jié)構(gòu)

2.變量與界面

3.太陽與云朵

4.橘貓與動(dòng)畫

結(jié)語

作者：jsmask

?26個(gè)經(jīng)典微信小程序+35套微信小程序源碼+微信小程序合集源碼下載（免費(fèi)）

?干貨~2021最新前端學(xué)習(xí)視頻速度領(lǐng)取

?前端書籍-前端290本高清pdf電子書打包下載