First look at the effect is a dynamic gif, pay attention to observe: state
See it. The border color of the circle div keeps changing automatically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main</title>
<style rel="stylesheet">
#showMenu{
width: 500px;
height: 400px;
margin: auto;
border: 8px solid;
border-image: linear-gradient(45deg, gold, deeppink) 1;
clip-path: inset(0px round 10px);
animation: huerotate 6s infinite linear;
filter: hue-rotate(360deg);
}
@keyframes huerotate {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rorate(360deg);
}
}
#showMenu ul li{
padding: 5px;
list-style: none;
}
/* border: 2px solid cadetblue;*/
/* border-image: linear-gradient(to right, #8f41e9, #578aef) 3;*/
/* border-radius: 12px;*/
/* width: 500px;*/
/* height: 500px;*/
/* margin: auto;*/
/*}*/
</style>
</head>
<body>
<div id="showMenu">
<h1>OK,RUNING!</h1>
<ul>
<li><a href="sensordata.html">1. 查看实时数据</a></li>
<li><a href="setOffLineData.html">2. 离线数据设置</a></li>
</ul>
</div>
</body>
</html>