토끼 야,빨리 뛰 어.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
background:#e2b29f;
font-size:120%;
padding:100px;
}
.rabbit {
width:5em;
height:3em;
background:#ffffff;
border-radius:70% 90% 60% 50%;
position:relative;
box-shadow: -0.2em 1em 0 -0.75em #b78e81;
-webkit-transform: rotate(0deg) translate(-2em,0);
-webkit-animation: hop 1s infinite linear;
z-index:1;
}
.rabbit:before {
content:"";
position:absolute;
width:1em;
height:1em;
background:white;
border-radius:100%;
top:0.5em;
left:-0.3em;
box-shadow:
4em 0.4em 0 -0.35em #3f3334,
0.5em 1em 0 white,
4em 1em 0 -0.3em white,
4em 1em 0 -0.3em white,
4em 1em 0 -0.4em white;;
-webkit-animation: kick 1s infinite linear;
}
.rabbit:after {
content:"";
position:absolute;
width:.75em;
height:2em;
background:white;
border-radius:50% 100% 0 0;
-webkit-transform: rotate(-30deg);
right:1em;
top:-1em;
border-top:1px solid #f7f5f4;
border-left: 1px solid #f7f5f4;
box-shadow:-0.5em 0em 0 -0.1em white;
}
.clouds {
background:white;
width:2em;
height:2em;
border-radius:100% 100% 0 0;
position:relative;
top:-5em;
opacity(0);
-webkit-transform: translate(0,0);
-webkit-animation: cloudy 1s infinite linear forwards;
box-shadow:5em 2em 0 -0.3em white, -2em 2em 0 0 white;
}
.clouds:before,:after {
content:'';
position:absolute;
box-shadow:5em 2em 0 -0.3em white, -2em 2em 0 0 white;
}
.clouds:before {
width:1.25em;
height:1.25em;
border-radius:100% 100% 0 100%;
background:white;
left:-30%;
bottom:0;
}
.clouds:after {
width:1.5em;
height:1.5em;
border-radius:100% 100% 100% 0;
background:white;
right:-30%;
bottom:0;
}
@-webkit-keyframes hop {
20% {
-webkit-transform: rotate(-10deg) translate(1em,-2em);
box-shadow: -0.2em 3em 0 -1em #b78e81;
}
40% {
-webkit-transform: rotate(10deg) translate(3em,-4em);
box-shadow: -0.2em 3.25em 0 -1.1em #b78e81;
}
60%,75% {
-webkit-transform: rotate(0) translate(4em,0);
box-shadow: -0.2em 1em 0 -0.75em #b78e81;
}
}
@-webkit-keyframes kick {
20%,50% {
box-shadow:
4em 0.4em 0 -0.35em #3f3334,
0.5em 1.5em 0 white,
4em 1.75em 0 -0.3em white,
4em 1.75em 0 -0.3em white,
4em 1.9em 0 -0.4em white;
}
40% {
box-shadow:
4em 0.4em 0 -0.35em #3f3334,
0.5em 2em 0 white,
4em 1.75em 0 -0.3em white,
4.2em 1.75em 0 -0.2em white,
4.4em 1.9em 0 -0.2em white;
}
}
@-webkit-keyframes cloudy {
40% {
opacity(0.75);
-webkit-transform: translate(-3em,0);
}
55% {
opacity: 0;
-webkit-transform: translate(-4em,0);
}
90% {
-webkit-transform: translate(0,0);
}
}
</style>
</head>
<body>
<div class="rabbit">
</div>
<div class="clouds">
</div>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.