纯css实现一个蝙蝠侠卖萌跳舞动画效果代码
代码语言：html
所属分类：动画
代码描述：纯css实现一个蝙蝠侠卖萌跳舞动画效果代码，无div布局，都是css代码。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html{
/* ===style=== */
height: 100%;
display: flex;
overflow: hidden;
align-items: center;
box-sizing: border-box;
justify-content: center;
background-color: black;
/* ===style=== */
/* ===colors=== */
--purple: #42296b;
--yellow: #fff75a;
--pink: #8c6b8c;
--l-pink: #6f4e8e;
--cream: #f7ad94;
--d-cream: #e88473;
--d-blue: #1d1942;
--d-red: #321018;
--d-light: #f77363;
/* ===colors=== */
}
html *,
html *::before,
html *::after{
box-sizing: inherit;
}
body{
/* ===style=== */
margin: 0;
width: 34em;
height: 34em;
display: flex;
overflow: hidden;
position: relative;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-color: var(--d-light);
animation-name: body , d-light ;
animation-duration: .24s , .35s ;
animation-direction: alternate , normal ;
animation-iteration-count: infinite , infinite ;
animation-timing-function: ease-in-out , linear ;
/* ===style=== */
background-image:
/* body-r====== */
radial-gradient( 27.6em 35em at center 169% , transparent 90% , var(--purple) 90.3% , var(--purple) 94% , var(--d-light) 94.3% ) ,
/*======body-r*/
/* cape====== */
radial-gradient( circle at center 12.5% , var(--purple) 43% , transparent 43.3% ) ,
/*======cape*/
/* body====== */
radial-gradient( 27.6em 35em at center 169% , var(--yellow) 43.2% , var(--pink) 43.5% , var(--pink) 90% , transparent 92.4% ) ;
/*======body*/
background-size:
/* body-r====== */
100% 20em ,
/*======body-r
/* cape====== */
34.5em 29em ,
/*======cape*/
/* body====== */
100% 20em ;
/*======body*/
background-position:
/* body-r====== */
center 100% ,
/*======body-r*/
/* cape====== */
center 300% ,
/*======cape*/
/* body====== */
center 100% ;
/*======body*/
}
@keyframes body {
100%{
background-position:
/* body-r====== */
center 102.5% ,
/* ======body-r */
/* cape====== */
center 308% ,
/* ======cape */
/* body====== */
center 102.5% ;
/* ======body */
}
}
@keyframes d-light {
50%{
--d-light: #f77b39;
--purple: #29316b;
--pink: #637b9c;
--l-pink: #637b9c;
--d-cream: #d19388;
--cream: #e7b59c;
--d-blue: #101842;
--d-red: #28181c;
--yellow: #fffc63;
}
100%{
--d-light: #f77b39;
--purple: #353259;
--pink: #7b737b;
--l-pink: #68658b;
--d-cream: #dd8c5a;
--cream: #f7b57b;
--d-blue: #181839;
--d-red: #2c120b;
--yellow: #fff752;
}
}
body::before{
/* ===style=== */
top: 11.8%;
content: "";
width: 12.35em;
height: 24.4em;
position: absolute;
background-repeat: no-repeat;
animation: head .6s infinite linear;
/* ===style=== */
background-image:
/* brow-l-left====== */
linear-gradient( 45deg , transparent 18% , var(--l-pink) 18.5% , var(--l-pink) 20.6% , transparent 21% ) ,
/* ======brow-l-left */
/* brow-l-right====== */
linear-gradient( -45deg , transparent 18% , var(--l-pink) 18.5% , var(--l-pink) 20.6% , transparent 21% ) ,
/* ======brow-l-right */
/* brow-r-left====== */
radial-gradient( 8.375em 10.25em at center 134% , transparent 17% , var(--l-pink) 18% , var(--l-pink) 18.7% , transparent 19.2% ) ,
/* ======brow-r-left */
/* brow-r-right====== */
radial-gradient( 8.375em 10.25em at center 134% , transparent 17% , var(--l-pink) 18% , var(--l-pink) 18.7% , transparent 19.2% ) ,
/* ======brow-r-right */
/* mask-r====== */
radial-gradient( 17.8125em 22.4375em at center -89% , transparent 39.5% , var(--d-blue) 40% , var(--d-blue) 45% ,transparent 45.5% ) ,
/* ======mask-r */
/* mask-r-2====== */
radial-gradient( 15.125em 18.0625em at center -50.5% , transparent 42.5% , var(--d-blue) 43% ,var(--d-blue) 46.5% , transparent 47% ) ,
/* ======mask-r-2 */
/* nose-l====== */
radial-gradient( 39.4375em 13.6875em at 716% -83% , var(--d-blue) 41% , transparent 41.5% ) ,
/* ======nose-l */
/* nose-r====== */
radial-gradient( 39.4375em 13.6875em at -613% -83% , var(--d-blue) 41% , transparent 41.5% ) ,
/* ======nose-r */
/* mask-r-shasow====== */
radial-gradient( 15.125em 18.0625em at center -50.5% , transparent 42.5% , var(--d-cream) 43% ,var(--d-cream) 46.5% , transparent 47% ) ,
/* ======mask-r-shasow */
/* nose-l-shadow====== */
radial-gradient( 39.4375em 13.6875em at 716% -83% , var(--d-cream) 41% , transparent 41.5%) ,
/* ======nose-l-shadow */
/* nose-r-shadow====== */
radial-gradient( 39.4375em 13.6875em at -613% -83% , var(--d-cream) 41% , transparent 41.5% ) ,
/* ======nose-r-shadow */
/* face====== */
radial-gradient( 16.125em 24.4375em at center -207% , transparent 44% , var(--cream) 45% ) ,
/* ======face */
/* mouth====== */
radial-gradient( var(--d-red) 60% , transparent 64% ) ,
/* ======mouth */
/* chin====== */
radial-gradient( 11.6875em 24.125em at center -195% , var(--cream) 60% , transparent 60.5% ) ,
/* ======chin */
/* eye-l====== */
radial-gradient( 2.83em 2.9em at 32% center , var(--yellow) 60% , transparent 64% ) ,
/* ======eye-l */
/* eye-r====== */
radial-gradient( 2.83em 2.9em at 69% center , var(--yellow) 60% , transparent 64% ) ,
/* ======eye-r */
/* mask====== */
linear-gradient( var(--d-blue) , var(--d-blue) 0 ) ,
/* ======mask */
/* head====== */
radial-gradient( circle at center bottom , var(--d-blue) 50.5%, var(--purple) 51%, var(--purple) 60% , transparent 61% ) ,
/* ======head */
/* shadow-head-r====== */
radial-gradient( 12.875em 18.8125em at center -28% , transparent 46.5% , var(--d-blue) 47% , var(--d-blue) 48% , var(--purple) 48.5% ) ,
/* ======shadow-head-r */
/* shadow-head-1====== */
radial-gradient( 17.5625em 45.8125em at center -118% , transparent 45.5% , var(--d-blue) 46% , var(--d-blue) 48.8% , var(--purple) 49% ) ,
/* ======shadow-head-1 */
/* shadow-head-2====== */
radial-gradient( 19.5625em 28.6875em at center -16% , transparent 32% , var(--d-blue) 32.5% , var(--d-blue) 37.7% , var(--purple) 38% ) ,
/* ======shadow-head-2 */
/* u-ear====== */
linear-gradient( var(--d-blue) 24% , var(--purple) 0 , var(--purple) 66% , var(--d-blue) 0 ) ,
/* ======u-ear */
/* ear-l====== */
linear-gradient( 67deg , var(--d-blue) 47% , transparent 50% ) ,
/* ======ear-l */
/* ear-r====== */
linear-gradient( -67deg , var(--d-blue) 47% , transparent 50% ) ;
/* ======ear-r */
background-size:
/* brow-l-left====== */
2.8em 5em ,
/* ======brow-l-left */
/* brow-l-right====== */
2.8em 5em ,
/* ======brow-l-right */
/* brow-r-left====== */
2.1em 4em ,
/* ======brow-r-left */
/* brow-r-right====== */
2.1em 4em ,
/* ======brow-r-right */
/* mask-r====== */
10.45em 6em ,
/* ======mask-r */
/* mask-r-2====== */
10.45em 6em ,
/* ======mask-r-2 */
/* nose-l====== */
2.3em 1.5em ,
/* ======nose-l */
/* nose-r====== */
2.3em 1.5em ,
/* ======nose-r */
/* mask-r-shadow====== */
10.45em 6em ,
/* ======mask-r-shadow */
/* nose-l-shadow====== */
2.3em 1.5em ,
/* ======nose-l-shadow */
/* nose-r-shadow====== */
2.3em 1.5em ,
/* ======nose-r-shadow */
/* face====== */
10.45em 4.5em ,
/* ======face *
/* mouth====== */
2.55em 2.55em ,
/* ======mouth *
/* chin====== */
10.45em 5em ,
/* ======chin */
/* eye-l====== */
3.8em 3.8em ,
/* ======eye-l *
/* eye-r====== */
3.8em 3.8em ,
/* ======eye-r *
/* mask====== */
10.45em 4.7em ,
/* ======mask */
/* head====== */
16.2em 6.3em ,
/* ======head */
/* shadow-head-r====== */
16.2em 3.9em ,
/* ======shadow-head-r */
/* shadow-head-1====== */
16.2em 10.3em ,
/* ======shadow-head-1 */
/* shadow-head-2====== */
16.2em 10.3em ,
/* ======shadow-head-2 */
/* u-ear====== */
100% 19em ,
/* ======u-ear */
/* ear-l====== */
2.3em 5em ,
/* ======ear-l */
/* ear-r====== */
2.3em 5em ;
/* ======ear-r */
background-position:
/* brow-l-left====== */
var(--brow-l-left) ,
/* ======brow-l-left */
/* brow-l-right====== */
var(--brow-l-right) ,
/* ======brow-l-right */
/* brow-r-left====== */
17.4% 22.1% ,
/* ======brow-r-left */
/* brow-r-right====== */
82.6% 22.1% ,
/* ======brow-r-right */
/* mask-r====== */
50% 57.2% ,
/* ======mask-r */
/* mask-r-2====== */
50% 56.7% ,
/* ======mask-r-2 */
/* nose-l====== */
38.5% 66.7% ,
/* ======nose-l */
/* nose-r====== */
61.5% 66.7% ,
/* ======nose-r */
/* mask-r-shadow====== */
50% 60.5% ,
/* ======mask-r-shadow */
/* nose-l-shadow====== */
38.5% 69.7% ,
/* ======nose-l-shadow */
/* nose-r-shadow====== */
61.5% 69.7% ,
/* ======nose-r-shadow */
/* face====== */
50% 66% ,
/* ======face */
/* mouth====== */
50% 80.5% ,
/* ======mouth */
/* chin====== */
var(--chin) ,
/* ======chin */
/* eye-l====== */
12% 52% ,
/* ======eye-l */
/* eye-r====== */
88% 52% ,
/* ======eye-r */.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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