本文最后更新于2013天前,其中的信息可能已经有所发展或是发生改变。
临时了解了一部分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