css机器人动画 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>robot</title> <style> /* Felix */ .personal-assistant { position: relative; margin-top: 100px; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; } .felix { position: absolute; bottom: 50px; width: 110px; height: 95px; border-radius: 45%; border: 3px solid #fff; box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); animation: breathe-and-jump 3s linear infinite; cursor: pointer; z-index: 1; } .felix::before { content: ''; position: absolute; top: -1px; left: -1px; width: calc(100% + 3px); height: calc(100% + 2px); background-color: #18c; background: linear-gradient(to bottom, #5fc, #1a8); background: -webkit-linear-gradient(to bottom, #5cf, #18c); border-radius: 45%; opacity: 0; transition: 0.3s linear all; } .felix > .eyes { position: relative; } .felix > .eyes > .eye { position: absolute; top: 20px; width: 20px; height: 25px; border-radius: 15px; background-color: #fff; box-shadow: 0 0 7px rgba(255, 255, 255, 0.5); animation: blink 5s linear infinite; } .felix > .eyes > .eye.left { left: 25%; } .felix > .eyes > .eye.right { right: 25%; } /* Platforms */ .platform { transform: rotateX(70deg); width: 100px; height: 100px; box-shadow: 0 0 100px #fff, 0 0 15px #fff inset; animation: jump-pulse 3s linear infinite; } .platform, .command-list > li::before { border-radius: 50%; transition: 0.2s linear all; } .command-list > li::before { content: ''; position: absolute; bottom: -35px; left: 50%; width: 65px; height: 65px; transform: translate(-50%) rotateX(70deg); box-shadow: 0 0 50px #fff, 0 0 15px #fff inset; } /* Hover */ .felix:not(.active):hover { animation: shake-to-alert 0.5s linear; height: 105px; transform: translateY(-4px); } .felix:not(.active):hover, .felix:not(.active):hover > .eyes > .eye { border-color: #fc5; box-shadow: 0 0 5px #fc5; } .felix:not(.active):hover + .platform { box-shadow: 0 0 100px #fc5, 0 0 15px #fc5 inset; animation: shake-pulse 0.5s linear; } /* Awaiting Command */ .felix.active { animation: bounce-then-breathe 5s linear infinite; } .felix.active::before { opacity: 1; } .felix.active, .felix.active > .eyes > .eye { border-color: #5fc; box-shadow: 0 0 5px #5fc; } .felix.active + .platform { box-shadow: 0 0 100px #5fc, 0 0 25px #5fc inset; animation: bounce-pulse 5s linear; } /* Deactivation */ .felix.inactive { animation: deactivate 0.75s linear, breathe-and-jump 3s linear infinite; } .felix.inactive + .platform { animation: deactivate-platform 0.75s linear; } /* Animations */ @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes breathe { 0%, 100% { height: 95px; transform: translateY(0); } 50% { height: 100px; transform: translateY(-5px); } } @keyframes bounce-then-breathe { 0%, 5%, 10%, 15% { transform: translateY(0); } 2.5%, 7.5%, 12.5% { transform: translateY(-15px); } 20%, 40%, 60%, 80%, 100% { height: 95px; transform: translateY(0); } 30%, 50%, 70%, 90% { height: 100px; transform: translateY(-5px); } } @keyframes shake-pulse { 0%, 20%, 40%, 60%, 80%, 100% { box-shadow: 0 0 100px #fc5, 0 0 15px #fc5 inset; } 10%, 25%, 35%, 50%, 65% { box-shadow: 0 0 115px #fc5, 0 0 15px #fc5 inset; } 15%, 30%, 45%, 55%, 70% { box-shadow: 0 0 95px #fc5, 0 0 15px #fc5 inset; } } @keyframes bounce-pulse { 0%, 5%, 10%, 15% { box-shadow: 0 0 30px #5fc, 0 0 45px #5fc inset; } 2.5%, 7.5%, 12.5% { box-shadow: 0 0 100px #5fc, 0 0 15px #5fc inset; } 20%, 40%, 60%, 80%, 100% { box-shadow: 0 0 30px #5fc, 0 0 45px #5fc inset; } 30%, 50%, 70%, 90% { box-shadow: 0 0 70px #5fc, 0 0 25px #5fc inset; } } @keyframes jump-pulse { 0%, 40%, 80%, 100% { box-shadow: 0 0 30px #fff, 0 0 45px #fff inset; } 20%, 60%, 70%, 90% { box-shadow: 0 0 70px #fff, 0 0 25px #fff inset; } 85% { box-shadow: 0 0 100px #fff, 0 0 15px #fff inset; } } @keyframes breathe-and-jump { 0%, 40%, 80%, 100% { height: 95px; transform: translateY(0); } 20%, 60%, 70%, 90% { height: 100px; transform: translateY(-5px); } 85% { height: 85px; transform: translateY(-20px); } } @keyframes shake-to-alert { 0%, 20%, 40%, 60%, 80%, 100% { transform: rotate(0) translateY(-5px); } 10%, 25%, 35%, 50%, 65% { transform: rotate(5deg) translateY(-5px); } 15%, 30%, 45%, 55%, 70% { transform: roate(-5deg) translateY(-5px); } } @keyframes blink { 0%, 100% { transform: scale(1, 0.05); } 5%, 95% { transform: scale(1, 1); } } @keyframes deactivate { 0% { border-color: #5fc; } 20%, 60% { border-color: #f55; } 40%, 80%, 100% { border-color: #fff; } } @keyframes deactivate-platform { 0% { box-shadow: 0 0 100px #5fc, 0 0 15px #5fc inset; } 40%, 80%, 100% { box-shadow: 0 0 15px #fff, 0 0 15px #fff inset; } 20%, 60% { box-shadow: 0 0 100px #f55, 0 0 15px #f55 inset; } } /* Template Overrides */ html, body { background: rgb(22, 9, 56); background-image: linear-gradient(to top, rgb(22, 9, 56), rgb(24, 12, 58), rgb(26, 14, 60), rgb(27, 17, 62), rgb(29, 19, 64), rgb(31, 22, 66), rgb(33, 24, 67), rgb(35, 27, 69), rgb(37, 29, 71), rgb(38, 32, 73), rgb(40, 34, 75), rgb(42, 37, 77)); background-image: -webkit-linear-gradient(to top, rgb(22, 9, 56), rgb(24, 12, 58), rgb(26, 14, 60), rgb(27, 17, 62), rgb(29, 19, 64), rgb(31, 22, 66), rgb(33, 24, 67), rgb(35, 27, 69), rgb(37, 29, 71), rgb(38, 32, 73), rgb(40, 34, 75), rgb(42, 37, 77)); color: #fff; } * { user-select: none; } </style> </head> <body> <div class="personal-assistant"> <div id="felix" class="felix" onclick="activateFelix();"> <div class="eyes"> <div class="eye left"></div> <div class="eye right"></div> </div> </div> <div class="platform"></div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » css机器人动画