精灵女王水晶球旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:精灵女王水晶球旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { top: 0; left: 0; position: absolute; overflow: hidden; } body { cursor: pointer; margin: 0; width: 100vw; height: 100vh; overflow: hidden; z-index: 1; background-image: radial-gradient(farthest-corner circle at left bottom, #3bc474, #06007a); background-image: -moz-radial-gradient(farthest-corner circle at left bottom, #3bc474, #06007a); } #bg { width: 20vmin; height: 20vmin; position: absolute; border-radius: 100%; z-index: 4; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: url("//repo.bfw.wiki/bfwrepo/image/5fcdb8f57078e.png"); background-size: cover; background-repeat: no-repeat; background-position: center; box-shadow: inset 0vh 1vh 1vh rgba(4,73,73,0.7); animation: bg 20s infinite ease-in-out; mix-blend-mode: xor; } canvas { cursor: pointer; background: rgba(255,255,255,0.1); border-radius: 100%; box-shadow: inset 1vh 9vh 5vh rgba(27,2,39,0.4); position: absolute; transform: scale(1) rotate(0deg); animation: turn 38s cubic-bezier(1, -0.07, 0.06, 1.37) infinite; } #r, #g, #b { position: absolute; top: 50%; left: 50%; width: 20vmin; height: 20vmin; transform: translate(-50%, -50%); } #r { animation: #f00 10s cubic-bezier(0.04, -10.67, 1, -2.97) infinite; border-radius: 100%; background-image: -moz-radial-gradient(50% 50%, circle contain, rgba(0,0,0,0.65), rgba(222,74,217,0.3) 100%); background-image: -webkit-radial-gradient(50% 50%, circle contain, rgba(0,0,0,0.65), rgba(222,74,217,0.3) 100%); } #b { animation: #00f 11s ease-in-out infinite; border-radius: 100%; background-image: -webkit-radial-gradient(50% 50%, circle contain, rgba(35,53,112,0.85), rgba(130,198,237,0.3) 100%); background-image: -moz-radial-gradient(50% 50%, circle contain, rgba(86,173,223,0.75), rgba(130,198,237,0.3) 100%); } #g { border-radius: 100%; animation: #008000 12s linear infinite; background-image: -webkit-radial-gradient(50% 50%, circle contain, rgba(97,219,10,0.87), rgba(212,223,12,0.3) 100%); background-image: -moz-radial-gradient(50% 50%, circle contain, rgba(210,222,12,0.75), rgba(212,223,12,0.3) 100%); } @-moz-keyframes bg { 0% { background-size: 100%; } 20% { background-size: cover; background-position: center top; transform: rotate(180deg) translate(50%, 50%); } 40%, 44% { background-size: cover; background-position: center; background-position: center bottom; } 60% { background-size: 80%; } 100% { background-size: 100%; } } @-webkit-keyframes bg { 0% { background-size: 100%; } 20% { background-size: cover; background-position: center top; transform: rotate(180deg) translate(50%, 50%); } 40%, 44% { background-size: cover; background-position: center; background-position: center bottom; } 60% { background-size: 80%; } 100% { background-size: 100%; } } @-o-keyframes bg { 0% { background-size: 100%; } 20% { background-size: cover; background-position: center top; transform: rotate(180deg) translate(50%, 50%); } 40%, 44% { background-size: cover; background-position: center; background-position: center bottom; } 60% { background-size: 80%; } 100% { background-size: 100%; } } @keyframes bg { 0% { background-size: 100%; } 20% { background-size: cover; background-position: center top; transform: rotate(180deg) translate(50%, 50%); } 40%, 44% { background-size: cover; background-position: center; background-position: center bottom; } 60% { background-size: 80%; } 100% { background-size: 100%; } } @-moz-keyframes turn { 0%, 100% { transform: scale(0.7) translate(0%) rotate(95deg); } 25% { transform: scale(0.5); box-shadow: inset 11vh 5vh 9vh rgba(87,32,5,0.5); mix-blend-mode: hue; } 40%, 50% { filter: invert(1); } 60%, 80% { transform: scale(0.7) translate(0%) rotate(95deg); mix-blend-mode: lighter; } } @-webkit-keyframes turn { 0%, 100% { transform: scale(0.7) translate(0%) rotate(95deg); } 25% { transform: scale(0.5); box-shadow: inset 11vh 5vh 9vh rgba(87,32,5,0.5); mix-blend-mode: hue; } 40%, 50% { filter: invert(1); } 60%, 80% { transform: scale(0.7) translate(0%) rotate(95deg); mix-blend-mode: lighter; } } @-o-keyframes turn { 0%, 100% { transform: scale(0.7) translate(0%) rotate(95deg); } 25% { transform: scale(0.5); box-shadow: inset 11vh 5vh 9vh rgba(87,32,5,0.5); mix-blend-mode: hue; } 40%, 50% { filter: invert(1); } 60%, 80% { transform: scale(0.7) translate(0%) rotate(95deg); mix-blend-mode: lighter; } } @keyframes turn { 0%, 100% { transform: scale(0.7) translate(0%) rotate(95deg); } 25% { transform: scale(0.5); box-shadow: inset 11vh 5vh 9vh rgba(87,32,5,0.5); mix-blend-mode: hue; } 40%, 50% { filter: invert(1); } 60%, 80% { transform: scale(0.7) translate(0%) rotate(95deg); mix-blend-mode: lighter; } } @-moz-keyframes red { 0% { transform: rotate(0deg) rotate(0deg) scale(1, 1); } 50% { transform: rotate(-180deg) rotate(-180deg) scale(2, 2); } 100% { transform: rotate(-360deg) rotate(-360deg) scale(1, 1); } } @-webkit-keyframes red { 0% { transform: rotate(0deg) rotate(0deg) scale(1, 1); } 50% { transform: rotate(-180deg) rotate(-180deg) scale(2, 2); } 100% { transform: rotate(-360deg) rotate(-360deg) scale(1, 1); } } @-o-keyframes red { 0% { transform: rotate(0deg) rotate(0deg) scale(1, 1); } 50% { transform: rotate(-180deg) rotate(-180deg) scale(2, 2); } 100% { transform: rotate(-360deg) rotate(-360deg) scale(1, 1); } } @keyframes red { 0% { transform: rotate(0deg) rotate(0deg) scale(1, 1); } 50% { transform: rotate(-180deg) rotate(-180deg) scale(2, 2); } 100% { transform: rotate(-360deg) rotate(-360deg) scale(1, 1); } } @-moz-keyframes green { 0% { transform: rotate(0deg) rotate(0deg) scale(1, 3); opacity: 1; } 66% { transform: rotate(180deg) rotate(-180deg) scale(3, 1); opacity: 0.33; } 100% { transform: rotate(360deg) rotate(-360deg) scale(1, 3); opacity: 1; } } @-webkit-keyframes green { 0% { transform: rotate(0deg) rotate(0deg) scale(1, 3); opacity: 1; } 66% { transform: rotate(180deg) rotate(-180deg) scale(3, 1); opacity: 0.33; } 100% { transform: rotate(360deg) rotate(-360deg) scale(1, 3); opacity: 1; } } @-o-keyframes green { 0% { transform: rotate(0deg) rotate(0deg) scale(1, 3); opacity: 1; } 66% { transform: rotate(180deg) rotate(-180deg) scale(3, 1); opacity: 0.33; } 100% { transform: rotate(360deg) rotate(-360deg) scale(1, 3); opacity: 1; } } @keyframes green { 0% { transform: rotate(0deg) rotate(0deg) scale(1, 3); opacity: 1; } 66% { transform: rotate(180deg) rotate(-180deg) scale(3, 1); opacity: 0.33; } 100% { transform: rotate(360deg) rotate(-360deg) scale(1, 3); opacity: 1; } } @-moz-keyframes blue { 0% { transform: rotate(0deg) rotate(0deg) scale(1, 1); } 33% { transform: rotate(180deg) rotate(-180deg) scale(3, 3); } 100% { transform: rotate(360deg) rotate(-360deg) scale(1, 1); } } @-webkit-keyframes blue { 0% { transform: rotate(0deg) rotate(0deg) scale(1, 1); } 33% { transform: rotate(180deg) rotate(-180deg) scale(3, 3); } 100% { transform: rotate(360deg) rotate(-360deg) scale(1, 1); } } @-o-keyframes blue { 0% { transform: rotate(0deg) rotate(0deg.........完整代码请登录后点击上方下载按钮下载查看
网友评论0