CSS3的核心功能介绍及实战使用示例-EW帮帮网

以下是CSS3的核心功能介绍及实战使用示例，涵盖选择器、布局、动画、样式增强等方面，结合代码演示：

一、选择器升级

CSS3新增多种选择器，精准定位元素：

伪类选择器

:hover（鼠标悬停）：

a:hover { color: red; } /* 链接悬停变红 */

:nth-child(n)（第n个子元素）：

li:nth-child(2) { text-decoration: underline; } /* 第二个列表项下划线 */

:not()（排除匹配）：

div:not(.active) { opacity: 0.5; } /* 非active类的div半透明 */

伪元素选择器

::before/::after（插入内容）：

p::before { content: "✨ "; } /* 段落前添加星星 */

::first-letter（首字母样式）：

p::first-letter { font-size: 2em; } /* 首字母放大 */

二、布局革新

1. Flexbox弹性布局

容器属性：

.container { display: flex; justify-content: space-between; }

项目属性：

.item { flex: 1; /* 等比例伸缩 */ }

实战示例：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

2. Grid网格布局

二维网格定义：

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

跨行/列设置：

.item-2 { grid-column: span 2; } /* 跨越两列 */

实战示例：

<div class="grid">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item item-2">C</div>
</div>

三、动画与过渡

1. 过渡（Transition）

平滑变化：

.box { transition: transform 0.5s ease; }
.box:hover { transform: scale(1.1); } /* 悬停放大 */

2. 关键帧动画（@keyframes）

旋转动画：

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

四、样式增强

边框与背景

圆角边框：

.card { border-radius: 10px; } /* 圆角效果 */

渐变背景：

.header { background: linear-gradient(to right, #f00, #ff0); } /* 线性渐变 */

图像边框：

.frame { border-image: url('border.png') round; } /* 自定义边框图像 */

文本与字体

文字阴影：

h1 { text-shadow: 2px 2px 5px rgba(0,0,0,0.3); }

自定义字体：

@font-face { font-family: 'MyFont'; src: url('font.woff2'); }
.text { font-family: 'MyFont', sans-serif; }

透明度与阴影

半透明背景：

.overlay { background-color: rgba(0,0,0,0.5); }

盒阴影：

.card { box-shadow: 0 4px 8px rgba(0,0,0,0.2); } /* 阴影效果 */

五、响应式设计

1. 媒体查询（Media Query）

适配不同屏幕：

@media (max-width: 768px) { .menu { flex-direction: column; } } /* 移动端垂直排列 */

2. 弹性单位

相对单位：

.container { width: 80%; } /* 百分比宽度 */

六、实战综合示例

场景：响应式导航栏 + 动画卡片

<style>
  body { font-family: 'Arial', sans-serif; margin: 0; }
  .nav { display: flex; justify-content: space-between; padding: 10px; }
  .card { width: 30%; margin: 10px; background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.3s; }
  .card:hover { transform: translateY(-10px); } /* 悬浮动画 */
  @media (max-width: 768px) { .card { width: 80%; } } /* 移动端适配 */
</style>
<div class="nav">
  <h1>Logo</h1>
  <div>Menu 1 | Menu 2 | Menu 3</div>
</div>
<div class="card">Content 1</div>
<div class="card">Content 2</div>
<div class="card">Content 3</div>

七、总结与技巧

浏览器兼容：部分CSS3属性需添加前缀（如-webkit-）。
性能优化：避免过度使用动画和复杂选择器。
开发工具：使用Chrome DevTools实时调试样式。

通过以上功能，CSS3可显著提升网页的美观性、交互性和开发效率，是现代前端开发的基石。

CSS3的核心功能介绍及实战使用示例