div+css布局卡通人绳子吊起来看电脑代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局卡通人绳子吊起来看电脑代码
代码标签: div css 布局 卡通 人 绳子 吊起来 看 电脑 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
overflow: hidden;
}
@keyframes rotate {
0%, 100% {
transform: rotate3d(0,1,0,0deg);
rotate: 0;
}
30% {
rotate: -3deg;
}
50% {
transform: rotate3d(0,1,0,5deg);
}
}
#secne {
font-size: 1vmin;
width: 90em;
aspect-ratio: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50% 50% 0 0;
background:
/* floor */
radial-gradient(100% 100% at 56% 100%, #fff0 75%, #ffff 0),
repeating-linear-gradient(-25deg, #0000 0 9.75%, #c9c7 0 10%) 100% 100% / 86% 80%,
repeating-linear-gradient(25deg, #0000 0 9.75%, #c9c7 0 10%) 100% 50% / 80% 86%,
radial-gradient(45% 25% at 50% 70%, #ccc4 99%, #ccc0 0),
#f000;
background-repeat: no-repeat;
&::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 63em;
height: 63em;
transform: skewY(25deg);
background:
/* monitor cheating :P */
linear-gradient(-85deg, #0000 20%, #ba9 0 80%, #0000 0) 44% 46% / 10% 20%,
linear-gradient(-85deg, #0000 20%, #cba 0 80%, #0000 0) 46% 44% / 10% 20%,
linear-gradient(-85deg, #0000 20%, #cba 0 80%, #0000 0) 45.5% 44.5% / 10% 20%,
linear-gradient(-85deg, #0000 20%, #cba 0 80%, #0000 0) 45% 45% / 10% 20%,
linear-gradient(-85deg, #0000 20%, #cba 0 80%, #0000 0) 44.5% 45.5% / 10% 20%,
linear-gradient(#dcb 0 0) 48% 27% / 35% 30%,
linear-gradient(#edc 0 0) 50% 25% / 35% 30%,
linear-gradient(#edc 0 0) 49.5% 25.5% / 35% 30%,
linear-gradient(#edc 0 0) 49% 26% / 35% 30%,
linear-gradient(#edc 0 0) 48.5% 26.5% / 35% 30%,
linear-gradient(-45deg, #0000 22%, #a98 0 78%, #0000 0) 18.5em calc(100% - 25em) / 19em 6em,
linear-gradient(-45deg, #0000 22%, #987 0 78%, #0000 0) 18.5em calc(100% - 24.5em) / 19em 6em,
/* table back */
linear-gradient(#445 0 0) 4em calc(100% - 4em) / 40em 20em,
linear-gradient(#445 0 0) 4em calc(100% - 2em) / 2em 2.5em,
linear-gradient(#445 0 0) 42em calc(100% - 2em) / 2em 2.5em,
/* table side */
linear-gradient(-45deg, #0000 35%, #334 0 66.6%, #0000 0) 43.9em calc(100% - 4em) / 20em 40em,
linear-gradient(-45deg, #0000 25%, #334 0 66.6%, #00.........完整代码请登录后点击上方下载按钮下载查看
网友评论0