css-doodle下雪动画

代码语言:html

所属分类:动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background: radial-gradient(30vmin circle at 85% 17%, #696758 0%, 80%, #C5BC8E 97%, #010007 100%);
  overflow: hidden;
  filter: sepia(70%);
  /*disable css filters for firefox (choppy animations):*/
  background-attachment: local;
}
@-moz-document url-prefix() {
  body {
    filter: none;
  }
}
</style>

</head>
<body translate="no">
<css-doodle>
:doodle {
@grid:15 / 100%;
width:100vw;
height:100vh;
}
/*snowing cats and dogs*/
:after {
content:@p(🐶,🐶,🐶,🐩,🐩,🐩,🐺,🐺,🐱,😸 ,😹,😻,😾,😿,🙀,🦁,🐆,🐅,🐈);
}
/*and some barnyard friends*/
@random(.12) {
:after {
content:@p(🐀,🐁,🐂,🐃,🐄,🐅,🐆,🐇,🐈,🐉,🐊,🐋,🐌,🐍,🐎,🐏,🐐,🐑,🐒,🐓,🐔,🐕,🐖,🐗,🐘,🐙,🐚,🐛,🐜,🐝,🐞,🐟,🐠,🐡,🐢,🐣,🐤,🐥,🐦,🐧,🐨,🐩,🐪,🐫,🐬,🐭,🐮,🐯,🐰,🐲,🐳,🐴,🐵,🐶,🐷,🐸,🐹,🐺,🐻,🐼,🐽,🕷,🙈,🙉,🙊,🦀,🦁,🦂,🦃,🦄,🦅,🦆,🦇,🦈,🦉,🦊,🦋,🦌,🦍,🦎,🦏,🦐,🦑,🦒,🦓,🦔,🦕,🦖,🦗,🦘,🦙,🦚,🦛,🦜,🦝,🦞,🦟,🦠,🦡,🦢);
}
}
font-size:@p(3vmin, 4vmin, 1.75em);
text-shado.........完整代码请登录后点击上方下载按钮下载查看

网友评论0