css3 动画从无到有 |ecplise 引用css

/* 简单动画 */
#example{
width: 100px;
height: 100px;
background-color: red;
transition: width 2s; /* 过渡效果的持续时间 */
}
#example:hover{
width: 200px; /* 改变元素的宽度 */
}
/* 动画效果 */
.animation{
animation-name: move;
animation-duration: 3s;
}
@keyframes move{
from {transform: translateX(0);} /* 开始位置 */
to {transform: translateX(200px);} /* 结束位置 */
}
/* 3D动画 */
.box{
width: 150px;
height: 150px;
perspective: 500px; /* 透视效果 */
}
.box:hover .inner{
transform: rotateX(360deg) rotateY(360deg);
}
.inner{
width: 100%;
height: 100%;
transform-style: preserve-3d; /* 保留 3D 效果 */
transition: transform 1s;
}
.face{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* 隐藏背面 */
}
.front{transform: translateZ(75px);}
.back{transform: translateZ(-75px) rotateY(180deg);}
.left{transform: rotateY(-90deg) translateX(-75px);}
.right{transform: rotateY(90deg) translateX(75px);}
.top{transform: rotateX(90deg) translateY(-75px);}
.bottom{transform: rotateX(-90deg) translateY(75px);}

以上是 CSS3 动画的三个示例，可以实现简单的过渡效果、动画效果和 3D 动画效果。在实际开发中，可以根据设计需求选择相应的动画效果，从而使网站更具活力、更加现代化。