css3特效

/* CSS3特效示例：简单的动画效果 */

/* 1. 颜色渐变 */
.gradient {
    background: linear-gradient(to right, #ff7e5f, #feb47b);
}

/* 解释：使用linear-gradient函数创建一个从左到右的颜色渐变，颜色从#ff7e5f渐变到#feb47b。 */

/* 2. 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in-element {
    animation: fadeIn 2s ease-in-out;
}

/* 解释：定义了一个名为fadeIn的动画，元素从透明度为0逐渐变为透明度为1，持续时间为2秒，使用ease-in-out使动画更加平滑。 */

/* 3. 3D旋转效果 */
.rotate3d {
    transform: rotateY(45deg);
    transition: transform 1s;
}

.rotate3d:hover {
    transform: rotateY(360deg);
}

/* 解释：当鼠标悬停在元素上时，元素会从45度角旋转到360度，产生3D旋转的效果，过渡时间为1秒。 */

/* 4. 文字阴影 */
.text-shadow {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* 解释：给文字添加阴影效果，阴影偏移2px，模糊半径为5px，颜色为半透明黑色。 */