css3，qq企鹅动画
2022/1/9 23:04:51
本文主要是介绍css3，qq企鹅动画，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
1、效果图：
2、设计思想：
（1）整个QQ企鹅有头部、左眼、右眼、嘴部、围巾、肚子、左手、右手、左脚、右脚十个部分。
（2）
头部部分里面包含了左右眼和嘴部；
：左右眼里面有三层元素：眼睛的底色部分、眼睛的黑色瞳孔、以及眼白。
：嘴部部分里面包含有嘴唇。
（3）
：围巾元素有两个部分，一个是围在脖子上的围巾，一个是肚子上的一部分。
左右手部分 是贴在肚子上的，使用的定位方式是absolut。
：左右脚有两个部分：一是：
下脚掌；一是：
上脚掌。
（4）在鼠标移动到QQ企鹅卡通形象时，QQ企鹅的嘴巴会消失，眼睛会变小，
，这 里使用的是CSS中的Transition，设置的过渡时间是1s。
3、实验总结：
只使用css进行卡通动画设计时，首先需要做的是先分析出卡通形象由哪些部分组成，在HTML部分中写出这些部分的标签，然后再css中对这些标签进行调整，呈现出比较好的卡通象。需要学好基础知识，并且熟悉的掌握。
4、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ企鹅</title>
<link rel="stylesheet" href="kt.css">
</head>
<body>
<div class="qq_body">
<div class="head"></div>
<div class="bowknot">
<div class="bowknot_l">
<div class="bowknot_line3"></div>
<div class="bowknot_line4"></div>
</div>
<div class="bowknot_c"></div>
<div class="bowknot_tip_l"></div>
<div class="bowknot_tip_r"></div>
</div>
<div class="lefteye">
<div class="eyeshadowwhite"></div>
<div class="eyeball">
<div class="eyewhite"></div>
</div>
</div>
<div class="righteye">
<div class="eyeshadow"></div>
<div class="eyeshadowwhite"></div>
<div class="eyeball">
<div class="eyewhite"></div>
</div>
</div>
<div class="mouth_box">
<div class="mouth">
<div class="mark"></div>
</div>
</div>
<div class="belly">
<div class="belly_white"></div>
</div>
<div class="scarf"></div>
<div class="scarf_d"></div>
<div class="leftwing"></div>
<div class="rightwing"></div>
<div class="leftsole">
<div class="toe"></div>
</div>
<div class="rightsole">
<div class="toe"></div>
</div>
</div>
</body>
</html>
CSS：
* {
margin: 0;
padding: 0;
}
div {
position: absolute;
}
.qq_body {
width: 470px;
height: 540px;
left: 500px;
top: 100px;
}
/*QQ头部*/
.head {
z-index: 0;
left: 65px;
top: 0;
width: 345px;
height: 367px;
background: #19161A;
border-radius: 50%;
}
/*QQ眼睛*/
.lefteye,.righteye {
width: 66px;
height: 99px;
border-radius: 50%;
background: #fff;
left: 153px;
top: 76px;
z-index: 7;
overflow: hidden;
-webkit-transition:1s ease;
-moz-transition:1s ease;
-webkit-transition-property:all;
-moz-transition-property:all;
position:absolute;
}
.qq_body:hover .lefteye{
width: 85px;
height: 50px;
border-radius: 40% 60% 40%/60% 60% 40%;
background: #fff;
top: 85px;
}
.qq_body:hover .righteye{
width: 85px;
height: 50px;
border-radius: 40% 60% 40%/60% 60% 40%;
background: #fff;
top: 85px;
}
.eyeball {
width: 30px;
height: 42px;
background: #201E1F;
border-radius: 50%;
left: 28px;
top: 34px;
}
.eyeball .eyewhite {
width: 11px;
height: 18px;
background: #fff;
border-radius: 50%;
left: 12px;
top: 12px;
}
.righteye {
left: 245px;
}
.righteye .eyeball {
left: 11px;
}
.eyeshadowwhite {
width: 65px;
height: 54px;
border-radius: 50%;
background: rgba(255, 255, 255, 1);
top: 20px;
}
/*QQ嘴巴*/
.mouth_box {
width: 344px;
height: 188px;
top: 102px;
left: 66px;
border-radius: 50%;
z-index: 6;
background: #19161A;
}
.mouth {
width: 234px;
height: 70px;
border-radius: 50%;
background: #FC9202;
left: 52px;
bottom: 35px;
}
.mouth .mark {
width: 160px;
height: 84px;
border: 8px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-radius: 50%;
clip: rect(65px 160px 100px 0);
left: 32px;
top: -25px;
-webkit-transition:1s ease;
-moz-transition:1s ease;
-webkit-transition-property:all;
-moz-transition-property:all;
position:absolute;
}
.qq_body:hover .mouth .mark{
height: 30px;
border: 8px solid#000;
}
/*QQ身体*/
.belly {
width: 385px;
height: 322px;
left: 45px;
top: 185px;
z-index: 1;
background: #19161A;
border-radius: 50%;
}
.belly_white {
width: 315px;
height: 250px;
background: #fff;
border-radius: 50%;
left: 34px;
bottom: 10px;
}
/*QQ围巾*/
.scarf {
width: 355px;
height: 198px;
background: red;
border-radius: 50%;
z-index: 5;
left: 60px;
top: 155px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.3) inset;
}
.scarf_d {
width: 80px;
height: 110px;
border-radius: 15px 15px 18px 35px;
background:red;
left: 110px;
top: 325px;
transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
z-index: 4;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 0, 0, 0.3) inset;
}
/*QQ翅膀*/
.leftwing,.rightwing {
width: 50px;
height: 170px;
background: #1A1624;
border-radius: 50%;
top: 270px;
}
.leftwing {
left: 10px;
transform: rotate(25deg);
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
-o-transform: rotate(25deg);
}
.rightwing {
right: 10px;
transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
}
/*QQ脚掌*/
.leftsole,.rightsole {
width: 157px;
height: 82px;
background: #F07203;
top: 455px;
border-radius: 50%;
border: 3px solid #872E0C;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3);
}
.leftsole {
left: 55px;
transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
}
.rightsole {
right: 55px;
transform: rotate(5deg);
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
.leftsole .toe,.rightsole .toe {
width: 60px;
height: 22px;
background: #F07203;
border-radius: 50%;
border-top: 1px solid #872E0C;
}
.leftsole .toe {
transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
border-left: 3px solid #872E0C;
}
.rightsole .toe {
right: 0;
transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
border-right: 3px solid #872E0C;
}
这篇关于css3，qq企鹅动画的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-10-25如何用 Jest 测试 CSS Font Loading API（介绍）
- 2024-10-2510 个每个 UI 开发人员都应该知道的 CSS 代码段
- 2024-10-22怎么检测是否已经安装了scss（Sass）-icode9专业技术文章分享
- 2024-10-22TailwindCSS开发入门指南
- 2024-10-22TailwindCSS项目实战：从入门到简单应用
- 2024-10-20TailwindCSS教程：零基础快速入门
- 2024-10-20TailwindCss教程：从零开始的实用指南
- 2024-10-18TailwindCSS入门：快速上手指南
- 2024-10-18Tailwind.css项目实战：新手入门教程
- 2024-10-17Tailwind.css学习：从入门到初步掌握
