div+css实现下雪中雪地上的圣诞老人眨眼动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现下雪中雪地上的圣诞老人眨眼动画效果代码
代码标签: div css实现 下雪 雪地 圣诞 老人 眨眼 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@keyframes snow {
0% { background-position: 0 0, 0 0, 0 0, 0 0; }
40% { background-position: 10px 14vmin, -20px 28vmin, 20px 20vmin, 10px 24vmin; }
60% { background-position: -10px 21vmin, -30px 42vmin, 30px 30vmin, 15px 36vmin; }
100% { background-position: 0 35vmin, 0 70vmin, 0 50vmin, 0 60vmin; }
}
@keyframes blink {
0%, 6%, 100% { height: 12%; }
3% { height: 0%; }
}
@keyframes moveMustache {
0%, 40%, 44%, 100% { transform: translate(-100%, 0) rotate(25deg); }
42% { transform: translate(-100%, 0) rotate(30deg); }
}
@keyframes moveMustache2 {
0%, 40%, 44%, 100% { transform: rotate(-25deg); }
42% { transform: rotate(-30deg); }
}
@media (prefers-reduced-motion) {
* {
animation: none !important;
}
}
html {
background: #abc;
overflow: hidden;
background-image:
radial-gradient(circle at 50% 50%, white 2.5%, transparent 0),
radial-gradient(circle at 30% 90%, white 1.5%, transparent 0),
radial-gradient(circle at 70% 10%, white 1%, transparent 0),
radial-gradient(circle at 10% 40%, w.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0