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>