每天一个CSS小作品学习，每天在码海中游荡，突然一抹异色引起了我的注意，一个啤酒人走出了康纳的步伐，哈哈哈，太好玩了。拿来吧你
html部分：
<div class="beer-wrapper">
<div class="beer">
<div class="beer__body">
<div class="beer__liquid">
<div class="beer__kiho"></div>
<div class="beer__kiho"></div>
</div>
</div>
<div class="beer__bubble"></div>
<div class="beer__foot-1 beer__foot--left-1"></div>
<div class="beer__foot-2 beer__foot--left-2"></div>
<div class="beer__foot-1 beer__foot--right-1"></div>
<div class="beer__foot-4 beer__foot--right-2"></div>
</div>
</div>
整个效果全部是使用CSS完成的，具体代码如下：
<style>
html, body {
width: 100%;
height: 100%;
}
body {
background: #123752;
font-family: "Cute Font", cursive;
}
* {
margin: 0;
padding: 0;
}
*:before, *:after {
content: "";
position: absolute;
}
.beer-wrapper {
position: absolute;
width: 70px;
height: 200px;
top: calc(50% - 60px);
left: calc(50% - 60px);
}
.beer {
position: absolute;
width: 70px;
}
.beer:before {
top: 20px;
right: -32px;
width: 50px;
height: 59px;
border: 10px solid #fff;
border-radius: 10px;
box-sizing: border-box;
box-sizing: border-box;
animation: body 1.5s infinite ease-in-out;
animation-fill-mode: both;
}
.beer__body {
position: relative;
width: 70px;
height: 115px;
border-radius: 4px 4px 20px 20px;
background: #fff;
overflow: hidden;
z-index: 10;
animation: body 1.5s infinite ease-in-out;
animation-fill-mode: both;
}
.beer__foot-1 {
position: absolute;
top: 105px;
width: 60px;
height: 55px;
}
.beer__foot-2 {
position: absolute;
top: 105px;
width: 60px;
height: 70px;
}
.beer__foot-4 {
position: absolute;
top: 105px;
width: 60px;
height: 70px;
}
.beer__foot-4:before {
bottom: 0px;
width: 15px;
left: 50px;
height: 8px;
background: #d91e19;
}
.beer__foot-2:before {
bottom: 0px;
width: 15px;
left: -18px;
height: 8px;
background: #d91e19;
}
.beer__foot--left-1 {
border-left: 8px solid #d91e19;
left: 20px;
animation: left-foot-1 1s infinite ease-in-out;
animation-fill-mode: both;
transform-origin: top left;
}
.beer__foot--left-2 {
border-radius: 10px;
border-left: 8px solid #d91e19;
top: 140px;
left: 24px;
animation: left-foot-2 1s infinite ease-in-out;
animation-fill-mode: both;
transform-origin: top left;
}
.beer__foot--right-1 {
border-right: 8px solid #d91e19;
right: 20px;
animation: right-foot-1 1s infinite ease-in-out;
animation-fill-mode: both;
transform-origin: top right;
}
.beer__foot--right-2 {
border-right: 8px solid #d91e19;
right: 5px;
top: 150px;
height: 60px;
border-radius: 10px;
animation: right-foot-2 1s infinite ease-in-out;
animation-fill-mode: both;
transform-origin: bottom right;
}
.beer__liquid {
position: absolute;
bottom: 0;
width: 100%;
height: 80%;
background: #f2be44;
z-index: 10;
}
.beer__bubble {
position: absolute;
top: -15px;
right: 10px;
width: 33px;
height: 25px;
background: #fff;
border-radius: 50% 50% 0 0;
z-index: 10;
animation: body 1.5s infinite ease-in-out;
animation-fill-mode: both;
}
.beer__kiho {
position: absolute;
bottom: 0;
left: 0;
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
z-index: 10;
opacity: 0;
transition: 0.8s;
animation: kiho 2s infinite ease-in-out;
animation-fill-mode: both;
}
.beer__kiho:before {
left: 20px;
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
z-index: 10;
opacity: 0;
transition: 0.8s;
animation: kiho2 3s infinite ease-in-out;
animation-fill-mode: both;
}
.beer__kiho:after {
left: 35px;
width: 5px;
height: 5px;
background: #fff;
border-radius: 50%;
z-index: 10;
opacity: 0;
transition: 0.8s;
animation: kiho2 3s infinite ease-in-out;
animation-fill-mode: both;
}
.beer__kiho:nth-of-type(2) {
left: 40px;
animation: kiho 2s 1s infinite ease-in-out;
animation-fill-mode: both;
}
.beer__kiho:nth-of-type(2):before {
left: 10px;
animation: kiho2 3s 1s infinite ease-in-out;
animation-fill-mode: both;
}
.beer__kiho:nth-of-type(2):after {
left: 10px;
animation: kiho2 3s 1s infinite ease-in-out;
animation-fill-mode: both;
}
@keyframes left-foot-1 {
0%, 100% {
border-radius: 10px;
transform: translateX(0) rotate(20deg);
}
50% {
border-radius: 10px;
transform: translateX(-0.5vh) rotate(20deg);
}
}
@keyframes left-foot-2 {
0%, 100% {
transform: rotate(-20deg);
transform-origin: bottom left;
}
50% {
transform: rotate(-25deg);
transform-origin: bottom left;
}
}
@keyframes right-foot-1 {
0%, 100% {
transform: rotate(0);
}
50% {
transform: rotate(10deg);
}
}
@keyframes right-foot-2 {
0%, 100% {
transform: translateY(0) rotate(-15deg);
}
50% {
transform: translateY(-0.5vh) rotate(-25deg);
}
}
@keyframes body {
0%, 50%, 100% {
transform: translateY(-0.5vh) rotate(5deg);
}
15%, 65% {
transform: translateY(0.3vh) rotate(-5deg);
}
}
@keyframes beer {
0%, 50%, 100% {
transform: translateX(-1.5vh) rotate(0.2deg);
}
15%, 65% {
transform: translateX(1.5vh) rotate(-0.2deg);
}
}
@keyframes kiho {
0% {
opacity: 0.8;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-80px);
}
}
@keyframes kiho2 {
0% {
opacity: 1;
transform: translateY(40px);
}
100% {
opacity: 0;
transform: translateY(0);
}
}
@keyframes right-tsumasaki {
0%, 100% {
right: -20px;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
35% {
right: 10px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
transform: rotate(20deg);
}
65% {
right: 11px;
bottom: -6px;
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-ms-transform: rotate(25deg);
-o-transform: rotate(25deg);
transform: rotate(25deg);
}
}
@keyframes left-tsumasaki {
0%, 100% {
left: -20px;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
35% {
left: 10px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
65% {
left: 11px;
bottom: -6px;
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-ms-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
transform: rotate(-25deg);
}
}
</style>
哈哈哈，稍微改了一点，改成了人类高质量玩具
本来想用大佬本人的，想想还是算了，哈哈哈哈
通过这个小作品让我对CSS中的animation以及transform相关属性更加了解了
