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