css3：發光按鈕、漂亮的登錄框、滿意的404、帶動畫的輸入框

1.發光按鈕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>發光按鈕</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            height: 100vh;
        }

        body {
            background-color: black;
        }

        .main-container {
            text-align: center;
            padding: 200px;
        }

        .main-container .item {
            display: inline-block;
            width: 70px;
            vertical-align: top;
            margin-left: 20px;
        }
        .main-container .item i {
            display: block;
            color: rgb(55,55,55);
            font-size: 30px;
            transition: .5s;
        }
        input[type="checkbox"] {
            display: block;
            width: 0;
            height: 70px;
            position: relative;
        }

        input[type="checkbox"]::before {
            content: '';
            width: 10px;
            height: 10px;
            display: block;
            background-color: rgb(25,25,25);
            border: 20px solid rgb(45,45,45);
            border-radius: 30px;
            position: absolute;
            z-index: 2;
            left: 10px;
            top: 10px;
            box-shadow: 0 0 10px 0 rgb(15,15,15);
            transition: .5s;
        }

        input[type="checkbox"]::after {
            content: '';
            width: 70px;
            height: 70px;
            background-color: rgb(45,45,45);
            display: block;
            position: absolute;
            z-index: 1;
            border-radius: 40px;
            box-shadow: 0 8px 10px 0 rgb(15,15,15) inset;
        }

        input[type="checkbox"]:checked:before {
            background-color: rgb(0, 183, 255);
            box-shadow: 0 0 10px 0 rgb(0, 183, 255);
        }

        input[type="checkbox"]:checked+i {
            color: rgb(0, 183, 255);
            text-shadow: 0 0 10px rgb(0, 183, 255);
        }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="item"><input type="checkbox" ><i class="fas  fa-running"></i></div>
        <div class="item"><input type="checkbox" ><i class="fas fa-bed"></i></div>
        <div class="item"><input type="checkbox" ><i class="fas fa-dumbbell"></i></div>
    </div>
</body>
</html>

2.漂亮的登錄框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登錄</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            letter-spacing: .05em;
        }
        html {
            height: 100vh;
        }

        body{
            height: 100vh;
        }

        .container {
            height: 100vh;
            background-image: linear-gradient(to right, #fbc2eb,#a6c1ee);
        }

        .login-wrapper {
            background-color: #fff;
            width: 250px;
            height: 500px;
            position: relative;
            border-radius: 15px;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            padding: 0 50px;
            box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.5);
        }

        .login-wrapper .header {
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
        }

        .login-wrapper .form-wrapper .input-item{
            display: block;
            width: 100%;
            margin-bottom: 20px;
            border: 0;
            padding: 10px;
            border-bottom: 1px solid rgb(128,125,125);
            font-size: 15px;
            outline: none;
        }

        .login-wrapper .form-wrapper .input-item::placeholder{
            text-transform: uppercase;
        }
        .login-wrapper .form-wrapper .btn {
            text-align: center;
            padding: 5px;
            background-image: linear-gradient(to right,#a6c1ee, #fbc2eb);
            color: #fff;
            width: 100%;
            margin-top: 40px;
            font-weight: bold;
        }

        .login-wrapper .msg{
            text-align: center;
            line-height: 80px;
        }

        .login-wrapper .msg a{
            text-decoration-line: none;
            color: #fbc2eb;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="login-wrapper">
            <div class="header">Login</div>
            <div class="form-wrapper">
                <input type="text" class="input-item" name="username" placeholder="username">
                <input type="password" class="input-item" name="password" placeholder="password">
                <div class="btn">Login</div>
            </div>
            <div class="msg">
                Don't have account? <a href="#">Sign up</a>
            </div>
        </div>
    </div>
</body>
</html>

3.滿意的404

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404頁面</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html, body {
            height: 100vh;
        }

        body {
            background-color: rgba(223,223,255,0.39);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .main-container {
            width: 80%;
            max-width: 1000px;
            max-height: 500px;
            min-width: 600px;
            background-color: white;
            font-size: 0;
            border-radius: 20px;
            box-shadow: 0 0 50px 0 rgb(146,146,146,0.63);
        }
        .main-container .container-item{
            display: inline-block;
            width: 50%;
            vertical-align: middle;
        }

        .main-container .img-container {
            background-color: burlywood;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }
        .main-container .text-container .code{
            font-size: 120px;
            font-family: Arial, Helvetica, sans-serif;
            color: rgb(86,86,253);
            font-weight: bolder;
            text-align: center;
        }

        .main-container .text-container .message{
            font-size: 20px;
            text-align: center;
            font-weight: 200;
        }

        .main-container .text-container .action{
            font-size: 15px;
            font-weight: 200;
            text-align: center;
            text-decoration-line: underline;
            cursor: pointer;
            padding: 20px 0;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="img-container container-item">
            <img src="404.svg" alt="">
        </div>
        <div class="text-container container-item">
            <div class="code">404</div>
            <div class="message">查看的頁面已經飛往別的星球了呢...</div>
            <div class="action">返回首頁</div>
        </div>
    </div>
</body>
</html>

4. 帶動畫的輸入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帶動畫的輸入框</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html {
            height: 100vh;
        }

        body {
            background-color: rgb(51,51,51);
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        }

        .panel {
            text-align: center;
            padding: 10% 0;
        }

        .panel .btn-container {
            display: inline-block;
        }

        .panel .btn-container input {
            height: 60px;
            border: 0;
            outline: 0;
            width: 120px;
            border-radius: 30px;
            background-color: rgb(104,101,101);
            color: #fff;
            font-size: 20px;
            padding: 0 20px;
            vertical-align: middle;
            transition: .2s;
        }
        ::-webkit-input-placeholder {
            color: #fff;
            font-size: 20px;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

        }

        .panel .btn-container  .btn{
            display: inline-block;
            height: 60px;
            background-color: rgb(239,77,138);
            line-height: 60px;
            font-size: 20px;
            color: #fff;
            font-weight: bold;
            width: 170px;
            border-radius: 30px;
            margin-left: -170px;
            cursor: pointer;
            transition: .2s;

        }

        .panel .btn-container:hover input{
            width: 400px;
            animation: inputAction .4s ease-in-out;
        }

        .panel .btn-container:hover .btn{
            width: 100px;
            height: 60px;
            margin-left: -100px;
            animation: btnAction .4s ease-out;
        }

        @keyframes inputAction {
            0%{
                width: 400px;
            }
            60%{
                width: 450px;

            }
            100%{
                width: 400px;
            }
        }

        @keyframes btnAction {
            0%{
                width: 100px;
            height: 60px;
            margin-left: -100px;
            }
            60%{
                width: 80px;
            height: 60px;
            margin-left: -60px;

            }
            100%{
                width: 100px;
            height: 60px;
            margin-left: -100px;
            }
        }
    </style>
</head>
<body>
    <div class="panel">
        <div class="btn-container">
            <input type="text" placeholder="please input your email">
            <div class="btn">Email</div>
        </div>
    </div>
</body>
</html>

推薦一個漸變配色網站:https://www.sj520.cn/tools/jianbian/

推薦一個常用顏色網站：https://flatuicolors.com/palette/defo

css3：發光按鈕、漂亮的登錄框、滿意的404、帶動畫的輸入框

1.發光按鈕

2.漂亮的登錄框：

3.滿意的404

4. 帶動畫的輸入框

Go: 協程的生命週期管理

Android: app中內置靜態網頁和wifi傳圖

Python : 一文學會辦公自動化(Word、Excel、PPT）

壓測工具：jmeter

瀏覽器的渲染機制、提升頁面性能、錯誤監控上報

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結