css布局实现一个卡通可爱恐龙走路动画效果代码
代码语言：html
所属分类：动画
代码描述：css布局实现一个卡通可爱恐龙走路动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html {
box-sizing: border-box ;
--gray : #f1f1f1 ;
--lightGray : #c2c2c2 ;
--green : #466b21 ;
--lightGreen : #669933 ;
--shadow : #2a2d2733 ;
--darkGreen : #2f4717 ;
--black : #010101 ;
--duration-head: .64s cubic-bezier(0.18, 0.89, 0.32, 1.28);
--duration-body: .18s cubic-bezier(0.6, -0.28, 0.74, 0.05);
--duration-leg: .64s linear;
--duration-tail: .36s cubic-bezier(0.54, 0.03, 0, 0.96);
--duration-shadow: .36s cubic-bezier(0.54, 0.03, 0, 0.96);
}
html *,
html *::before,
html *::after {
box-sizing: inherit ;
}
body {
margin: 0 ;
height: 100vh ;
display: flex ;
overflow: hidden ;
align-items: center ;
justify-content: center ;
background-color: var(--gray) ;
}
body * {
position: absolute ;
}
body *::before,
body *::after {
content: "" ;
position: absolute ;
}
.chameleon {
width: 14em ;
height: 12em ;
}
.chameleon::after {
top: 89% ;
width: 10em ;
left: 3% ;
height: 0.5em ;
background-color: var(--lightGray) ;
animation: shadow var(--duration-shadow) infinite ;
}
.chameleon__head {
top: 19% ;
left: 50% ;
width: 6em ;
height: 6em ;
z-index: 100 ;
border-radius: 50%;
animation: head var(--duration-head) infinite ;
}
.chameleon__face {
width: 100% ;
height: 100% ;
border-radius: inherit ;
background-color: var(--green);
}
.chameleon::before,
.chameleon__face::after {
border-radius: 50% ;
animation: var(--duration-head) infinite ;
}
.chameleon::before {
width: 4em ;
height: 4em ;
z-index: -100 ;
animation-name: eye-b ;
background-color: var(--lightGreen) ;
}
.chameleon__face::after {
top: 2% ;
width: 4.5em ;
height: 4.5em ;
animation-name: eye-f ;
background-repeat: no-repeat;
background-image :
radial-gradient(.5em .5em at center center , var(--gray) 37%, transparent 51%) ,
radial-gradient(1.8em 1.8em at center center , var(--black) 47%, transparent 51%) ,
radial-gradient(4em 4em at center center , var(--lightGreen) 49%, transparent 50%) ;
background-size :
1.5em 1.5em ,
3em 3em ,
4.5em 4.5em ;
background-position :
-9% 34% ,
-53% 24% ,
center center ;
}
.chameleon__body {
top: 18%;
left: 9.1%;
width: 10em;
height: 8em;
animation: shake var(--duration-body) infinite alternate;
}
.chameleon__tummy {
top: 54% ;
left: 31% ;
width: 6em ;
height: 3.3em ;
border-radius: 50% ;
background-color: var(--green) ;
}
.chameleon__tummy::before {
top: -1% ;
left: -5% ;
width: 2em ;
height: 2.6em ;
transform: rotate(13deg) ;
background-color: var(--green) ;
box-shadow: 1.4em -1.5em 0 0 var(--green), 2.7em -2.7em 0 0 var(--green) ;
}
.chameleon__tummy::after{
top: 2.4% ;
right: 59% ;
z-index: -50 ;
width: 9.6em ;
height: 4.3em ;
transform: rotate(-12deg) ;
border-radius: 0 0 50% 50% ;
border: 0.3125em solid var(--gray) ;
}
.chameleon__tail {
top: -1% ;
right: 59% ;
z-index: -50 ;
width: 9.6em ;
height: 4.2em ;
overflow: hidden ;
transform: rotate(-12deg) ;
border-radius: 0 0 50% 50% ;
}
.chameleon__tail::before {
left: 0 ;
top: 47.4% ;
width: 100% ;
height: 77% ;
background-color: var(--green) ;
}
.chameleon__tail::after {
width: 89% ;
height: 83% ;
border-radius: 50% ;
background-color: var(--gray) ;
transform: rotate(-18deg) translate3d(-12%, 0% ,0) ;
animation: tail var(--duration-tail) infinite ;
}
.chameleon__leg-front {
top: 66% ;
left: 60% ;
width: 4em ;
height: 3em ;
z-index: -5 ;
}
.chameleon__leg-front::before,
.chameleon__leg-front::after {
width: 1.2em ;
height: 4em ;
background-repeat: no-repeat ;
animation: var(--duration-leg) infinite ;
}
.chameleon__leg-front::before {
animation-name: leg-2 ;
}
.chameleon__leg-front::after {
animation-name: leg-1 ;
}
.chameleon__leg-back {
top: 66% ;
left: 40% ;
z-index: -5 ;
height: 3em ;
width: 2.5em ;
}
.chameleon__leg-back::before,
.chameleon__leg-back::after {
width: 1.2em ;
height: 2.2em ;
animation: var(--duration-leg) infinite ;
}
.chameleon__leg-back::before {
animation-name: leg-4 ;
background-color: var(--darkGreen) ;
}
.chameleon__leg-back::after {
animation-name: leg-3 ;
background-color: var(--green) ;
}
@keyframes head {
0%, 100% {
width: 5.85em ;
box-shadow: unset ;
transform: translate3d(21% , 1%, 0) ;
}
5%{
transform: translate3d(27% , 5%, 0) ;
}
10%{
transform: translate3d(14% , 2%, 0) ;
box-shadow: -6px 6px 2px -6px var(--shadow) ;
}
17%{
width: 5.9em ;
transform: translate3d(7% , -1%, 0) ;
box-shadow: -12px 11px 2px -9px var(--shadow) ;
}
25%{
width: 5.9em ;
transform: translate3d(2% , -2%, 0) ;
box-shadow: -11px 13px 2px -9px var(--shadow) ;
}
30%, 40%{
width: 5.9em ;
transform: translate3d(0 , -2%, 0) ;
box-shadow: -11px 13px 2px -9px var(--shadow) ;
}
50%{
width: 5.9em ;
transform: translate3d(6% , 0%, 0) ;
box-shadow: -11px 13px 2px -9px var(--shadow) ;
}
60%{
width: 5.9em ;
box-shadow: unset ;
transform: translate3d(15% , -1%, 0) ;
}
75%{
width: 5.9em ;
box-shadow: unset ;
transform: translate3d(14% , -3%, 0) ;
}
80%, 90%{
width: 5.9em ;
box-shadow: unset ;
transform: translate3d(14% , -2%, 0) ;
}
}
@keyframes eye-b {
0%, 100%{
transform: translate3d(241% , 50%, 0) ;
}
5%{
transform: translate3d(277% , 86%, 0) ;
}
10%{
transform: translate3d(260% , 84%, 0) ;
}
17%{
transform: translate3d(242% , 64%, 0) ;
}
25%{
transform: translate3d(234% , 52%, 0) ;
}
30%{
transform: translate3d(231% , 45%, 0) ;
}
40%{
transform: translate3d(233% , 44%, 0) ;
}
50%{
transform: translate3d(238% , 48%, 0) ;
}
60%{
transform: translate3d(205% , 56%, 0) ;
}
75%{
transform: translate3d(215% , 52%, 0) ;
}
80%{
transform: translate3d(189% , 48%, 0) ;
}
85%{
transform: translate3d(181% , 46%, 0) ;
}
90%{
transform: translate3d(198% , 53%, 0) ;
}
}
@keyframes eye-f {
0%, 100%{
background-position :
40% 22% ,
55% 23% ,
center center ;
transform: translate3d(27% , -18%, 0) ;
}
5%{
background-position :
16% 38% ,
19% 41% ,
center center ;
transform: translate3d(2% , -13%, 0) ;
}
10%{
background-position :
8% 38% ,
6% 36% ,
center center ;
transform: translate3d(2% , -13%, 0) ;
}
17%{
background-position :
-1% 38% ,
-14% 40% ,
center center ;
transform: translate3d(2% , -13%, 0) ;
}
25%{
background-position :
-4% 36% ,
-17% 36% ,
center center ;
transform: translate3d(-8% , -3%, 0) ;
}
30%, 40%{
background-position :
-5% 36% ,
-19% 32% ,
center center ;
transform: translate3d(-14% , 4%, 0) ;
}
50%{
background-position :
-5% 37% ,
-21% 32% ,
center center ;
transform: translate3d(-18% , 6%, 0) ;
}
60%{
background-position :
45% 21% ,
74% 14% ,
center center ;
transform: translate3d(1% , -13%, 0) ;
}
75%{
background-position :
59% 11% ,
93% 0% ,
center center ;
transform: translate3d(12% , -14%, 0) ;
}
80%.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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