css3动画属性集合 |css3浮动导航栏效果

/* 定义动画关键帧  */
@keyframes myanimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 定义动画效果属性 */
animation: myanimation 2s linear;
/* 旋转x度数属性 */
transform: rotateX(45deg);
/* 淡入属性 */
opacity: 0;
animation: fadeIn 2s;
/* 缩放属性 */
transform: scale(1.5);
/* 移动属性 */
transform: translate(50px, 50px);
/* 旋转属性 */
transform: rotate(45deg);
/* 透视属性 */
transform: perspective(500px);
/* 3D旋转属性 */
transform: rotate3d(x, y, z, angle);
/* 过渡属性 */
transition: property duration timing-function delay;
/* 阴影效果属性 */
box-shadow: h-shadow v-shadow blur spread color inset;

这些动画属性不仅可以单独使用，还可以通过组合实现更多丰富的动画效果。如果你想创建一个更加独特和流畅的动画效果，可以尝试一些更高级的动画技术，例如SVG动画和canvas动画。 这些动画属性将改变网页的外观和行为，并且增强用户体验。