功能:每2秒通过JS进行颜色变化(随机数)、边框角度变化(有变化过程)
效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>颜色、边框角度变换</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
width: 100px;
height: 100px;
list-style: none;
text-align: center;
line-height: 100px;
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<li id="li_1">小一</li>
<li id="li_2">小二</li>
<li id="li_3">小三</li>
</ul>
</body>
</html>
<script type="text/javascript">
radius();
color();
// 每两秒变换颜色和角度
setInterval(function () {
color();
radius();
},2000)
// 随机数变换颜色
function color() {
var li_1 = document.getElementById("li_1");
var li_2 = document.getElementById("li_2");
var li_3 = document.getElementById("li_3");
li_1.style.backgroundColor='rgb('+random()+','+random()+','+random()+')';
li_2.style.backgroundColor='rgb('+random()+','+random()+','+random()+')';
li_3.style.backgroundColor='rgb('+random()+','+random()+','+random()+')';
}
// 变换角度(2秒内)
function radius() {
var li = document.getElementsByTagName("li");
if (li[0].style.borderRadius=="0%") {
for(var i=0;i<3;i++){
li[i].style.borderRadius="50%";
li[i].style.transition="all 2s";
}
}else{
for(var i=0;i<3;i++){
li[i].style.borderRadius="0%";
li[i].style.transition="all 2s";
}
}
}
// 获取0-255的随机数
function random() {
return Math.floor(Math.random()*1000000)%256;
}
</script>