[分享]css3效果图

CSS3是一种现代的CSS技术，其中含有许多灵活和有趣的效果，可以使网站更加吸引人和视觉冲击力更强。下面我们来看一些常见的CSS3效果图。 首先是渐变背景。CSS3提供了lineargradient和...

CSS3是一种现代的CSS技术，其中含有许多灵活和有趣的效果，可以使网站更加吸引人和视觉冲击力更强。下面我们来看一些常见的CSS3效果图。

首先是渐变背景。CSS3提供了linear-gradient和radial-gradient，允许创建简单或复杂的渐变背景。以下是一个线性渐变背景的例子：

.background {
    background: linear-gradient(135deg, #c5e2d2, #e6debf, #f7ede2, #c3cfe2, #c5e2d2);
} 

其次是文本阴影。CSS3的text-shadow属性可以用于添加向文本投射阴影的效果，这种效果可以让文本更加清晰或者更加突出。以下是一个文本阴影的例子：

.text {
    text-shadow: 2px 2px 0px #ccc;
} 

另外还有动画效果。CSS3的animation属性可以用于创建动态的效果，例如动态旋转、缩放、颜色变化、滑动和闪烁等。以下是一个旋转动画的例子：

.animation {
    animation: spin 2s linear infinite;
}
  
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

最后是边框效果。CSS3提供了border-radius和border-image等属性，允许创建具有圆角和自定义边框的元素。以下是一个圆角边框的例子：

.border {
    border-radius: 20px;
    border: 5px solid #ccc;
} 

以上是一些常见的CSS3效果图，当然还有很多其他的效果和属性。使用CSS3可以让我们创造出更多有趣和吸引人的网页UI，让用户对网站产生更深刻的印象。