css实现鼠标悬浮昼夜切换动画效果代码-html代码-BFW代码库

css实现鼠标悬浮昼夜切换动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现鼠标悬浮昼夜切换动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        * {
          box-sizing: border-box;
        }
        
        html,
        body {
          height: 100%;
        }
        
        body {
          display: grid;
          place-items: center;
          font-family: Poppins;
          background: #1d1e22;
        }
        
        
        .day-night-label {
          display: grid;
          gap: 1rem;
          place-items: center;
        }
        
        .day-night-circle {
          position: relative;
          background: #2a3741;
          width: 200px;
          height: 200px;
          border-radius: 50%;
          overflow: hidden;
          padding: 0px;
          margin: 0 auto;
          margin-bottom: 10px;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
          cursor: pointer;
          transition: all 0.5s ease-in-out;
        }
        .day-night-circle:hover {
          background: #e9786b;
        }
        .sun {
          margin-top: 20px;
          background: #f2ef88;
          box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);
          width: 30%;
          height: 30%;
          border-radius: 50%;
          position: relative;
          top: 70%;
          left: 20%;
          transition: all 0.5s ease;
        }
        
        .day-night-circle:hover .sun {
          left: 35%;
          top: 48%;
          transition: all 0.5s 0s ease;
        }
        .moon {
          position: absolute;
          margin-top: 20px;
          background: #d9d8d0;
          box-shadow: inset -10px 2px 0 0px #899098;
          width: 22.5%;
          height: 22.5%;
          border-radius: 100%;
          position: relative;
          margin-left: -50px;
          left: 65%;
          top: -10%;
          overflow: hidden;
          transition: all 0.5s 0s ease;
        }
        .day-night-circle:hover .moon {
          left: 120%;
          top: -50%;
        }
        .moon div:nth-child(n) {
          position: relative;
          background: #b9b8b0;
          border-radius: 50%;
          box-shadow: inset 4px -2px 0 0px #535457;
        }
        .moon div:nth-child(1) {
          top: 25%;
          left: 12%;
          width: 27%;
          height: 27%;
        }
        .moon div:nth-child(2) {
          top: -11%;
          left: 60%;
          width: 16%;
          height: 16%;
        }
        .moon div:nth-child(3) {
          to.........完整代码请登录后点击上方下载按钮下载查看