css效果制作
CSS 效果制作方法
阴影效果
使用 box-shadow 属性为元素添加阴影：
.box {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}参数依次为水平偏移、垂直偏移、模糊半径和颜色。
渐变背景
线性渐变通过 linear-gradient 实现：
.gradient {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}径向渐变使用 radial-gradient：
.radial {
background: radial-gradient(circle, #ff7e5f, #feb47b);
}动画效果
通过 @keyframes 定义动画：
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.slide-element {
animation: slide 2s infinite alternate;
}悬停交互
利用 :hover 伪类触发变化：
.button:hover {
background-color: #4CAF50;
transform: scale(1.05);
}过渡效果transition 平滑属性变化：
.transition {
transition: all 0.3s ease-in-out;
}3D 变换
结合 transform 实现立体效果：
.card {
transform: rotateY(15deg);
perspective: 1000px;
}文本特效
文字描边和发光效果：
.text {
text-shadow: 0 0 5px #fff, 0 0 10px #fff;
-webkit-text-stroke: 1px #000;
}滤镜效果
使用 filter 属性调整视觉表现：
.filter {
filter: blur(2px) brightness(1.2);
}响应式设计
媒体查询适配不同设备：
@media (max-width: 768px) {
.responsive {
font-size: 14px;
}
}Flexbox 布局
快速构建灵活布局：
.container {
display: flex;
justify-content: space-between;
}网格布局
CSS Grid 创建复杂结构：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}自定义滚动条
美化滚动区域：
.scrollable::-webkit-scrollbar {
width: 8px;
background: #f1f1f1;
}变量使用
CSS 变量提升可维护性：
:root {
--main-color: #3498db;
}
.element {
color: var(--main-color);
}遮罩效果mask-image 实现创意形状：
.masked {
mask-image: url('mask.png');
}混合模式mix-blend-mode 控制图层混合：
.blend {
mix-blend-mode: multiply;
}
