论坛 › 动画音画 › 猫头

亚伦影音工作室 发表于 2025-8-3 13:51

猫头

本帖最后由 亚伦影音工作室 于 2025-8-18 20:05 编辑 <br /><br /><style>
@keyframes an-pupils {
    from {transform: rotate(0deg);
      left: 60px;
    }
    to {transform: rotate(360deg);
      left: 0px;
    }
}

@keyframes an-ears {
    from {
       top:0;
    }
    to {
       top:25px;
    }
}



#cat {position: relative;
        width: 480px;
        margin:20px auto;
}


#head {
        width: 400px;
        height: 370px;
        background-color: #171717;
        border-radius: 50%;
        margin: auto;
}

#ears {
height: 65px;
position: relative;
left: 35px;
animation-name: an-ears;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

.ear{
        width: 0;
        height: 0;
        border-left: 90px solid transparent;
        border-right: 90px solid transparent;
        border-bottom: 160px solid #171717;
        font-size: 0;
        line-height: 0;
        float: left;
        margin-right: 60px;
       
    transform: rotate(35deg);
      
}


.ear:first-child {
       
    transform: rotate(-35deg);
}

#eyes {
        clear: both;
        width: 350px;
        position: relative;
        top: 25px;
        left: 53px;
}

.eye {
        width: 120px;
        height: 120px;
        background-color: #FFFFFF;
        border-radius: 50%;
        float: left;
       
}

.eye:first-child {
        margin-right: 50px;
}

.pupil {
        position: relative;
        top:40px;
        background-color: #171717;
        border-radius: 50%;
        width: 80px;
        height: 80px;
animation-name: an-pupils;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}

.pupil_ref {
        background-color: #FFFFFF;
        border-radius: 45%;
        width: 30px;
        height: 30px;
        position: relative;
        top: 40px;
        left: 10px;

}

#nose {
        width: 45px;
        height: 30px;
        border-radius: 50%;
        background-color: #FFFFFF;
        position: relative;
        top: 160px;
        left: 170px;
}

#baffi_sx {
position: relative;
left: -100px;
top: 100px; transform-origin: 70% 0%;
animation: hue-rotate 1s linear infinite ;
}
@keyframes hue-rotate {
from {transform: rotate(-15deg);margin: 0px 0px;
}
to {margin: 0px 0px;transform: rotate(15deg);
}
}
#baffi_dx {
position: relative;
left: 223px;
top: 140px;
transform-origin: 0% 0%;
    animation: hue 1s linear infinite ;
}
@keyframes hue {
from {transform: rotate(15deg);margin: 0px 0px;
    }
to {
margin: 0px 0px;transform: rotate(-15deg);
}
}
.baffo{
width:260px;
height:5px;
border:solid 4px #fff;
border-color:#171717 transparent transparent transparent;
border-radius: 60%/30px 30px 0 0;

}
</style>
<div id="cat">
<div id="ears">
<div class="ear"></div>
<div class="ear"></div>
</div>

                <div id="head">
<div id="eyes">
<div class="eye">
<div class="pupil"><div class="pupil_ref"></div></div>
</div>
<div class="eye">
<div class="pupil"><div class="pupil_ref"></div></div>
</div>
               </div>

                        <div id="nose"></div>
                        <div id="baffi_dx">
                                        <div class="baffo"></div>
                                        <div class="baffo"></div>
                                        <div class="baffo"></div>
                        </div>

                        <div id="baffi_sx">
                                        <div class="baffo"></div>
                                        <div class="baffo"></div>
                                        <div class="baffo"></div>
                        </div>
               

                </div>

       

梦油 发表于 2025-8-3 14:29

真有意思，过去有一种猫头鹰挂钟，就是这样。

杨帆 发表于 2025-8-3 18:40

哇，栩栩如生，谢谢亚伦老师精彩分享{:4_191:}

红影 发表于 2025-8-3 20:54

有意思，好灵动好可爱的猫头啊。欣赏亚伦老师好帖，点赞{:4_199:}

查看完整版本: 猫头