好看的滑鼠hover效果

来源:https://www.cnblogs.com/pythonywy/archive/2019/09/19/11548543.html
-Advertisement-
Play Games

0919自我總結 常見的滑鼠hover效果 展示效果:http://ianlunn.github.io/Hover/ 部分動畫製作 使用 拿 為例子 導入上述的方法 全是再樣式中操作 配置方法 參考文檔'https://www.w3school.com.cn/cssref/index.asp ani ...


0919自我總結

常見的滑鼠hover效果

展示效果:http://ianlunn.github.io/Hover/

部分動畫製作

<style><!--
.container {
            margin: 0 auto;
            width: 800px;
        }

        .button {
            margin: .4em;
            padding: 1em;
            cursor: pointer;
            background: #ececec;
            text-decoration: none;
            color: #666;
            display: inline-block;
        }


        /* 2D TRANSFORMS */
        /* Grow */
        .grow {
            transition-duration: .3s;
            transition-property: transform;

            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }
        .grow:hover {
            transform: scale(1.1);
        }

        /* Shrink */
        .shrink {
            transition-duration: .3s;
            transition-property: transform;

            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }
        .shrink:hover {
            transform: scale(.9);
        }

        /* Pulse */
        @keyframes pulse {
            25% {
                transform: scale(1.1);
            }

            75% {
                transform: scale(.9);
            }
        }

        .pulse {

        }
        .pulse:hover {
            animation-name: pulse;
            animation-duration: 1s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        /* Pulse Grow*/
        @keyframes pulse-grow {
            to {
                transform: scale(1.1);
            }
        }
        .pulse-grow {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }
        .pulse-grow:hover {
            animation-name: pulse-grow;
            animation-duration: .3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        /* Pulse shrink */
        @keyframes pulse-shrink {
            to {
                transform: scale(.9);
            }
        }

        .pulse-shrink {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }
        .pulse-shrink:hover {
            animation-name: pulse-shrink;
            animation-duration: .3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        /* Push */
        @keyframes push {
            50% {
                transform: scale(.8);
            }
            100% {
                transform: scale(1);
            }
        }

        .push {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }
        .push:hover {
            animation-name: push;
            animation-duration: .3s;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        /* Top */
        @keyframes top {
            50% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(1);
            }
        }

        .top {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }
        .top:hover {
            animation-name: top;
            animation-duration: .3s;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        /* Rotate */
        .rotate {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);

            transition-property: transform;
            transition-duration: .3s;
        }
        .rotate:hover {
            transform: rotate(5deg);
        }

        /* Grow Rotate */
        .grow-rotate {
            transition-property: transform;
            transition-duration: .3s;
        }
        .grow-rotate:hover {
            transform: rotate(5deg) scale(1.1);
        }

        /* Float */
        .float {
            transition-property: transform;
            transition-duration: .3s;
        }
        .float:hover {
            transform: translateY(-5px);
        }

        /* sink */
        .sink {
            transition-property: transform;
            transition-duration: .3s;
        }
        .sink:hover {
            transform: translateY(5px);
        }

        /* hover */
        @keyframes hover {
            50% {
                transform: translateY(-3px);
            }

            100% {
                transform: translateY(-6px);
            }
        }

        .hover {
            transition-property: transform;
            transition-duration: .5s;
        }
        .hover:hover {
            transform: translateY(-6px);
            animation-name: hover;
            animation-duration: 1.5s;
            animation-delay: .5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        /* Hang */
        @keyframes hang {
            50% {
                transform: translateY(3px);
            }

            100% {
                transform: translateY(6px);
            }
        }

        .hang {
            transition-duration: .5s;
            transition-property: transform;
        }
        .hang:hover {
            transform: translateY(6px);
            animation-name: hang;
            animation-duration: 1.5s;
            animation-delay: .5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        /* skew */
        .skew {
            transition-property: transform;
            transition-duration: .3s;
        }
        .skew:hover {
            transform: skew(-10deg);
        }

        /* skew-forward */
        .skew-forward {
            transition-property: transform;
            transition-duration: .3s;
            transform-origin: 0 100%;
        }
        .skew-forward:hover {
            transform: skew(-10deg);
        }

        /* Wobble Vertical */
        @keyframes wobble-vertical {
            16.65% {
                transform: translateY(8px);
            }

            33.3% {
                transform: translateY(-6px);
            }

            49.95% {
                transform: translateY(4px);
            }

            66.6% {
                transform: translateY(-2px);
            }

            83.25% {
                transform: translateY(1px);
            }

            100% {
                transform: translateY(0);
            }
        }

        .wobble-vertical {}
        .wobble-vertical:hover {
            animation-name: wobble-vertical;
            animation-duration: 1s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1;
        }

        /* Wobble Horizontal */
        @keyframes wobble-horizontal {
            16.65% { transform: translateX(8px); }
            33.3%  { transform: translateX(-6px); }
            49.95% { transform: translateX(4px); }
            66.6%  { transform: translateX(-2px); }
            83.25% { transform: translateX(1px); }
            100%   { transform: translateX(0); }
        }

        .wobble-horizontal {}
        .wobble-horizontal:hover {
            animation-name: wobble-horizontal;
            animation-duration: 1s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1;
        }

        /* wobble top */
        @keyframes wobble-top {
            16.65% { transform: skew(-12deg); }
            33.3%  { transform: skew(10deg); }
            49.95% { transform: skew(-6deg); }
            66.6%  { transform: skew(4deg); }
            83.25% { transform: skew(-2deg); }
            100%   { transform: skew(0); }
        }

        .wobble-top {
            transform-origin: 0 100%;
        }
        .wobble-top:hover {
            animation-name: wobble-top;
            animation-duration: 1s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1;
        }

        /* wobble bottom */
        @keyframes wobble-bottom {
            16.65% { transform: skew(-12deg); }
            33.3%  { transform: skew(10deg); }
            49.95% { transform: skew(-6deg); }
            66.6%  { transform: skew(4deg); }
            83.25% { transform: skew(-2deg); }
            100%   { transform: skew(0); }
        }

        .wobble-bottom {
            transform-origin: 100% 0;
        }
        .wobble-bottom:hover {
            animation-name: wobble-bottom;
            animation-duration: 1s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1;
        }

        /* SHADOW AND GLOW TRANSITIONS */

        /*
            time: .3s;
            primaryColor: #ececec;
            secondeColor: #666;
            shadowColor: rgba(0, 0, 0, .6);
        */

        /* border-fade */
        .border-fade {
            transition-property: box-shadow;
            transition-duration: .3s;
            box-shadow:
                    inset 0 0 0 4px #ececec,
                    0 0 1px rgba(0, 0, 0, 0);
        }
        .border-fade:hover {
            box-shadow:
                    inset 0 0 0 4px #666,
                    0 0 1px rgba(0, 0, 0, 0);
        }

        /* hollow */
        .hollow {
            transition-property: background;
            transition-duration: .3s;

            transform: translateZ(0);
            box-shadow:
                    inset 0 0 0 4px #ececec,
                    0 0 1px rgba(0, 0, 0, 0);
        }
        .hollow:hover {
            background: none;
        }

        /* trim */
        .trim {
            position: relative;
        }
        .trim:before {
            content: '';
            position: absolute;
            border: 4px solid white;
            top: 4px;
            left: 4px;
            right: 4px;
            bottom: 4px;
            opacity: 0;

            transition-duration: .3s;
            transition-property: opacity;
        }
        .trim:hover:before {
            opacity: 1;
        }

        /* outline outward */
        .outline-outward {
            position: relative;
        }
        .outline-outward:before {
            content: '';
            position: absolute;
            border: #ececec solid 4px;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transition-property: top right bottom left;
            transition-duration: .3s;
        }
        .outline-outward:hover:before {
            top: -8px;
            right: -8px;
            left: -8px;
            bottom: -8px;
        }

        /* outline inward */
        .outline-inward {
            position: relative;
        }
        .outline-inward:before {
            content: '';
            position: absolute;
            border: #ececec solid 4px;
            top: -16px;
            right: -16px;
            left: -16px;
            bottom: -16px;
            opacity: 0;

            transition-property: top left right bottom;
            transition-duration: .3s;
        }
        .outline-inward:hover:before {
            top: -8px;
            right: -8px;
            bottom: -8px;
            left: -8px;
            opacity: 1;
        }

        /* round corners */
        .round-corners {
            transition-property: border-radius;
            transition-duration: .3s;
        }
        .round-corners:hover {
            border-radius: 25px;
        }

        /* SHADOW/GROW TRANSITIONS */

        /* glow */
        .glow {
            transition-property: box-shadow;
            transition-duration: .3s;
        }
        .glow:hover {
            box-shadow: 0 0 8px rgba(0, 0, 0, .6);
        }

        /* box shadow outset */
        .box-shadow-outset {
            transition-property: box-shadow;
            transition-duration: .3s;
        }
        .box-shadow-outset:hover {
            box-shadow: 2px 2px 2px rgba(0, 0, 0, .6);
        }

        /* box-shadow-inset */
        .box-shadow-inset {
            transition-property: box-shadow;
            transition-duration: .3s;
        }
        .box-shadow-inset:hover {
            box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .6);
        }

        /* float shadow */
        .float-shadow {
            position: relative;
            transition-property: transform;
            transition-duration: .3s;
        }
        .float-shadow:before {
            pointer-events: none;
            position: absolute;
            z-index: -1;
            content: '';
            top: 100%;
            left: 5%;
            height: 10px;
            width: 90%;
            opacity: 0;
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, .35) 0%,rgba(0, 0, 0, 0) 80%);
            transition-property: transform opacity;
            transition-duration: .3s;
        }
        .float-shadow:hover {
            transform: translateY(-5px);
        }
        .float-shadow:hover:before {
            opacity: 1;
            transform: translateY(5px);
        }

        /* hover shadow */
        @keyframes hover {
            50% {
                transform: translateY(-3px);
            }
            100% {
                transform: translateY(-6px);
            }
        }
        @keyframes hover-shadow {
            0% {
                transform: translateY(6px);
                opacity: .4;
            }
            50% {
                transform: translateY(3px);
                opacity: 1;
            }
            100% {
                transform: translateY(6px);
                opacity: .4;
            }
        }
        .hover-shadow {
            position: relative;
            transition-property: transform;
            transition-duration: .3s;
        }
        .hover-shadow:before {
            pointer-events: none;
            position: absolute;
            z-index: -1;
            content: '';
            top: 100%;
            left: 5%;
            height: 10px;
            width: 90%;
            opacity: 0;
            background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%);
            transition-duration: .3s;
            transition-property: transform opacity;
        }
        .hover-shadow:hover {
            transform: translateY(-6px);
            animation-name: hover;
            animation-duration: 1.5s;
            animation-delay: .3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
        .hover-shadow:hover:before {
            opacity: .4;
            transform: translateY(6px);
            animation-name: hover-shadow;
            animation-duration: 1.5s;
            animation-delay: .3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        /* shadow radial */
        .shadow-radial {
            position: relative;
        }
        .shadow-radial:before,
        .shadow-radial:after {
            pointer-events: none;
            position: absolute;
            content: '';
            left: 0;
            width: 100%;
            box-sizing: border-box;
            background-repeat: no-repeat;
            height: 5px;
            opacity: 0;
            transition-property: opacity;
            transition-duration: .3s;
        }
        .shadow-radial:before {
            bottom: 100%;
            background: radial-gradient(ellipse at 50% 150%, #666 0%, rgba(0,0,0,0) 80%);
        }
        .shadow-radial:after {
            top: 100%;
            background: radial-gradient(ellipse at 50% -50%, #666 0%, rgba(0,0,0,0) 80%);
        }
        .shadow-radial:hover:before,
        .shadow-radial:hover:after {
            opacity: 1;
        }

        /* SPEECH BUBBLES */

        /* Bubble Top */
        .bubble-top {
            position: relative;
        }
        .bubble-top:before {
            pointer-events: none;
            position: absolute;
            z-index: -1;
            content: '';
            border-style: solid;
            left: calc(50% - 10px);
            top: 0;
            border-width: 0px 10px 10px 10px;
            border-color: transparent transparent #ececec transparent;
            transition-property: top;
            transition-duration: .3s;
        }
        .bubble-top:hover:before {
            top: -10px;
        }

        /* Bubble Right */
        .bubble-right {
            position: relative;
        }
        .bubble-right:before {
            pointer-events: none;
            position: absolute;
            z-index: -1;
            content: '';
            border-style: solid;
            transition-duration: .3s;
            transition-property: right;
            top: calc(50% - 10px);
            right: 0;
            border-width: 10px 0 10px 10px;
            border-color: transparent transparent transparent #ececec;
        }
        .bubble-right:hover:before {
            right: -10px;
        }

        /* Bubble bottom */
        .bubble-bottom {
            position: relative;
        }
        .bubble-bottom:before {
            pointer-events: none;
            position: absolute;
            z-index: -1;
            content: '';
            border-style: solid;
            border-width: 10px 10px 0 10px;
            border-color: #ececec transparent transparent transparent;
            left: calc(50% - 10px);
            bottom: 0;
            transition-duration: .3s;
            transition-property: bottom;
        }
        .bubble-bottom:hover:before {
            bottom: -10px;
        }

        /* bubble left */
        .bubble-left {
            position: relative;
        }
        .bubble-left:before {
            pointer-events: none;
            position: absolute;
            z-index: 1;
            content: '';
            border-style: solid;
            border-width: 10px 10px 10px 0;
            border-color: transparent #ececec transparent transparent;
            top: calc(50% - 10px);
            left: 0;
            transition-property: left;
            transition-duration: .3s;
        }
        .bubble-left:hover:before {
            left: -10px;
        }

        /* Bubble Float Top */
        .bubble-flout-top {
            position: relative;
            transition-property: transform;
            transition-duration: .3s;
        }
        .bubble-flout-top:before {
            pointer-events: none;
            position: absolute;
            z-index: -1;
            content: '';
            border-style: solid;
            left: calc(50% - 10px);
            top: 0;
            border-width: 0px 10px 10px 10px;
            border-color: transparent transparent #ececec transparent;
            transition-property: top;
            transition-duration: .3s;
        }
        .bubble-flout-top:hover {
            transform: translateY(5px);
        }
        .bubble-flout-top:hover:before {
            top: -10px;
        }

        /* Bubble Float Right */
        .bubble-float-right {
            position: relative;
            transition-property: transform;
            transition-duration: .3s;
        }
        .bubble-float-right:before {
            pointer-events: none;
            position: absolute;
            z-index: -1;
            content: '';
            border-style: solid;
            transition-duration: .3s;
            transition-property: right;
            top: calc(50% - 10px);
            right: 0;
            border-width: 10px 0 10px 10px;
            border-color: transparent transparent transparent #ececec;
        }
        .bubble-float-right:hover {
            transform: translateX(-5px);
        }
        .bubble-float-right:hover:before {
            right: -10px;
        }

        /* Bubble Float Bottom */
        .bubble-float-bottom {
            position: relative;
            transition-property: transform;
            transition-duration: .3s;
        }
        .bubble-float-bottom:before {
            pointer-events: none;
            position: absolute;
            z-index: -1;
            content: '';
            border-style: solid;
            border-width: 10px 10px 0 10px;
            border-color: #ececec transparent transparent transparent;
            left: calc(50% - 10px);
            bottom: 0;
            transition-duration: .3s;
            transition-property: bottom;
        }
        .bubble-float-bottom:hover {
            transform: translateY(-5px);
        }
        .bubble-float-bottom:hover:before {
            bottom: -10px;
        }

        /* Bubble Float Left */
        .bubble-float-left {
            position: relative;
            transition-property: transform;
            transition-duration: .3s;
        }
        .bubble-float-left:before {
            pointer-events: none;
            position: absolute;
            z-index: -1;
            content: '';
            border-style: solid;
            border-width: 10px 10px 10px 0;
            border-color: transparent #ececec transparent transparent;
            top: calc(50% - 10px);
            left: 0;
            transition-duration: .3s;
            transition-property: left;
        }
        .bubble-float-left:hover {
            transform: translateX(5px);
        }
        .bubble-float-left:hover:before {
            left: -10px;
        }


        /* Curl Top Left */
        .curl-top-left {
            position: relative;
        }
        .curl-top-left:before {
            pointer-events: none;
            position: absolute;
            content: '';
            height: 0;
            width: 0;
            top: 0;
            left: 0;
            background: linear-gradient(
                135deg,
                white 45%,
                #aaa 50%,
                #ccc 56%,
                white 80%
            );
            z-index: 1000;
            box-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
            transition-property: width height;
            transition-duration: .3s;
        }
        .curl-top-left:hover:before {
            width: 15px;
            height: 15px;
        }

        /*
            w,h = 25px;
            leftArea : white;
            curlLineColor : #aaa;
            curlTransitionColro : #ccc;
            curlLastColour : white;
        */
        /* Curl Top right */
        .curl-top-right {
            position: relative;
        }
        .curl-top-right:before {
            pointer-events: none;
            position: absolute;
            content: '';
            height: 0;
            width: 0;
            top: 0;
            right: 0;
            background: linear-gradient(
                225deg,
                white 45%,
                #aaa 50%,
                #ccc 56%,
                white 80%
            );
            z-index: 1000;
            box-shadow: -1px 1px 1px rgba(0, 0, 0, .4);
            transition-property: width height;
            transition-duration: .3s;
        }
        .curl-top-right:hover:before {
            width: 15px;
            height: 15px;
        }

        /* Curl Bottom Right */
        .curl-bottom-right {
            position: relative;
        }
        .curl-bottom-right:before {
            pointer-events: none;
            position: absolute;
            content: '';
            height: 0;
            width: 0;
            bottom: 0;
            right: 0;
            background: linear-gradient(
                315deg,
                white 45%,
                #aaa 50%,
                #ccc 56%,
                white 80%
            );
            z-index: 1000;
            box-shadow: -1px -1px 1px rgba(0, 0, 0, .4);
            transition-property: width height;
            transition-duration: .3s;
        }
        .curl-bottom-right:hover:before {
            width: 15px;
            height: 15px;
        }

        /* Curl Bottom Left */
        .curl-bottom-left {
            position: relative;
        }
        .curl-bottom-left:before {
            pointer-events: none;
            position: absolute;
            content: '';
            height: 0;
            width: 0;
            bottom: 0;
            left: 0;
            background: linear-gradient(
                45deg,
                white 45%,
                #aaa 50%,
                #ccc 56%,
                white 80%
            );
            z-index: 1000;
            box-shadow: 1px -1px 1px rgba(0, 0, 0, .4);
            transition-property: width height;
            transition-duration: .3s;
        }
        .curl-bottom-left:hover:before {
            width: 15px;
            height: 15px;
        }
--></style>

對於的效果都以備註

使用

拿pulse為例子

導入上述的方法

全是再樣式中操作

@keyframes pulse {
    25% {
        transform: scale(1.1);
    }

    75% {
        transform: scale(.9);
    }
}

配置方法

.pulse:hover {
    animation-name: pulse;  #方法名稱
    animation-duration: 1s; #方法時間
    animation-timing-function: linear; #從開頭到結尾以相同的速度來播放動畫
    animation-iteration-count: infinite; #動畫的次數
}

參考文檔'https://www.w3school.com.cn/cssref/index.asp#animation'


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • js中Date的構造函數解讀
    javascript中的內置對象是我們經常會用到的，那麼今天我們就來說說Date的四種構造方法吧 一、new Date() 這是我們最常使用也最熟悉不過的Date對象的構造方法了，通過無參數的構造函數我們可以預設獲取到一個代表實例化時的Date對象 二、new Date(value) 這個構造方法的 ...
  • Angular/Vue多覆選框勾選問題
    此頁面效果以Angular實現，Vue也可按照其大致流程實現，其核心本質沒有改變。 功能效果為：頁面初始化效果為要有所有角色的覆選框，要求初始化預設勾選的角色要顯示勾選，之後，能按照最終勾選的狀態提交發請求。 先查看效果：可以看到初始頁面的此用戶被賦予的角色只有一個“核算經辦”，如圖1紅框所示，點擊 ...
  • javascript：變數聲明&&賦值的提升和函數聲明&&定義的提升在不同情況下的表現
    console.log(a); //undefined console.log(show); //函數的定義 show(); //aaa123 var a = 1; function show(){ console.log("aaa123"); } console.log(a); //1 conso ...
  • input
    input標簽類型：button是一個沒有任何功能的按鈕，需要用javascript加上動作才可以使用。功能簡單，比起<button></button>是一個功能強大的按鈕，更美觀。 <input type="button" /> input標簽類型：checkbox是多選框 用label綁定inp ...
  • 利用js代碼自動刪除稿件的普通彈幕
    事情的起因是在b站投稿了一個高級彈幕測試的視頻（av9940487），但是由於b站的彈幕池機制是新的彈幕頂掉舊的彈幕，所以導致一些人發的高級彈幕很快就被頂掉了。 所以就想著寫個腳本來自動刪除屬性為普通的彈幕，語言用的是javascript，在chrome的控制台就可以執行這個腳本。 1.刪除彈幕的流 ...
  • VUE創建播發器組件並調用
    首先用vue-cli創建前端項目 參考：https://www.cnblogs.com/ouyangkai/p/11549290.html 新建play.vue文件 編寫play組件 <template> <div> <el-row> <el-col :span="4"> <el-popover p ...
  • vue-Element-axios搭建調用api進行數據展示
    1全局安裝vue-cli 2創建項目框架 3依次按照提示輸入，項目名、項目描述、項目作者等等， 4.進入vueapi目錄 5.安裝element-ui 因為是基於Vue.js和elementUI進行的項目開發，所以當然要導入Vue.j包和elementUI包： 6.安裝vue-router 要進行頁 ...
  • nodejs實現聊天機器人
    技術棧 服務端： koa、koa-route、koa-websocket、request。 客戶端： html、css、js、websocket。 遠程聊天API： http://api.qingyunke.com/api.php?key=free&appid=0&msg=msg。 客戶端展示 開發 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類