zoukankan      html  css  js  c++  java
  • css | 鼠标经过样式

    1、循序渐进

        <style>
            /* 基础样式(删除) */
            
            body,
            html {
                padding: 0;
                margin: 0;
                height: 100vh;
                width: 100vw;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
            }
            
            .dxd_wdh {
                width: 300px;
                height: 300px;
                background-color: rgb(43, 193, 219);
                position: relative;
            }
            /* 基础样式(删除) */
            
             :root {
                --color: rgb(118, 120, 223);
            }
            
            .dxd_wdh:before,
            .dxd_wdh:after {
                content: "";
                display: block;
                width: 0;
                height: 0;
                border: 3px solid transparent;
                box-sizing: border-box;
                position: absolute;
            }
            
            .dxd_wdh:before {
                top: 0;
                left: 0;
                transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
            }
            
            .dxd_wdh:after {
                right: 0;
                bottom: 0;
                transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;
            }
            
            .dxd_wdh:hover:before {
                width: 100%;
                height: 100%;
                transition: width 0.2s ease-in, height 0.2s ease-in 0.2s;
                border-top-color: var(--color);
                border-right-color: var(--color);
            }
            
            .dxd_wdh:hover:after {
                width: 100%;
                height: 100%;
                transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.4s, height 0.3s ease-in 0.6s;
                border-bottom-color: var(--color);
                border-left-color: var(--color);
            }
        </style>
        <div class="dxd_wdh"></div>
  • 相关阅读:
    netty ByteToMessageDecoder 分析
    netty 编/解码处理
    MAC 入门
    netty 学习
    php ioc and web rest design
    spring 启动流程
    淘宝美衣人
    ecslipe cdt lib link
    阿里巴巴中间件团队招人了!
    架构师速成-架构目标之伸缩性安全性
  • 原文地址:https://www.cnblogs.com/111wdh/p/mouse_style.html
Copyright © 2011-2022 走看看