div+css布局绘制夏日女孩效果代码
代码语言：html
所属分类：布局界面
代码描述：div+css布局绘制夏日女孩效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html,
body {
width: 100%;
height: 100%;
background: #fff;
overflow: hidden;
}
html *,
body * {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
box-sizing: border-box;
}
html *:before, html *:after,
body *:before,
body *:after {
content: "";
position: absolute;
}
.circle {
width: 89.7vmin;
height: 89.7vmin;
background: #dd654a;
top: 3.2vmin;
left: 10.9vmin;
border-radius: 50%;
}
.hat-1 {
width: 33vmin;
height: 12vmin;
background: #ac2b2c;
top: -51vmin;
left: 6.4vmin;
border-radius: 57% 43% 0 100%/100% 95% 5% 0;
}
.hat-1::before {
width: 14vmin;
height: 4vmin;
background: #dd654a;
top: 2.4vmin;
left: 21.5vmin;
transform: rotate(40deg);
}
.hat-1::after {
width: 16.5vmin;
height: 8.8vmin;
background: #fff;
top: 2.2vmin;
left: 17.7vmin;
transform: rotate(40deg);
border-radius: 50%;
}
.hat-2 {
width: 15vmin;
height: 8vmin;
background: #fff;
top: -51vmin;
left: 23.4vmin;
transform: rotate(30deg);
border-radius: 50%;
}
.hat-2::before {
width: 3vmin;
height: 1vmin;
background: #fff;
top: 2.1vmin;
left: -0.65vmin;
transform: rotate(-64deg);
border-radius: 50%;
}
.hat-3 {
width: 68vmin;
height: 20vmin;
background: #fff;
top: -28.2vmin;
left: 13.4vmin;
transform: rotate(1deg);
border-radius: 50%;
}
.hat-3::before {
width: 12vmin;
height: 16.4vmin;
background: #fff;
top: 4.5vmin;
left: 58.5vmin;
transform: rotate(-42deg);
border-radius: 50%;
}
.hat-3::after {
width: 7vmin;
height: 1vmin;
background: #fff;
top: 5.5vmin;
left: 61vmin;
transform: rotate(28deg);
border-radius: 50%;
}
.hat-4 {
width: 12vmin;
height: 3vmin;
background: #fff;
top: -6.2vmin;
left: 81.4vmin;
transform: rotate(-60deg);
border-radius: 50%;
}
.hat-4::before {
width: 23vmin;
height: 3vmin;
background: #fff;
top: -2.5vmin;
left: -17.4vmin;
transform: rotate(18.2deg);
border-radius: 50%;
}
.hat-4::after {
width: 28vmin;
height: 20vmin;
background: #fff;
top: -20vmin;
left: -15vmin;
transform: rotate(10deg);
border-radius: 0 0 20% 30%;
}
.hat-5 {
width: 25vmin;
height: 35vmin;
background: #fff;
top: -7.2vmin;
left: -44.3vmin;
transform: rotate(29deg);
border-radius: 50%;
}
.hair-1 {
width: 35.5vmin;
height: 19.2vmin;
background: #11122e;
top: -13.9vmin;
left: 17.8vmin;
transform: rotate(-5deg) skewX(-11deg);
border-radius: 50%;
}
.hair-1::before {
width: 25vmin;
height: 14vmin;
background: #11122e;
top: 0.4vmin;
left: 11.1vmin;
transform: rotate(10deg);
border-radius: 50%;
}
.hair-1::after {
width: 10vmin;
height: 18vmin;
background: #11122e;
top: 4.8vmin;
left: 25.8vmin;
transform: rotate(20deg);
border-radius: 50%;
}
.hair-2 {
width: 20vmin;
height: 30vmin;
background: #11122e;
top: 33vmin;
left: 34.2vmin;
border-radius: 50%;
}
.hair-2::before {
width: 10vmin;
height: 14vmin;
background: #11122e;
top: -6vmin;
left: 9vmin;
transform: rotate(5deg);
}
.hair-2::after {
width: 8vmin;
height: 15vmin;
background: #fff;
top: -5.8vmin;
left: 17.5vmin;
transform: rotate(2deg);
border-radius: 50%;
}
.hair-3 {
width: 2vmin;
height: 5vmin;
background: #fff;
top: -4vmin;
left: 53.7vmin;
transform: rotate(20deg);
}
.hair-3::before {
width: 3vmin;
height: 15vmin;
background: #11122e;
top: 3.8vmin;
left: -34.9vmin;
transform: rotate(18deg);
border-radius: 50%;
}
.hair-3::after {
width: 30vmin;
height: 40vmin;
background: #11122e;
top: 10vmin;
left: -39.3vmin;
transform: rotate(20deg);
}
.hair-4 {
width: 10vmin;
height: 10vmin;
background: #11122e;
top: -2vmin;
left: -22vmin;
transform: rotate(45deg);
border-radius: 20% 0 0 0;
}
.hair-4::before {
width: 4vmin;
height: 12vmin;
background: #fff;
top: -2.2vmin;
left: -2.7vmin;
transform: rotate(20deg);
border-radius: 50%;
}
.hair-4::after {
width: 10vmin;
height: 25vmin;
background: #11122e;
top: 5vmin;
left: -0.2vmin;
transform: rotate(-13.8deg);
border-radius: 50%;
}
.hair-5 {
width: 23vmin;
height: 40vmin;
background: #2b2869;
top: 40vmin;
left: -50vmin;
transform: rotate(41.5deg);
border-radius: 50%;
}
.hair-5::before {
width: 10vmin;
height: 30vmin;
background: #2b2869;
top: 20vmin;
left: 5vmin;
transform: rotate(-35deg);
border-radius: 50%;
}
.hair-5::after {
width: 10vmin;
height: 26vmin;
background: #2b2869;
top: 35vmin;
left: 9vmin;
transform: rotate(-5deg);
border-radius: 0 0 0 43%;
}
.hair-6 {
width: 6vmin;
height: 20vmin;
background: #fff;
top: 78.8vmin;
left: -96.8vmin;
transform: rotate(43deg);
border-radius: 50%;
}
.hair-6::before {
width: 5vmin;
height: 10vmin;
background: #fff;
top: 8.5vmin;
left: 1.2vmin;
transform: rotate(-5deg);
}
.hair-6::after {
width: 10vmin;
height: 13vmin;
background: #2b2869;
top: 5vmin;
left: 10vmin;
}
.hair-7 {
width: 22vmin;
height: 40vmin;
background: #11122e;
top: 34.4vmin;
left: -40.2vmin;
transform: rotate(34deg);
border-radius: 50%;
}
.hair-7::before {
width: 10vmin;
height: 20vmin;
background: #11122e;
top: 29vmin;
left: 7.5vmin;
}
.hair-7::after {
width: 8.5vmin;
height: 20vmin;
background: #2b2869;
top: 39.9vmin;
left: 2.9vmin;
transform: rotate(15deg) skewY(15deg);
border-radius: 0 7vmin 0 100%;
}
.hair-8 {
width: 10vmin;
height: 20vmin;
background: #11122e;
top: 90vmin;
left: -63.9vmin;
transform: rotate(39deg);
border-radius: 0 0 0 6.1vmin;
}
.hair-8::before {
width: 30vmin;
height: 45vmin;
background: #11122e;
top: -25vmin;
left: 2vmin;
border-radius: 0 40% 100% 30%;
}
.face-1 {
width: 3vmin;
height: 18vmin;
background: #e6a575;
top: -11vmin;
left: 43.2vmin;
transform: rotate(8deg);
border-radius: 50%;
}
.face-1::before {
width: 5vmin;
height: 20vmin;
background: #e6a575;
top: 12vmin;
left: -4.5vmin;
transform: rotate(20deg);
border-radius: 0 0 20% 50%;
}
.face-1::after {
width: 10vmin;
height: 10vmin;
background: #e6a575;
top: 3vmin;
left: -8vmin;
}
.face-2 {
width: 12vmin;
height: 6vmin;
background: #11122e;
top: -24.9vmin;
left: 34vmin;
transform: rotate(-1.5deg);
border-radius: 50%;
}
.face-2::before {
width: 5.5vmin;
height: 3.5vmin;
background: #11122e;
top: 1vmin;
left: 7.8vmin;
transform: rotate(-45deg);
border-radius: 50%;
}
.face-2::after {
width: 1.5vmin;
height: 12vmin;
background: #11122e;
top: 20.2vmin;
left: 5.4vmin;
transform: rotate(30deg);
border-radius: 50%;
}
.face-3 {
width: 20vmin;
height: 18vmin;
background: #e6a575;
top: 0.3vmin;
left: 21.1vmin;
transform: rotate(-15deg);
border-radius: 50%;
}
.face-3::before {
width: 4vmin;
height: 16vmin;
background: #e6a575;
top: 8vmin;
left: 2.45vmin;
transform: rotate(-29.5deg);
border-radius: 50%;
}
.face-3::after {
width: 5vmin;
height: 5vmin;
background: #e6a575;
top: 16vmin;
left: 6vmin;
}
.eyebrow-right {
width: 4vmin;
height: 2vmin;
background: #11122e;
top: -10.4vmin;
left: 44.5vmin;
transform: rotate(10deg);
border-radius: 1.3vmin 0 0 0;
}
.eyebrow-right::before {
width: 3.05vmin;
height: 2vmin;
background: #e6a575;
top: 1.35vmin;
left: -0.15vmin;
transform: skewY(-12deg);
}
.eyebrow-left {
width: 6vmin;
height: 2vmin;
background: #11122e;
top: -18.8vmin;
left: 30vmin;
transform: rotate(45deg) skewX(30deg);
border-radius: 0 10% 0 0;
}
.eyebrow-left::before {
width: 2vmin;
height: 2vmin;
background: #11122e;
top: 1vmin;
left: -0.5vmin;
}
.shadow-1 {
width: 5.2vmin;
height: 11vmin;
background: #ac2b2c;
top: -6.4vmin;
left: 9vmin;
transform: rotate(37deg);
border-radius: 50%;
}
.shadow-1::before {
width: 8vmin;
height: 9.5vmin;
background: #ac2b2c;
top: -3.05vmin;
left: 6.8vmin;
transform: rotate(45deg);
border-radius: 50%;
}
.shadow-1::after {
width: 7vmin;
height: 5vmin;
background: #e6a575;
top: 6.15vmin;
left: 1.6vmin;
transform: rotate(-48deg);
border-radius: 0 70% 0 0;
}
.shadow-2 {
width: 1vmin;
height: 3vmin;
background: #e6a575;
top: 1vmin;
left: 2.4vmin;
transform: rotate(-5deg);
border-radius: 15% 50% 0 0;
}
.shadow-2::before {
width: 0.5vmin;
height: 3vmin;
background: #e6a575;
top: 0.1vmin;
left: -0.1vmin;
border-radius: 50%;
}
.shadow-2::after {
width: 5.2vmin;
height: 5vmin;
background: #ac2b2c;
top: -2.6vmin;
left: 6.2vmin;
transform: rotate(40deg);
}
.shadow-3 {
width: 0.8vmin;
height: 3.4vmin;
background: #e6a575;
top: -0.5vmin;
left: 13.7vmin;
transform: rotate(-55deg);
border-radius: 50%;
}
.shadow-3::before {
width: 0.5vmin;
height: 2vmin;
background: #e6a575;
top: 2vmin;
left: 0.15vmin;
transform: rotate(4deg);
border-radius: 50%;
}
.shadow-4 {
width: 5vmin;
height: 3vmin;
background: #ac2b2c;
top: -0.6vmin;
left: 38vmin;
}
.shadow-4::before {
width: 3.5vmin;
height: 1.5vmin;
background: #e6a575;
top: 2.2vmin;
left: -0.1vmin;
transform: rotate(-30deg);
border-radius: 50%;
}
.shadow-5 {
width: 4vmin;
height: 3vmin;
background: #ac2b2c;
top: -7vmin;
left: 43.4vmin;
transform: skewX(-17deg) skewY(-1deg);
}
.shadow-5::before {
width: 2vmin;
height: 6vmin;
background: #11122e;
top: -1vmin;
left: 3.15vmin;
transform: skewX(8deg);
}
.eyewear-1 {
width: 8.7vmin;
height: 6vmin;
background: #fff;
top: -1vmin;
left: 47.4vmin;
border-radius: 50% 50% 0 0;
}
.eyewear-1::before {
width: 5.5vmin;
height: 4vmin;
background: #fff;
top: 5.5vmin;
left: 0.6vmin;
transform: skewY(-5deg) rotate(-12deg);
border-radius: 0 50% 50% 40%;
}
.eyewear-1::after {
width: 2vmin;
height: 3vmin;
background: #fff;
top: 6vmin;
transform: rotate(-37deg);
border-radius: 0 0 0 20%;
}
.eyewear-2 {
width: 1vmin;
height: 3vmin;
background: #e6a575;
top: 7.8vmin;
left: 37.6vmin;
transform: rotate(-20deg);
}
.eyewear-2::before {
width: 6.4vmin;
height: 4vmin;
background: #544ea1;
top: -3vmin;
left: 3.1vmin;
transform: rotate(20deg) skewX(3deg);
border-radius: 50% 40% 60% 0;
}
.eyewear-2::after {
width: 2vmin;
height: 7vmin;
background: #544ea1;
top: -3vmin;
left: 2.1vmin;
transform: rotate(17deg);
border-radius: 50%;
}
.eyewear-3 {
width: 5vmin;
height: 6.7vmin;
background: #544ea1;
top: 4.7vmin;
left: 48vmin;
border-radius: 0 0 100% 0;
}
.eyewear-3::before {
width: 2vmin;
height: 1vmin;
background: #544ea1;
top: 5.7vmin;
left: -0.9vmin;
transform: rotate(1deg);
border-radius: 50%;
}
.eyewear-3::after {
width: 5vmin;
height: 1.8vmin;
background: #fff;
top: -2.1vmin;
left: -4vmin;
transform: rotate(-6deg);
border-radius: 0 0 100% 0;
}
.eyewear-4 {
width: 4vmin;
height: 1.5vmin;
background: #fff;
top: -16vmin;
left: 14.1vmin;
}
.eyewear-4::before {
width: 2vmin;
height: 5vmin;
background: #11122e;
top: -2.2vmin;
left: -0.6vmin;
transform: rotate(65deg);
}
.eyewear-4::after {
width: 4vmin;
height: 1vmin;
background: #11122e;
top: -0.7vmin;
left: 1vmin;
transform: rotate(-15deg);
}
.eyewear-5 {
width: 7vmin;
height: 8vmin;
background: #fff;
top: -5.5vmin;
left: 21vmin;
transform: rotate(20deg) skewX(10deg);
border-radius: 0 0 0 100%;
}
.eyewear-5::before {
width: 5.6vmin;
height: 2.6vmin;
background: #fff;
top: 5vmin;
left: 1.7vmin;
transform: rotate(34deg);
border-radius: 50%;
}
.eyewear-5::after {
width: 3vmin;
height: 0.5vmin;
background: #fff;
top: 5.5vmin;
left: 0.9vmin;
transform: rotate(50deg);
border-radius: 50%;
}
.eyewear-6 {
width: 10vmin;
height: 5vmin;
background: #fff;
top: -14.3vmin;
left: 26vmin;
transform: rotate(25deg) skewY(-2deg);
border-radius: 40% 100% 0 35%;
}
.eyewear-6::before {
width: 3vmin;
height: 1.5vmin;
background: #fff;
top: 0.1vmin;
border-radius: 40% 0 0 0;
}
.eyewear-6::after {
width: 3vmin;
height: 1vmin;
background: #11122e;
top: -0.6vmin;
left: -1vmin;
transform: rotate(-15deg);
}
.eyewear-7 {
width: 5.5vmin;
height: 4vmin;
background: #fff;
top: 0.95vmin;
left: 26.6vmin;
border-radius: 50%;
}
.eyewear-7::before {
width: 7vmin;
height: 1.8vmin;
background: #fff;
top: -5vmin;
left: 2.7vmin;
transform: rotate(50deg);
border-radius: 50%;
}
.eyewear-7::after {
width: 6vmin;
height: 3vmin;
background: #fff;
top: 0.55vmin;
left: 1.5vmin;
transform: rotate(-28deg);
border-radius: 50%;
}
.eyewear-8 {
width: 7vmin;
height: 5vmin;
background: #fff;
top: -4vmin;
left: 30vmin;
border-radius: 0 0 40% 0;
}
.eyewear-8::before {
width: 1vmin;
height: 3vmin;
background: #fff;
top: 2vmin;
left: 6vmin;
transform: rotate(41deg);
}
.eyewear-8::after {
width: 2vmin;
height: 1vmin;
background: #fff;
top: 2.6vmin;
left: 6.5vmin;
}
.eyewear-9 {
width: 0.8vmin;
height: 0.5vmin;
background: #ac2b2c;
top: -1.8vmin;
left: 38vmin;
transform: skewY(-10deg);
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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