css布局实现一个哈利波特卡通人物效果代码
代码语言：html
所属分类：布局界面
代码描述：css布局实现一个哈利波特卡通人物效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
:root {
--bg: #f1eee3;
--hair-top: #6c524b;
--hair-right: #000001;
--hair-left: #200c06;
--hair-bottom: #4a2e2a;
--skin-one: #fedbc3;
--skin-two: #ed8f6f;
--scar: #e5aa9c;
--eyeball-one: #183943;
--eyeball-two: #356c72;
--eyebrow: #56361a;
--eye-one: #eef1f5;
--eye-two: #d2cfdc;
--nose-one: #f6c1a3;
--nose-two: #e69579;
--mouth: #d19183;
--cheek: #f8b0ab;
--glasses-one: #1d1917;
--glasses-two: #514f52;
--glasses-bridge: #6d6d71;
--glass: #ffe4d0;
--tie-one: #c13422;
--tie-two: #851312;
--collar-one: #f2923f;
--collar-two: #af2c12;
--badge: #d1701c;
--wand-one: #6e4e2e;
--wand-two: #bdab91;
--wand-glow: #85cade;
--gown-collar: #929499;
--gown: #343436;
--white: #ffffff;
--black: #000000;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg);
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.harry {
position: relative;
}
.eye-left,
.eye-right {
position: absolute;
width: 3.6rem;
height: 3.8rem;
border-radius: 50%;
background-color: var(--eye-one);
box-shadow: inset 0.1rem -0.15rem 0.55rem 0.01rem var(--eye-two),
0rem -0.1rem 0.15rem 0.01rem var(--skin-one),
-0.1rem -0.2rem 0.15rem 0.1rem #f4c9b1,
-0.1rem 0.1rem 0.2rem 0.01rem #f9ddcf,
inset 0.01rem 0.1rem 0.1rem 0.01rem rgba(0, 0, 0, 0.5);
filter: blur(0.025rem);
}
.eye-left {
left: -4rem;
}
.eye-right {
left: 6.5rem;
}
.eye-left::after,
.eye-right::after {
content: "";
position: absolute;
width: 3.6rem;
height: 3.8rem;
border-radius: 50%;
}
.eye-left::after {
box-shadow: inset 0.1rem 0.5rem 0.05rem 0.01rem var(--black);
}
.eye-right::after {
box-shadow: inset 0.03rem 0.5rem 0.05rem 0.01rem var(--black);
}
.eye-left::before,
.eye-right::before {
position: absolute;
content: "";
width: 2.01rem;
height: 2.5rem;
background-image: linear-gradient(
30deg,
var(--eyeball-two) 15%,
var(--eyeball-one) 50%,
var(--black)
);
border-radius: 50%;
transform: rotate(-17deg);
left: 1.55rem;
top: 0.35rem;
filter: blur(0.01rem);
}
.eye-glass-left,
.eye-glass-right {
position: absolute;
width: 2.5rem;
height: 5.5rem;
border-radius: 50%;
background-color: var(--glass);
transform: rotate(45deg);
top: -3.7rem;
left: -6rem;
filter: blur(0.025rem);
opacity: 0.9;
}
.eye-glass-right {
transform: rotate(-205deg) scale(-1);
left: 4.7rem;
top: -0.1rem;
z-index: -1;
}
.eye-glass-left::after,
.eye-glass-right::after {
content: "";
position: absolute;
width: 2.4rem;
height: 6.5rem;
border-radius: 50%;
background-color: var(--skin-one);
top: -0.45rem;
left: 0.35rem;
}
.eye-glass-right::after {
top: -0.55rem;
left: 0.45rem;
}
.glasses-left,
.glasses-right {
position: absolute;
width: 10.5rem;
height: 10.5rem;
border-radius: 50%;
border: 0.3rem solid var(--glasses-two);
top: -4rem;
}
.glasses-left {
left: -8.1rem;
box-shadow: 0rem 0rem 0.07rem 0.25rem var(--glasses-one),
0rem 0.2rem 0.2rem 0.1rem var(--skin-one), 0rem 0.5rem 0.1rem 0.2rem #f1c3a8,
inset 0.1rem 0.1rem 0.3rem 0.01rem var(--skin-one),
inset 0.2rem 0.2rem 0.1rem 0.1rem #f1c3a8;
}
.glasses-right {
left: 3.7rem;
box-shadow: 0rem 0rem 0.07rem 0.25rem var(--glasses-one),
0rem 0.2rem 0.2rem 0.1rem var(--skin-one), 0rem 0.5rem 0.1rem 0.2rem #f1c3a8,
inset -0.1rem 0.1rem 0.3rem 0.01rem var(--skin-one),
inset -0.2rem 0.2rem 0.1rem 0.1rem #f1c3a8;
}
.glasses-left::after,
.glasses-right::after {
content: "";
position: absolute;
width: 10.4rem;
height: 10.4rem;
border-radius: 50%;
border: 0.1rem solid var(--glasses-two);
left: -0.35rem;
top: -0.35rem;
box-shadow: 0 0 0.1rem 0.05rem var(--glasses-two),
inset 0 0 0.1rem 0.1rem var(--glasses-two);
}
.glasses-bridge {
position: absolute;
width: 1.2rem;
height: 0.6rem;
background-color: var(--glasses-bridge);
filter: blur(0.01rem);
top: 1.3rem;
left: 2.5rem;
z-index: -1;
}
.nose {
position: absolute;
width: 2.15rem;
height: 1.6rem;
border-radius: 50%;
background-color: var(--nose-one);
box-shadow: inset 0rem -0.5rem 0.5rem 0.1rem var(--nose-two);
top: 3.2rem;
left: 1.97rem;
filter: blur(0.025rem) drop-shadow(0 0.3rem 0.1rem #e2c0ad);
}
.mouth {
position: absolute;
width: 2.9rem;
height: 1.1rem;
border-bottom: 0.35rem solid var(--mouth);
border-radius: 0 0 50% 50%/0 0 40% 40%;
top: 6.2rem;
left: 1.65rem;
filter: blur(0.025rem);
}
.eyebrow {
position: absolute;
width: 4.2rem;
height: 1rem;
border-radius: 100% 138% 75% 100%/190% 190% 45% 50%;
background-color: var(--eyebrow);
top: -5.5rem;
left: -5.7rem;
transform: rotate(-12deg);
filter: blur(0.02rem);
}
.cheek-left,
.cheek-right {
position: absolute;
width: 3.8rem;
height: 2.3rem;
border-radius: 50%;
background-color: var(--cheek);
top: 3.8rem;
z-index: -1;
filter: blur(0.8rem);
}
.cheek-left {
left: -6.1rem;
}
.cheek-right {
left: 8.2rem;
}
.glasses-hand-left,
.glasses-hand-right {
position: absolute;
width: 3.3rem;
height: 0.6rem;
border-radius: 3rem;
background-color: var(--glasses-two);
z-index: -1;
}
.glasses-hand-left {
top: -0.1rem;
left: -11.1rem;
transform: rotate(20deg);
filter: blur(0.032rem);
box-shadow: inset -0.5rem -0.1rem 0.3rem 0.03rem var(--glasses-one);
}
.glasses-hand-right {
top: -0.2rem;
left: 14rem;
transform: rotate(-20deg);
filter: blur(0.032rem);
box-shadow: inset 0.5rem -0.1rem 0.3rem 0.03rem var(--glasses-one);
}
.scar {
position: absolute;
width: 1rem;
border-left: 0.5rem solid var(--scar);
border-top: 2rem solid transparent;
border-bottom: 0.7rem solid transparent;
top: -10.1rem;
left: -4rem;
transform: rotate(-5deg);
filter: blur(0.025);
}
.scar::before {
content: "";
position: absolute;
background-color: var(--scar);
width: 1.2rem;
height: 0.3rem;
transform: rotate(-45deg) skew(-58deg);
left: -0.6rem;
top: -0.2rem;
}
.scar::after {
content: "";
position: absolute;
border-right: 0.4rem solid var(--scar);
border-bottom: 1.5rem solid transparent;
border-top: 0.5rem solid transparent;
left: 0.2rem;
top: -0.85rem;
transform: rotate(-3deg);
}
.head {
position: absolute;
width: 28rem;
height: 26.5rem;
border-radius: 50%;
background-color: var(--skin-one);
box-shadow: inset 0rem -0.5rem 3rem 0.01rem var(--skin-two);
z-index: -2;
left: -11rem;
top: -16rem;
filter: blur(0.04rem);
}
.tie {
position: absolute;
width: 0.6rem;
height: 1.02rem;
border-radius: 40%;
background-color: var(--tie-one);
top: 10.2rem;
left: 2.85rem;
box-shadow: inset 0rem -0.2rem 0.025rem 0.1rem var(--tie-two);
z-index: -3;
filter: blur(0.03rem);
}
.tie::after,
.tie::before {
content: "";
position: absolute;
width: 0.5rem;
height: 1.1rem;
border-radius: 40%;
background-color: var(--tie-one);
top: -0.05rem;
}
.tie::after {
left: -0.25rem;
transform: rotate(-31deg);
box-shadow: inset 0.05rem 0rem 0.07rem 0.01rem var(--tie-two);
}
.tie::before {
left: 0.35rem;
transform: rotate(31deg);
box-shadow: inset -0.05rem 0rem 0.07rem 0.01rem var(--tie-two);
}
.tie-bottom {
position: absolute;
border-left: 0.3rem solid transparent;
border-right: 0.3rem solid transparent;
border-bottom: 1.5rem solid var(--tie-one);
top: 10.98rem;
left: 2.62rem;
z-index: -4;
width: 1.05rem;
filter: blur(0.03rem);
}
.tie-bottom::after,
.tie-bottom::before {
content: "";
position: absolute;
width: 0.4rem;
height: 1.5rem;
}
.tie-bottom::after {
box-shadow: inset 0.08rem -0.05rem 0.12rem 0.01rem var(--tie-two);
transform: rotate(13deg);
left: -0.15rem;
}
.tie-bottom::before {
box-shadow: inset -0.08rem -0.05rem 0.12rem 0.01rem var(--tie-two);
transform: rotate(-13deg);
left: 0.22rem;
}
.shirt {
position: absolute;
width: 3.2rem;
height: 3.2rem;
transform: rotate(44deg);
background-color: var(--white);
top: 8.75rem;
left: 1.6rem;
z-index: -5;
box-shadow: inset -0.1rem -0.1rem 0.8rem 0.01rem #c8d2e5,
inset -0.05rem -0.05rem 0.3rem 0.2rem var(--white);
}
.collar {
position: absolute;
width: 3.4rem;
height: 3.4rem;
transform: rotate(45deg);
top: 8.5rem;
left: 1.45rem;
border: 0.11rem solid var(--collar-two);
z-index: -3;
filter: blur(0.025rem);
}
.collar::before {
content: "";
position: absolute;
width: 3.6rem;
height: 3.6rem;
top: -0.6rem;
left: -0.6rem;
border: 0.27rem solid var(--collar-one);
filter: blur(0.025rem);
}
.collar::after {
content: "";
position: absolute;
width: 4rem;
height: 4rem;
top: -0.65rem;
left: -0.65rem;
border: 0.11rem solid var(--collar-two);
filter: blur(0.025rem);
}
.gown-collar {
position: absolute;
width: 8rem;
height: 7.5rem;
background-color: var(--gown-collar);
top: 5.2rem;
left: -0.8rem;
transform: rotate(55deg) skew(20deg);
z-index: -6;
box-shadow: inset -0.3rem 0.5rem 1.6rem 0.2rem rgba(0, 0, 0, 0.15),
inset 0.3rem -0.5rem 1.6rem 0.2rem rgba(0, 0, 0, 0.15);
filter: blur(0.025rem);
}
.gown {
position: absolute;
width: 5rem;
height: 15.4rem;
z-index: -7;
background-color: var(--gown);
border-radius: 15% 0 0 100%/63% 0 0 10%;
box-shadow: inset 0.1rem 1rem 0.7rem 0.01rem rgb(255 255 255 / 20%);
transform: rotate(8deg);
top: 9rem;
left: -2.6rem;
filter: blur(0.025rem);
}
.gown-part-two {
transform: scaleX(-1) rotate(7deg);
left: 3.9rem;
top: 9.05rem;
filter: blur(0.025rem);
}
.gown-part-two::after {
content: "";
position: absolute;
width: 5rem;
height: 11rem;
z-index: -7;
background-color: var(--gown);
top: 4.22rem;
left: 3.78rem;
transform: rotate(-8deg);
border-radius: 0 0 27% 18%/0 0 5% 4%;
}
.foot {
position: absolute;
border-right: 2.8em solid var(--gown);
border-left: 0.4rem solid transparent;
border-top: 2.1rem solid var(--gown);
filter: blur(0.025rem);
}
.foot-left {
top: 23.6rem;
left: -0.3rem;
}
.foot::after {
content: "";
position: absolute;
width: 3.6rem;
height: 1.4rem;
border-radius: 71% 50% 35% 50%/70% 50% 65% 50%;
background-color: var(--gown);
top: -0.5rem;
left: -0.78rem;
transform: rotate(-9deg);
}
.foot-right {
transform: scaleX(-1);
top: 23.6rem;
left: 3.3rem;
}
.sleeve-left {
position: absolute;
width: 5rem;
height: 10rem;
background-color: var(--gown);
border-radius: 67% 0 0% 10%/90% 0 0% 14%;
box-shadow: inset 0.3rem 0.1rem 1.5rem 0.1rem rgb(255 255 255 / 30%);
top: 8rem;
left: -4.5rem;
transform: rotate(19deg);
filter: blur(0.025rem);
z-index: -8;
}
.paw-left {
position: absolute;
width: 2.8rem;
height: 2.5rem;
border-radius: 50%;
background-image: linear-gradient(30deg, var(--skin-two) 2%, var(--skin-one));
top: 17rem;
left: -4.6rem;
filter: blur(0.025rem);
z-index: -9;
}
.sleeve-right,
.sleeve-right-hide {
position: absolute;
width: 9.7rem;
height: 5rem;
border-radius: 0% 0% 49% 50%/0% 50% 59% 0%;
border: 0.3rem solid;
border-color: transparent transparent var(--gown) transparent;
z-index: -8;
top: 10.7rem;
left: 4.3rem;
transform: rotate(34deg);
filter: blur(0.025rem);
}
.sleeve-right::before {
content: "";
position: absolute;
width: 11rem;
height: 8rem;
border-radius: 10% 4% 22% 10%/10% 24% 73% 10%;
top: -0.8rem;
left: -2.6rem;
transform: rotate(-39deg);
background-image: linear-gradient(to top right, var(--gown) 45%, #535255);
}
.sleeve-right::after {
content: "";
position: absolute;
width: 6.6rem;
height: 2.1rem;
border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
background-color: var(--bg);
top: -3rem;
left: -0.7rem;
transform: rotate(-30deg);
}
.sleeve-right-hide {
border-color: transparent transparent var(--gown) transparent;
width: 8.7rem;
height: 5rem;
top: 11rem;
left: 5.95rem;
transform: rotate(39deg);
}
.sleeve-right-hide::after {
content: "";
position: absolute;
background-color: var(--bg);
width: 4rem;
height: 2rem;
top: 4.5rem;
left: 4rem;
transform: rotate(-10deg);
filter: blur(0.025rem);
}
.sleeve-right-hide::before {
content: "";
position: absolute;
background-color: var(--bg);
width: 2rem;
height: 1rem;
top: 3.1rem;
left: 6.25rem;
transform: rotate(-80deg);
filter: blur(0.025rem);
}
.paw-right {
position: absolute;
width: 2.7rem;
height: 4.5rem;
border-radius: 2rem;
background-image: linear-gradient(
to top left,
var(--skin-two) 5%,
var(--skin-one)
);
transform: rotate(78deg);
top: 8.95rem;
left: 11.1rem;
filter: blur(0.025rem);
z-index: -9;
}
.wand {
position: absolute;
width: 8.5rem;
height: 0.65rem;
background-image: linear-gradient(to right, var(--wand-one), var(--wand-two));
border-radius: 1.5rem;
top: 8.9rem;
left: 12.9rem;
transform: rotate(-27deg);
filter: blur(0.025rem);
}
.wand::after {
content: "";
position: absolute;
width: 0.75rem;
height: 0.75rem;
background-color: var(--white);
box-shadow: 0 0 1.4rem 1.1rem var(--wand-glow),
inset 0 0 0.25rem 0.01rem var(--wand-glow);
border-radius: 50%;
top: -0.05rem;
left: 7.8rem;
filter: blur(0.05rem);
}
.badge,
.badge::after {
position: absolute;
width: 0.6rem;
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0