本文最后更新于1399天前，其中的信息可能已经有所发展或是发生改变。
临时了解了一部分HTML和CSS自己写的，也有搜的，有错误望指正。勿喷。
<style>
p {
/*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;
}
}
</style>
<html>
<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>
</html>
点击数：92
