重点在代码里：
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css过度</title>
<style>
#box{
width: 350px;
height: 350px;
margin: 150px auto;
border: solid 10px orange;
background-color: rgb(14, 13, 13);
/* 默认情况下，当一个元素发生变化时，改变是瞬间完成的。
想要过度效果，需要加上过度属性值 */
/* transition-property ,设置过度属性 ，并是说所有css属性都能过度 */
/* transition-property:width; */
/* transition:duration,设置过度时间 */
/* transition: duration 1s; */
/* transition-timing-function,设置动画速率，默认值ease-in-out(开始慢，中间块，结束慢)
设置动漫速率曲线 */
/* transition-timing-function:cubic- */
/* 过度延迟，过度效果在多长时间后执行 */
/* transition-delay 0.5s; */
/* 以上所有属性可一次性完成 */
transition:all 1s;
}
#box:hover{ /*鼠标悬停的效果*/
background-color: #f8e10c;
border: solid 20px orange; /*边框大小及颜色*/
color:rgba(0, 0, 0, 0);
border-radius: 50%; /*援交半径，切割的弧度*/
transform: rotate(360deg); /*旋转的度数*/
}
#box:active{ /*鼠标点击出发的效果*/
box-shadow: 0px 0px 250px rgb(247, 191, 9); /*元素阴影*/
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>运行结果：
效果图1:
效果图2：
效果图3：动态的不能截图