GUKE万能工具箱（附带源码）

效果图
部分源码
领取完整源码
下期更新

效果图

在这里插入图片描述

部分源码

<!DOCTYPE html>
<html><head><meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" href="images/favicon.jpg" type="image/x-icon"><title>简易红绿灯 - GUKE工具站</title><style>.box{position: fixed;top: calc(50% - 64px);left: calc(50% - 64px);height: 128px;width: 128px;background-color: #333333;border-radius: 16px;box-shadow: 0 4px 8px 2px #666666;animation-name: box;animation-duration: 0.6s;transform: scale(1.2);opacity: 0;filter: blur(5px);animation-delay: 0.5s;animation-fill-mode: forwards;}@keyframes box{from {transform: scale(1.2);opacity: 0;filter: blur(5px);}to {transform: scale(1);opacity: 1;filter: blur(0);}}.light{position: fixed;top: calc(50% - 48px);left: calc(50% - 48px);height: 96px;width: 96px;background-color: #4CAF50;box-shadow: 0 1px 4px 1px #4CAF50;border-radius: 100%;animation-name: light;animation-duration: 25s;animation-iteration-count: infinite;}@keyframes light{0% {background-color: #4CAF50;box-shadow: 0 1px 4px 1px #4CAF50;}47% {background-color: #4CAF50;box-shadow: 0 1px 4px 1px #4CAF50;}48% {background-color: #333333;box-shadow: 0 1px 4px 1px #333333;}49% {background-color: #333333;box-shadow: 0 1px 4px 1px #333333;}50% {background-color: #4CAF50;box-shadow: 0 1px 4px 1px #4CAF50;}51% {background-color: #4CAF50;box-shadow: 0 1px 4px 1px #4CAF50;}52% {background-color: #333333;box-shadow: 0 1px 4px 1px #333333;}53% {background-color: #333333;box-shadow: 0 1px 4px 1px #333333;}54% {background-color: #4CAF50;box-shadow: 0 1px 4px 1px #4CAF50;}55% {background-color: #4CAF50;box-shadow: 0 1px 4px 1px #4CAF50;}56% {background-color: #333333;box-shadow: 0 1px 4px 1px #333333;}57% {background-color: #333333;box-shadow: 0 1px 4px 1px #333333;}58% {background-color: #4CAF50;box-shadow: 0 1px 4px 1px #4CAF50;}59% {background-color: #4CAF50;box-shadow: 0 1px 4px 1px #4CAF50;}60% {background-color: #FFC107;box-shadow: 0 1px 4px 1px #FFC107;}71% {background-color: #FFC107;box-shadow: 0 1px 4px 1px #FFC107;}72% {background-color: #F44336;box-shadow: 0 1px 4px 1px #F44336;}99% {background-color: #F44336;box-shadow: 0 1px 4px 1px #F44336;}}.sign{font-size: 16px;text-shadow: 0 1px 4px #999999;position: fixed;top: 75%;width: 100%;text-align: center;animation-name: box;animation-duration: 0.6s;transform: scale(1.2);opacity: 0;filter: blur(5px);animation-delay: 0.5s;animation-fill-mode: forwards;}</style></head><body>	<div class="box"><div class="light"></div></div><div class="sign">Made by GUKE Studio.</div></body>
</html>