在 CSS 中，可以通过以下几种方式来控制页面的动效和渐变效果：
过渡效果可以让页面中的元素在状态改变时产生平滑的过渡效果。具体使用方法如下：
<style>
.box{
width: 100px;
height: 100px;
background-color: #f00;
transition: all .5s;
}
.box:hover{
width: 200px;
height: 200px;
background-color: #0f0;
}
</style>
<div class="box"></div>
上述代码表示，在鼠标悬浮在 .box 元素上时，元素的宽高和背景色会在 0.5 秒内发生改变，产生平滑的过渡效果。
动画效果可以让页面中的元素产生更为复杂的动态效果。具体使用方法如下：
<style>
@keyframes myanimation{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
.box{
width: 100px;
height: 100px;
background-color: #f00;
animation: myanimation 2s linear infinite;
}
</style>
<div class="box"></div>
上述代码表示，.box 元素会被旋转一圈，旋转时间为 2 秒，旋转方式为线性，无限重复。
渐变效果可以让页面中的元素的背景色产生渐变效果。具体使用方法如下：
<style>
.box{
width: 100px;
height: 100px;
background: linear-gradient(to bottom, #f00, #0f0);
}
</style>
<div class="box"></div>
上述代码表示，.box 元素的背景色会从红色渐变成绿色。