首页
/
每日頭條
/
寵物
/
薇薇貓創意畫
薇薇貓創意畫
更新时间:2025-04-02 13:48:32

周末找了點輕松的話題,css畫大熊貓。

先上效果圖

歡迎競猜大熊貓到底說了什麼??

薇薇貓創意畫(周末愉快css畫大熊貓)1

打招呼

薇薇貓創意畫(周末愉快css畫大熊貓)2

眼睛跟随鼠标移動

再上源碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover, user-scalable=no"> <title>純css畫大熊貓</title> </head> <body> <div id="scene1" class="scene-1"> <!--熊貓坐着--> <div class="head"> <div class="ear ear-left"></div> <div class="ear ear-right"></div> <div class="face"> <div class="eye-out eye-left"> <div id="leftEyeOut" class="eye"> <div id="leftEye" class="eyeball"></div> </div> </div> <div class="eye-out eye-right"> <div class="eye"> <div id="rightEye" class="eyeball"></div> </div> </div> <div class="nose"></div> <div id="mouth" class="mouth"> <div id="tongue" class="tongue"></div> </div> </div> </div> <div id="pandaBody" class="body"> <div id="leftArm" class="arm-left"></div> <div id="rightArm" class="arm-right"></div> <div class="foot foot-left"> <div class="toe"></div> </div> <div class="foot foot-right"> <div class="toe"></div> </div> </div> </div> <style> /*動畫相關*/ @keyframes mouth_animation { 0% { top: 132px; height: 14px; } 25% { top: 123px; height: 32px; } 50% { top: 125px; height: 26px; } 75% { top: 123px; height: 32px; } 100% { top: 132px; height: 14px; } } .mouth-animation { /*animation: infinite;*/ animation-name: mouth_animation; animation-duration: 3s; } .tongue-animation { /*animation: infinite;*/ animation-name: tongue_animation; animation-duration: 3s; } @keyframes tongue_animation { 10% { bottom: 3px; height: 8px; opacity: 0; } 15% { bottom: 4px; height: 14px; opacity: 1; } 50% { bottom: 4px; height: 16px; opacity: 1; } 85% { bottom: 4px; height: 14px; opacity: 1; } 90% { bottom: 3px; height: 8px; opacity: 0; } } .arm-left-animation { animation-name: arm_left_animation; animation-duration: 3s; } @keyframes arm_left_animation { 0% { transform: rotate(75deg); } 50% { transform: rotate(125deg); } 100% { transform: rotate(75deg); } } .arm-right-animation { animation-name: arm_right_animation; animation-duration: 3s; } @keyframes arm_right_animation { 0% { transform: rotate(-75deg); } 50% { transform: rotate(-125deg); } 100% { transform: rotate(-75deg); } } </style> <script> // 打招呼 var hasanimation = false function doAnimation(e, centerx) { let arm, ani; if (centerx > e.pageX) { arm = document.getElementById('leftArm'); ani = 'arm-left-animation' } else { arm = document.getElementById('rightArm'); ani = 'arm-right-animation' } var mouth = document.getElementById('mouth'); mouth.classList.add("mouth-animation"); var tongue = document.getElementById('tongue'); tongue.classList.add("tongue-animation"); arm.classList.add(ani); setTimeout(() => { hasAnimation = false mouth.classList.remove("mouth-animation"); tongue.classList.remove("tongue-animation"); arm.classList.remove(ani); }, 3000) } var pandaBody = document.getElementById('pandaBody'); pandaBody.addEventListener("dblclick", function (e) { if (hasAnimation) { return ; } hasAnimation = true var x = pandaBody.getBoundingClientRect().x pandaBody.getBoundingClientRect().width / 2.0; doAnimation(e, x) }) </script> <script> // 眼睛跟随動 var leftEyeCenter = {}, rightEyeCenter = {} setTimeout(() => { var eyel = document.getElementById('leftEye'); var eyeCenterX = eyel.getBoundingClientRect().x eyel.getBoundingClientRect().width / 2.0; var eyeCenterY = eyel.getBoundingClientRect().y eyel.getBoundingClientRect().height / 2.0; leftEyeCenter = {x: eyeCenterX, y: eyeCenterY, dom: eyel} var eyer = document.getElementById('rightEye'); eyeCenterX = eyer.getBoundingClientRect().x eyer.getBoundingClientRect().width / 2.0; eyeCenterY = eyer.getBoundingClientRect().y eyer.getBoundingClientRect().height / 2.0; rightEyeCenter = {x: eyeCenterX, y: eyeCenterY, dom: eyer} }, 100) var body = document.body; body.addEventListener("click", function (e) { eyePosition(leftEyeCenter, e); eyePosition(rightEyeCenter, e); }) function eyePosition(eyeCenter, e) { var cx = e.pageX, cy = e.pageY; var eye = eyeCenter.dom; if ((cx < eyeCenter.x 8 && cx > eyeCenter.x - 8) && cy < eyeCenter.y 8 && cy > eyeCenter.y - 8) { eye.style = ""; } else { var st = Math.atan2((cy - eyeCenter.y), (cx - eyeCenter.x)); var x = 6 6 * Math.cos(st); var y = 6 6 * Math.sin(st); eye.style.left = x 'px'; eye.style.top = y 'px'; } } var timeOut = null; body.addEventListener("mousemove", function (e) { if (timeOut) { return ; } eyePosition(leftEyeCenter, e); eyePosition(rightEyeCenter, e); timeOut = setTimeout(() => { timeOut = null }, 50) }) </script> <style> html, body { margin: 0; width: 100%; height: 100%; position: relative; } .scene-1 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 300px; height: 360px; } </style> <style> /*頭*/ .head { position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 160px; width: 200px; z-index: 10; } .head .face { position: relative; height: 160px; width: 200px; border-radius: 50% 50% 40% 40%; background: white; border: 1px solid black; z-index: 1; } .head .ear { position: absolute; top: -15px; height: 70px; width: 70px; border-radius: 50%; background: black; } .head .ear:after { content: ' '; position: absolute; left: 20px; top: 20px; height: 30px; width: 30px; border-radius: 50%; background-color: darkgrey; } .head .ear-left { left: -15px; } .head .ear-right { right: -15px; } .head .eye-out { position: absolute; top: 30px; height: 80px; width: 60px; border-radius: 50%; background: black; } .head .eye { position: absolute; top: 20px; height: 32px; width: 32px; border-radius: 50%; border: 2px solid white; background-color: white; } .head .eye-left { left: 50px; transform: rotate(30deg); transform-origin: 0% 0%; } .head .eye-left .eye { left: 15px; transform: rotate(-30deg); transform-origin: 50% 50%; } .head .eye-right { right: 50px; transform: rotate(-30deg); transform-origin: 100% 0%; } .head .eye-right .eye { right: 15px; transform: rotate(30deg); transform-origin: 50% 50%; } .head .eyeball { position: absolute; top: 6px; left: 6px; height: 20px; width: 20px; border-radius: 50%; background-color: black; } .head .eyeball:before { content: " "; position: absolute; left: 3px; top: 2px; width: 8px; height: 8px; border-radius: 50% / 50%; background-color: white; } .head .eyeball:after { content: " "; position: absolute; left: 10px; top: 10px; width: 4px; height: 4px; border-radius: 50% / 50%; background-color: white; } .head .nose { position: absolute; top: 100px; left: 50%; width: 30px; height: 20px; transform: translateX(-50%); border-radius: 50% 50% 40% 40%; background-color: black; } .head .nose:after { content: ' '; position: absolute; left: 6px; top: 3px; width: 12px; height: 8px; border-radius: 50% / 50%; background-color: white; } .head .mouth { position: absolute; top: 132px; left: 50%; width: 70px; height: 14px; transform: translateX(-50%); border-radius: 40% 40% 50% 50%; background-color: black; } .head .mouth .tongue { position: absolute; bottom: 3px; left: 50%; width: 40px; height: 8px; transform: translateX(-50%); border-radius: 50%; background-color: red; opacity: 0; } </style> <style> /*身子*/ .body { position: absolute; top: 130px; left: 50%; transform: translateX(-50%); height: 220px; width: 240px; z-index: 5; } .body:before { content: ''; position: absolute; top: 0px; left: 0; height: 220px; width: 240px; border-radius: 50% 50% 20% 20%; background-color: black; z-index: 2; } .body:after { content: ''; position: absolute; left: 5px; top: 60px; width: 228px; height: 160px; overflow: hidden; border-radius: 160px 160px 40% 40%; background-color: white; border: 1px solid black; z-index: 3; } .body .arm-left { position: absolute; top: 40px; left: 20px; height: 120px; width: 60px; transform: rotate(75deg); transform-origin: 50% 10%; background-color: black; border-radius: 0 0 30px 30px; } .body .arm-right { position: absolute; top: 40px; right: 20px; height: 120px; width: 60px; transform: rotate(-75deg); transform-origin: 50% 10%; background-color: black; border-radius: 0 0 30px 30px; } .body .foot { position: absolute; top: 150px; height: 80px; width: 80px; background-color: black; border-radius: 40px; z-index: 5; } .body .foot:after { content: ''; position: absolute; top: 30px; left: 20px; height: 40px; width: 40px; background-color: darkgrey; border-radius: 40px; z-index: 5; } .body .foot-left { left: -10px; } .body .foot-right { right: -10px; } .body .toe { position: absolute; top: 10px; left: 32px; height: 16px; width: 16px; background-color: darkgrey; border-radius: 40px; } .body .toe:before { content: " "; position: absolute; top: 4px; left: -18px; height: 16px; width: 16px; background-color: darkgrey; border-radius: 40px; } .body .toe:after { content: " "; position: absolute; top: 4px; left: 18px; height: 16px; width: 16px; background-color: darkgrey; border-radius: 40px; } </style> </body> </html>

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
吃點狗糧證明一下你是隻狗
吃點狗糧證明一下你是隻狗
很多養狗新手都會發現,照顧一隻小狗其實跟照顧新生兒是差不多的,隻有每個小細節都做對了,才能讓狗狗健健康康……對于剛斷奶的小狗,喂狗糧的時候,一定要給它們泡一泡。狗糧泡軟,吸收更好首先說一說為什麼,一是因為這時候的狗狗身體的各個器官還處于發育...
2025-04-02
怎樣區分虎皮鹦鹉的好壞
怎樣區分虎皮鹦鹉的好壞
#我在家裡養什麼#很多小夥伴們家裡都會養一些小寵物,比如小貓小狗,也有小夥伴會在魚缸裡養些小魚,年齡大一點的人一般喜歡養些花,而我喜歡養鹦鹉,不是别的什麼品種,就是虎皮鹦鹉。虎皮鹦鹉一般有黃色和藍色兩種(也有白灰色),就像上面圖裡的這兩隻一...
2025-04-02
周于北傅恬cut
周于北傅恬cut
今天和大家推薦的是之前看的一部小甜劇——《見面吧,就現在》,由貓的樹和姜好導演,何與,盧洋洋,張子健,姜之南,周峻緯,張淼怡,方曉東,郁子陽等一衆年輕演員出演。劇情簡短高甜,三對cp滿足不同設定,主cp超甜姐弟戀,副cp校園青澀戀愛,青春懵...
2025-04-02
貓咪子宮蓄膿治療幾天可康複
貓咪子宮蓄膿治療幾天可康複
貓子宮蓄膿不是特别多,但并不代表貓不會罹患子宮蓄膿。之前一般貓患子宮蓄膿大多,是6-12歲的老年母貓居多,不過現在也有年輕化的方向發展。子宮蓄膿症狀:是一種非常嚴重的貓婦科疾病,是一種導緻貓子宮變大的疾病。子宮蓄膿的學名叫子宮蓄膿綜合征。因...
2025-04-02
狗狗壽命到底能有多長
狗狗壽命到底能有多長
相信飼養狗狗的寵主都知道,狗狗的壽命是很短暫的,如果說有一天你家狗狗出現了下面這幾種迹象的話,那麼說明狗狗已經開始變老了,而它的壽命也開始進入“倒計時”,下面一起來看看你家狗狗有沒有這些迹象吧!迹象1、開始走路不穩其實當狗狗變老的時候,它就...
2025-04-02
Copyright 2023-2025 - www.tftnews.com All Rights Reserved