css3制作
CSS3 制作常用效果
CSS3 提供了许多强大的特性，可以用于创建各种视觉效果和交互功能。以下是一些常见的 CSS3 制作方法和示例：
动画效果
使用 @keyframes 和 animation 属性可以创建平滑的动画效果。
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in-out;
}渐变背景
CSS3 支持线性渐变和径向渐变，可以替代传统图片背景。
.linear-gradient {
background: linear-gradient(to right, #ff9966, #ff5e62);
}
.radial-gradient {
background: radial-gradient(circle, #ff9966, #ff5e62);
}阴影效果box-shadow 和 text-shadow 可以为元素和文本添加阴影。
.box-shadow {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}圆角边框border-radius 可以轻松实现圆角效果。
.rounded {
border-radius: 10px;
}
.circle {
border-radius: 50%;
}过渡效果transition 可以在属性变化时添加平滑过渡。
.button {
background: #3498db;
transition: background 0.3s ease;
}
.button:hover {
background: #2980b9;
}Flexbox 布局
Flexbox 是一种强大的布局方式，适合响应式设计。
.container {
display: flex;
justify-content: center;
align-items: center;
}
.item {
flex: 1;
}Grid 布局
CSS Grid 提供了更复杂的二维布局能力。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
background: #f0f0f0;
}媒体查询
媒体查询用于响应式设计，适配不同屏幕尺寸。
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}自定义字体@font-face 允许加载自定义字体。
@font-face {
font-family: 'CustomFont';
src: url('custom-font.woff2') format('woff2');
}
body {
font-family: 'CustomFont', sans-serif;
}3D 变换
CSS3 支持 3D 变换，可以创建立体效果。
.rotate-3d {
transform: rotateY(45deg);
}这些 CSS3 特性可以单独使用或组合使用，以实现更丰富的视觉效果和交互体验。
