纯css实现一个企鹅形象
代码语言:html
所属分类:布局界面
代码描述:纯css实现一个企鹅形象
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
:root {
--black: black;
--white: white;
--gray: #E2E2E2;
--orange: #EF961E;
--background-color: #67B5C6;
}
body{
background: var(--background-color);
}
.box-canvas{
position: relative;
margin: auto;
display: block;
margin-top: 8%;
margin-bottom: 8%;
width: 250px;
height:600px;
}
.head {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background: var(--black);
width: 120px;
height: 120px;
border-radius: 50% 50% 0 0;
}
.mask {
position: absolute;
width: 100px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.mask::before {
content: '';
position: absolute;
top: 30px;
left: 5px;
background: var(--white);
width: 50px;
height: 80px;
border-radius: 50%;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.mask::after {
content: '';
position: absolute;
right: 5px;
top: 30px;
background: var(--white);
width: 50px;
height: 80px;
border-radius: 50%;
-webkit-transform: rotate(20deg);
transf.........完整代码请登录后点击上方下载按钮下载查看
网友评论0