主页一言自定义代码模块二[更新]
本文最后更新于1711天前,其中的信息可能已经有所发展或是发生改变。

临时了解了一部分HTML和CSS自己写的,也有搜的,有错误望指正。勿喷。

<style>
        a {
            text-decoration: none
            text-align: center;
        }
        body {
    
            text-align: center;
    
        }
    
        .copyright {
            position: absolute;
            bottom: 0;
            text-align: center;
        }
    
        .copyright a {
            text-decoration: none;
            color: #16a085;
            text-align: center;
        }
    
        .copyright a:hover {
            text-decoration: underline;
            text-align: center;
        }
    
        .button {
                text-align: center;
            position: relative;
            padding: 1em 1.5em;
            border: none;
            background-color: transparent;
            cursor: pointer;
            outline: none;
            font-size: 18px;
            margin: 1em 0.8em;
            

        }
        #hitokoto {
        /*margin: 100px auto;*/
        /*border: 1px solid #0094ff;*/
        text-align: center;
        /*font-size: 15px;*/
        width: 100%;
        padding: 20px;
        background-image: linear-gradient(to right, #3498db 0%, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db 100%);
        background-size: 200% 100%;
        -webkit-background-clip: text;
        color: transparent;
        animation: move 3s infinite linear;
    }

    @keyframes move {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: -100% 0;
        }
    }
    
        .button.type1 {
            color: #566473;
        }
    
        .button.type1.type1::after,
        .button.type1.type1::before {
            content: "";
            display: block;
            position: absolute;
            width: 20%;
            height: 20%;
            border: 2px solid;
            transition: all 0.6s ease;
            border-radius: 2px;
        }
    
        .button.type1.type1::after {
            bottom: 0;
            right: 0;
            border-top-color: transparent;
            border-left-color: transparent;
            border-bottom-color: #566473;
            border-right-color: #566473;
        }
    
        .button.type1.type1::before {
            top: 0;
            left: 0;
            border-bottom-color: transparent;
            border-right-color: transparent;
            border-top-color: #566473;
            border-left-color: #566473;
        }
    
        .button.type1.type1:hover:after,
        .button.type1.type1:hover:before {
            width: 100%;
            height: 100%;
        }
    
    </style>
    
    
    
    
    
    <div>
        <button class="button type1">
            <p id="hitokoto">:D 获取中...</p>
    
            <!-- 以下写法,选取一种即可 -->
    
            <!-- 现代写法,推荐 -->
            <!-- 兼容低版本浏览器 (包括 IE),可移除 -->
    
            <script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>
            <!--End-->
            <script>
                fetch('https://v1.hitokoto.cn')
                    .then(function (res) {
                        return res.json();
                    })
                    .then(function (data) {
                        var hitokoto = document.getElementById('hitokoto');
                        hitokoto.innerText = data.hitokoto;
                    })
                    .catch(function (err) {
                        console.error(err);
                    })
            </script>
        </button>
    </div>

 

点击数:72

    暂无评论

    发送评论 编辑评论

    
    				
    |´・ω・)ノ
    ヾ(≧∇≦*)ゝ
    (☆ω☆)
    (╯‵□′)╯︵┴─┴
     ̄﹃ ̄
    (/ω\)
    ∠( ᐛ 」∠)_
    (๑•̀ㅁ•́ฅ)
    →_→
    ୧(๑•̀⌄•́๑)૭
    ٩(ˊᗜˋ*)و
    (ノ°ο°)ノ
    (´இ皿இ`)
    ⌇●﹏●⌇
    (ฅ´ω`ฅ)
    (╯°A°)╯︵○○○
    φ( ̄∇ ̄o)
    ヾ(´・ ・`。)ノ"
    ( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
    (ó﹏ò。)
    Σ(っ °Д °;)っ
    ( ,,´・ω・)ノ"(´っω・`。)
    ╮(╯▽╰)╭
    o(*////▽////*)q
    >﹏<
    ( ๑´•ω•) "(ㆆᴗㆆ)
    😂
    😀
    😅
    😊
    🙂
    🙃
    😌
    😍
    😘
    😜
    😝
    😏
    😒
    🙄
    😳
    😡
    😔
    😫
    😱
    😭
    💩
    👻
    🙌
    🖕
    👍
    👫
    👬
    👭
    🌚
    🌝
    🙈
    💊
    😶
    🙏
    🍦
    🍉
    😣
    Source: github.com/k4yt3x/flowerhd
    颜文字
    Emoji
    小恐龙
    花!
    上一篇
    下一篇