css3基础-动画案例（没啥实用性，纯粹好玩的）
程序员文章站
2022-06-05 08:39:08
会动的汉克狗： Cartoon Dog
......
会动的汉克狗：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>cartoon dog</title>
</head>
<body>
<div class="dog">
<div class="head">
<div class="forehead"></div>
<div class="face"></div>
<div class="chin"></div>
<div class="eye">
<div class="pupil"></div>
</div>
<div class="eye right">
<div class="pupil"></div>
</div>
<div class="birthmark"></div>
<div class="ear"></div>
<div class="ear right"></div>
<div class="nose">
<div class="nostril"></div>
<div class="nostril right"></div>
</div>
<div class="mouth">
<div class="teen no11"></div>
<div class="teen no21"></div>
<div class="tongue"></div>
</div>
</div>
<div class="body">
<div class="arm"></div>
<div class="arm right"></div>
<div class="leg">
<div class="foot"></div>
</div>
<div class="leg right">
<div class="foot"></div>
</div>
<div class="belly"></div>
</div>
</div>
<style>
:root {
--bg: rgb(249, 249, 246);
--hl: rgb(27, 47, 144);
--t: 2s;
}
body {
background: url(img/bg.jpg) no-repeat;
background-size: 100%;
overflow: hidden;
}
.dog {
position: relative;
top: 78vh;
left: -10vw;
/*transform: scale(1, 1);*/
}
.head {
width: 275px;
height: 275px;
position: relative;
margin: 0 auto;
}
.ear {
animation: rotate var(--t) ease-out infinite;
position: absolute;
left: 50%;
margin-left: -38px;
top: 14px;
z-index: 0;
background-color: var(--hl);
width: 16px;
height: 70px;
border-radius: 50%;
}
.ear.right {
animation: rotate-right var(--t) ease-out infinite;
transform: scale(-1, 1);
margin-left: 22px;
}
.forehead {
left: 50%;
transform: translate(-50%, 0);
top: -22px;
border-radius: 51px / 43px 43px 5px 5px;
width: 102px;
height: 48px;
background: var(--bg);
position: absolute;
z-index: 1
}
.face {
left: 50%;
transform: translate(-50%, 0);
width: 110px;
height: 68px;
position: absolute;
background: var(--bg);
z-index: 1;
border-radius: 40% / 50%;
}
.chin {
left: 50%;
transform: translate(-50%, 0);
width: 104px;
height: 36px;
position: absolute;
background: var(--bg);
z-index: 1;
border-radius: 50% / 0 0 36px 36px;
top: 41px;
}
.eye {
overflow: hidden;
box-shadow: 2px 0px 0px -1px #000 inset, -1px -1px 7px 1px #bbb;
left: 50%;
transform: translate(-43.5px, 0);
width: 24px;
height: 24px;
position: absolute;
background: var(--bg);
z-index: 2;
border-radius: 50% / 20px 12px 12px 4px;
top: -2px;
}
.eye.right {
box-shadow: 2px 0px 0px -1px #000 inset;
transform: scale(-1, 1) translate(-21.5px, 0);
}
.birthmark {
left: 50%;
transform: rotate(-10deg) translate(16.5px, 0);
width: 30px;
height: 36px;
position: absolute;
background: var(--hl);
z-index: 2;
border-radius: 50% / 18px 34px 2px 18px;
top: -9px;
z-index: 1
}
.birthmark:after {
content: '';
width: 100%;
height: 2px;
background: var(--bg);
border-radius: 2px 2px 0 0;
position: absolute;
bottom: -1px;
left: 1px
}
.nose {
left: 50%;
transform: translate(-50%, 0);
width: 62px;
height: 38px;
position: absolute;
background: #363035;
z-index: 2;
border-radius: 50% / 35% 35% 65% 65%;
top: 17px
}
.nose:before {
content: '';
width: 98%;
height: 40%;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
background: linear-gradient(30deg, #fff 0%, #fff 5%, #aaa 20%, #363035 100%);
border-radius: 50% / 90% 90% 10% 10%;
opacity: 0.8
}
.mouth {
animation: close var(--t) ease-out infinite;
box-shadow: 0 0 6px 0 #000 inset;
left: 50%;
transform: translate(-50%, 0);
width: 68px;
height: 27px;
position: absolute;
background: #671316;
z-index: 1;
border-radius: 50% / 0 0 100% 100%;
top: 45px
}
.mouth:before {
content: '';
z-index: 3;
width: 100%;
height: 50%;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
background: var(--bg);
border-radius: 50% / 0 0 70% 70%
}
.pupil {
animation: tranlate var(--t) ease-out infinite;
box-shadow: 0 0 6px 0 #000 inset;
width: 26px;
height: 26px;
border-radius: 50%;
background: #e79101;
position: absolute;
left: 3px;
top: 3px
}
.pupil:before {
border-radius: 50%;
content: '';
width: 18px;
height: 18px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #000
}
.pupil:after {
border-radius: 50%;
content: '';
width: 6px;
height: 6px;
position: absolute;
left: 27%;
top: 30%;
transform: translate(-50%, -50%);
background: #fff
}
.nostril {
animation: resize var(--t) ease-out infinite;
position: absolute;
left: 50%;
transform: translate(-20px, 0) rotate(28deg);
top: 22px;
z-index: 0;
background: linear-gradient(0deg, #363035 0%, #000 100%);
width: 15px;
height: 4px;
border-radius: 50%;
}
.nostril.right {
transform: scale(-1, 1) translate(-6px, 0) rotate(28deg)
}
.teen {
animation: follow var(--t) ease-out infinite;
border-radius: 0 0 1px 2px;
transform: translate(-50%, 0);
width: 10px;
height: 3px;
background: var(--bg);
position: absolute;
top: 12px;
left: 43%;
z-index: 2
}
.teen.no21 {
transform: scale(-1, 1) translate(-50%, 0)
}
.tongue {
animation: extend var(--t) ease-out infinite;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5) inset;
width: 34px;
height: 18px;
border-radius: 50% / 0 0 50% 50%;
transform: translate(-50%, 0);
position: absolute;
left: 50%;
z-index: 1;
background: #a2504f
}
.body {
width: 66px;
height: 70px;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
background: var(--bg);
border-radius: 50%;
top: 74px;
}
.arm {
width: 26px;
height: 40px;
position: absolute;
left: 50%;
transform: translate(-40px, 0) rotate(22deg);
background: var(--bg);
border-radius: 50% / 25px 0 0 15px;
top: 3px;
}
.arm.right {
transform: scale(-1, 1) translate(-14px, 0) rotate(22deg);
}
.arm:before {
content: '';
width: 6px;
height: 28px;
box-shadow: -1px 0 0 0px #ddd;
position: absolute;
right: 8px;
top: 8px;
border-radius: 6px / 8px 0 0 20px
}
.leg {
width: 29px;
height: 50px;
position: absolute;
left: 50%;
transform: translate(-33px, 0);
background: linear-gradient(-80deg, #000 0%, var(--bg) 17%, var(--bg) 100%);
border-radius: 50% / 0px 25px 25px 50px;
top: 37px;
}
.leg.right {
transform: scale(-1, 1) translate(-3px, 0)
}
.foot {
width: 29px;
height: 15px;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
background: linear-gradient(-107deg, #000 0%, var(--bg) 17%, var(--bg) 100%);
border-radius: 50% / 10px 10px 5px 5px;
bottom: 0px;
}
.belly {
width: 60px;
height: 36px;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
background: linear-gradient(0deg, #999 0%, var(--bg) 14%, var(--bg) 100%);
border-radius: 50% / 0 0 36px 36px;
bottom: 0px;
}
@keyframes rotate {
0% {
transform: rotate(0deg)
}
,
5% {
transform: rotate(0deg)
}
55% {
transform: rotate(30deg)
}
100% {
transform: rotate(0deg)
}
}
@keyframes rotate-right {
0% {
transform: rotate(0deg)
}
,
5% {
transform: rotate(0deg)
}
55% {
transform: rotate(-30deg)
}
100% {
transform: rotate(0deg)
}
}
@keyframes tranlate {
0% {
transform: translate(0px, 0)
}
,
5% {
transform: translate(0px, 0)
}
55% {
transform: translate(2px, 0)
}
100% {
transform: translate(0px, 0)
}
}
@keyframes resize {
0% {
height: 4px
}
,
5% {
height: 4px
}
55% {
height: 3px
}
100% {
height: 4px
}
}
@keyframes extend {
0% {
height: 18px
}
,
5% {
height: 18px
}
55% {
height: 25px
}
100% {
height: 18px
}
}
@keyframes close {
0% {
height: 27px
}
,
5% {
height: 27px
}
55% {
height: 24px
}
100% {
height: 27px
}
}
@keyframes follow {
0% {
top: 12px
}
,
5% {
top: 12px
}
55% {
top: 10px
}
100% {
top: 12px
}
}
</style>
</body>
</html>
小兔子动画：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 天空 -->
<div class="sky">
<!-- 云 -->
<div id="cloud1" class="cloud"></div>
<div id="cloud2" class="cloud"></div>
<div id="cloud3" class="cloud"></div>
<div id="cloud4" class="cloud"></div>
<div id="cloud5" class="cloud"></div>
</div>
<!-- 草地 -->
<div class="grass">
<img class="rabbit" src="img/rabbit.png" alt="rabbit">
</div>
</body>
</html>
index.css
*{margin:0;padding:0;}
html,body{width:100%;height:100%;overflow: hidden;}
.sky{
width:100%;
height:60%;
position: relative;
background: -webkit-linear-gradient(0deg, rgba(196, 228, 253,0), rgba(196, 228, 253,0.8));
background: -moz-linear-gradient(0deg, rgba(196, 228, 253,0), rgba(196, 228, 253,0.8));
background: -o-linear-gradient(0deg, rgba(196, 228, 253,0), rgba(196, 228, 253,0.8));
background: linear-gradient(0deg, rgba(196, 228, 253,0), rgba(196, 228, 253,0.8));
}
.grass{
width:100%;
height:40%;
position: relative;
background: -webkit-linear-gradient(0deg, rgba(148, 190, 89,0.8), rgba(148, 190, 89,0));
background: -moz-linear-gradient(0deg, rgba(148, 190, 89,0.8), rgba(148, 190, 89,0));
background: -o-linear-gradient(0deg, rgba(148, 190, 89,0.8), rgba(148, 190, 89,0));
background: linear-gradient(0deg, rgba(148, 190, 89,0.8), rgba(148, 190, 89,0));
}
/*云的统一样式*/
.cloud{
position: absolute;
background-color: #fff;
border-radius: 50%;
width: 100px;
height: 103px;
opacity: 0.5;
z-index: 1;
}
.cloud:before{
content: '';
transform: translate(-50%, 0);
position: absolute;
left: -49%;
top: 8px;
border-radius: 43px;
background-color: #fff;
width: 65px;
height: 103px;
z-index: 4;
transform: rotate(-30deg);
}
.cloud:after{
content: '';
transform: translate(-50%, 0);
width: 221%;
height: 62px;
border-radius: 52px;
background-color: #fff;
position: absolute;
top: 28px;
left: 25px;
z-index: 3;
}
/*每一朵云的单独样式*/
#cloud1{opacity: 0.5;left: 51%;top: 22px;z-index:10;
animation: cloud_move 15s ease-out infinite;}
#cloud2{opacity: 0.7;left: 11%;top: 85px;z-index:30;
animation: cloud_move 18s ease-out infinite;}
#cloud3{opacity: 0.8;left: 41%;top: 104px;z-index:50;
animation: cloud_move 12s ease-out infinite;}
#cloud4{opacity: 0.6;left: 71%;top: 78px;z-index:20;
animation: cloud_move 26s ease-out infinite;}
#cloud5{opacity: 0.9;left: 91%;top: 138px;z-index:40;
animation: cloud_move 40s ease-out infinite;}
/*云朵动画*/
@keyframes cloud_move {
0% {left: 110%;}
100% {left: -10%;}
}
.rabbit{position: absolute;bottom:50px;right:200px;width:300px;}
自定义属性必须遵循css级联规则，使用:root 作用域来定义全局变量，由于自定义属性是全局的，为了避免冲突，最好按照统一的约定来命名变量，如果想让某个变量只在部分元素/组件下可见，只需要在特定的元素下定义该变量，并且自定义全局属性，为了避免冲突，可以简单的遵循bem命名法来形成”命名空间”
body {
--foo: #7f583f;
--bar: #f7efd2;
}
a {
color: var(--foo);
text-decoration-color: var(--bar);
}