css实现程序员日快乐动画效果
代码语言:html
所属分类:动画
代码描述:css实现程序员日快乐动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css?family=Amatic+SC");
.footer {
bottom: 0;
color: white;
top: 35rem;
font-size: 2rem;
}
.footer .title {
font-family: 'Amatic SC';
text-align: center;
}
.footer .mod {
color: #dc8e3e;
}
.footer .sub {
display: flex;
justify-content: space-around;
font-size: 1rem;
font-family: 'Amatic SC';
}
.footer .sub a {
color: pink;
text-decoration: none;
}
.footer .sub a:hover {
color: white;
}
body {
width: 99%;
height: 36rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #222;
}
.container {
display: flex;
justify-content: center;
align-items: center;
margin: auto;
top: 0;
bottom: 0;
width: 26rem;
border-radius: 26rem;
overflow: hidden;
height: 26rem;
position: relative;
}
.objects_computer {
position: absolute;
width: 7rem;
height: 5.5rem;
background: #bfbfbf;
left: 3.8rem;
top: 14.8rem;
transform: skew(17deg, 0deg);
border-radius: 0.6rem 0.6rem 0 0;
box-shadow: inset -6px 1px darkgrey;
}
.objects_computer:after {
content: '';
position: absolute;
width: 2rem;
height: 0.5rem;
background: darkgrey;
top: 5.1rem;
left: 7rem;
transform: skew(0deg, 2deg);
}
.objects_table {
position: absolute;
width: 22rem;
top: 20.4rem;
height: 1.4rem;
background: #63321f;
left: 2rem;
box-shadow: 0px -3px #582714;
}
.objects_table:before {
content: '';
width: 19rem;
height: 1.2rem;
position: absolute;
background: #582714;
border-radius: 0 1rem;
top: 1.4rem;
left: 3rem;
z-index: 1;
}
.objects_cup {
position: absolute;
width: 2.4rem;
top: 17.2rem;
background: #e67da4;
left: 16.8rem;
height: 3rem;
border-radius: 0.3rem 0.3rem 0 0;
z-index: 55;
box-shadow: -2px 0px #f36b9d;
}
.objects_cup:after {
content: '';
width: 2rem;
height: 2rem;
background: #e67da4;
position: absolute;
top: 0.7rem;
left: 0.4rem;
border: none;
border-radius: 0;
z-index: 5;
}
.objects_cup:before {
content: '';
position: absolute;
width: 1rem;
height: 1.3rem;
border: 4px solid #f36b9d;
left: 1.6rem;
top: 0.8rem;
border-radius: 1rem;
z-index: 1;
}
.objects_chair {
height: 10.2rem;
position: absolute;
width: 9.1rem;
background: #3c3c3c;
left: 16.6rem;
top: 10rem;
border-radius: 2rem 2rem 0 0;
transform: skew(-9deg, 0deg);
box-shadow: inset -9p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0