css+div实现小鬼发抖身首异处断头动画效果代码
代码语言:html
所属分类:动画
代码描述:css+div实现小鬼发抖身首异处断头动画效果代码
代码标签: css div 小鬼 发抖 身首异处 断头 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Julius+Sans+One); body, html { background: #111; height: 100vh; width: 100vw; position: absolute; z-index: 1; } body { margin: 0px; padding: 0px; background-color: #111; height: 100%; } @-webkit-keyframes eyes { 0% { left: 30px; height: 8px; width: 15px; } 59% { left: 30px; height: 1px; width: 15px; } 60% { left: 22px; height: 24px; width: 15px; } 75% { left: 22px; height: 24px; width: 15px; } 76% { left: 15px; height: 24px; width: 15px; } 89% { left: 15px; width: 15px; height: 15px; } 90% { left: 30px; } 100% { left: 30px; } } @keyframes eyes { 0% { left: 30px; height: 8px; width: 15px; } 59% { left: 30px; height: 1px; width: 15px; } 60% { left: 22px; height: 24px; width: 15px; } 75% { left: 22px; height: 24px; width: 15px; } 76% { left: 15px; height: 24px; width: 15px; } 89% { left: 15px; width: 15px; height: 15px; } 90% { left: 30px; } 100% { left: 30px; } } @-webkit-keyframes head { 0% { top: 10px; } 50% { top: 10px; } 59% { left: 20px; top: -100px; } 100% { top: 28px; left: -10px; } } @keyframes head { 0% { top: 10px; } 50% { top: 10px; } 59% { left: 20px; top: -100px; } 100% { top: 28px; left: -10px; } } @-webkit-keyframes body { 0% { top: 5px; } 50% { top: 0px; } 59% { top: -20px; } 90% { top: -5px; } 100% { top: 25px; } } @keyframes body { 0% { top: 5px; } 50% { top: 0px; } 59% { top: -20px; } 90% { top: -5px; } 100% { top: 25px; } } @-webkit-keyframes hands { 0% { top: 45px; } 60% { top: 45px; } 70% { top: 25px; } 100% { top: 45px; } } @keyframes hands { 0% { top: 45px; } 60% { top: 45px; } 70% { top: 25px; } 100% { top: 45px; } } @-webkit-keyframes leap { 0% { top: 60px; } 80% { top: 80px; transform: scale(1, 9); color: #089b85; } 85% { top: 60px; transform: scale(1, 10); } 94% { top: 60px; transform: scale(1); color: #47c2af; } 100% { top: 60px; transform: scale(1); color: rgba(21, 193, 167, 0.31); } } @keyframes leap { 0% { top: 60px; } 80% { top: 80px; transform: scale(1, 9); color: #089b85; } 85% { top: 60px; transform: scale(1, 10); } 94% { top: 60px; transform: scale(1); color: #47c2af; } 100% { top: 60px; transform: scale(1); color: rgba(21, 193, 167, 0.31); } } .eyes { width: 15px; height: 15px; background-color: #e2e2e2; border-radius: 50%; position: relative; top: 30px; left: 24px; box-shadow: 30px 0px 0px 0px #e2e2e2; -webkit-animation: eyes 7s infinite alternate; animation: eyes 7s infinite alternate; -webkit-animation-timing-function: cubic-bezier(0.057, 0.1, 0.69, 0.35); animation-timing-function: cubi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0