<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
transition: inherit;
}
body {
width: 100vw;
height: 100vh;
font-size: 3em;
padding: 30px;
transition: 2s;
display: flex;
justify-content: center;
align-items: center;
background: #34495e;
color: #34495e;
}
span {
font: bold;
}
</style>
</head>
<body>
<h1>lawsssscat.com</h1>
<span>hd</span>
</body>
<script>
function Color(elem) {
this.elem = elem
this.colors = ['#f1c40f', '#2ecc71', '#e74c3c', '#9b59b6'];
this.run = function (target = 'background') {
setInterval(() => {
let i = Math.floor(Math.random() * this.colors.length)
this.elem.style[target] = this.colors[i];
}, 1000)
}
}
new Color(document.body).run();
let h1 = new Color(document.querySelector('h1'))
h1.run();
h1.run('color')
</script>
</html>
【代碼】js/css/html - 漂亮的隨機色背景漸變效果
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.