css3单元素运动 |css中boxshadow

代码示例：
/* 改变背景颜色和大小 */
div {
background-color: red;
width: 100px;
height: 100px;
transition: background-color 2s, width 2s, height 2s;
}
div:hover {
background-color: blue;
width: 150px;
height: 150px;
}
/* 翻转效果 */
div {
transform: rotate(0deg);
transition: transform 1s;
}
div:hover {
transform: rotate(180deg);
}
/* 动画效果 */
@keyframes myAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
div {
animation: myAnimation 2s infinite linear;
}

如上代码所示，大家可以使用CSS3中的transition属性来制作元素随鼠标悬浮改变背景颜色和大小的动画效果。这里设置了背景颜色、宽度和高度的transition属性，表示当这些属性发生改变时，元素会在2秒的时间内进行平滑过渡。

同时，大家也可以使用CSS3的transform属性来实现元素的翻转效果。在上面的代码块中，大家使用了transform: rotate()属性来使元素进行顺时针旋转，而transition属性则实现了元素旋转的平滑过渡效果。

此外，大家还可以使用CSS3的animation属性来实现元素的动画效果。在上面的代码块中，大家使用了@keyframes规则来定义一组动画效果，从这里面大家可以看出这将是一个从0°到360°的旋转动画。设置了animation属性后，元素会不断地在2秒内进行循环旋转。

总的来说，CSS3单元素动画效果的制作方式简单而灵活，可以让大家实现更加生动和有趣的页面效果。