CSS- 4.6 radiu、shadow、animation动画

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

HTML系列文章已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！

点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！

系列文章目录

CSS- 1.1 css选择器

CSS- 2.1 实战之图文混排、表格、表单、学校官网一级导航栏

CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性

CSS- 4.1 浮动（Float）

CSS- 4.2 相对定位（position: relative）

CSS- 4.3 绝对定位（position: absolute）&学校官网导航栏实例

CSS- 4.4 固定定位（fixed）& 咖啡售卖官网实例

CSS- 4.5 css + div 布局 & 简易网易云音乐官网布置实例

CSS- 4.6 radiu、shadow、animation动画

CSS-5.1 Transition 过渡

系列文章目录

前言

一、CSS 高级特性：圆角、阴影与动画

1.圆角 (border-radius)

基本语法

特殊值

示例

2.阴影 (box-shadow & text-shadow)

盒子阴影 (box-shadow)

文本阴影 (text-shadow)

示例

3.动画 (animation)

关键概念

基本语法

简写属性

常用动画属性值

示例

结合使用示例

二、代码实例

1. radiu+shadow代码实例如下：

2. animation动画代码如下：

总结

前言

小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

一、CSS 高级特性：圆角、阴影与动画

1.圆角 (border-radius)

border-radius 属性用于为元素添加圆角效果，可以创建从轻微圆角到完全圆形的各种效果。

基本语法

css

.element {border-radius: 10px; /* 四个角相同 */border-radius: 10px 20px; /* 左上右下/右上左下 */border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */
}

特殊值

50%：创建圆形（当元素是正方形时）
100%：创建椭圆形

示例

css

.button {border-radius: 25px; /* 轻微圆角按钮 */
}.circle {width: 100px;height: 100px;border-radius: 50%; /* 圆形 */
}

2.阴影 (box-shadow & text-shadow)

盒子阴影 (box-shadow)

为元素添加阴影效果，增强立体感。

css

.element {box-shadow: h-offset v-offset blur spread color inset;
}

h-offset：水平偏移（必需）
v-offset：垂直偏移（必需）
blur：模糊半径（可选）
spread：阴影扩展（可选）
color：阴影颜色（可选）
inset：内部阴影（可选）

文本阴影 (text-shadow)

为文本添加阴影效果。

css

.text {text-shadow: h-offset v-offset blur color;
}

示例

css

.card {box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 轻微浮动效果 */
}.highlight {text-shadow: 2px 2px 4px #000000; /* 文字突出效果 */
}.inset-shadow {box-shadow: inset 0 0 10px rgba(0,0,0,0.2); /* 内部凹陷效果 */
}

3.动画 (animation)

CSS 动画允许在不使用 JavaScript 的情况下创建复杂的动画效果。

关键概念

@keyframes：定义动画序列
animation-name：指定 @keyframes 名称
animation-duration：动画持续时间
animation-timing-function：速度曲线
animation-delay：动画开始前的延迟
animation-iteration-count：播放次数
animation-direction：播放方向
animation-fill-mode：动画前后样式
animation-play-state：播放状态

基本语法

css

@keyframes slidein {from {transform: translateX(0%);}to {transform: translateX(100%);}
}.element {animation-name: slidein;animation-duration: 3s;animation-timing-function: ease-in-out;animation-delay: 1s;animation-iteration-count: infinite;animation-direction: alternate;
}

简写属性

css

.element {animation: slidein 3s ease-in-out 1s infinite alternate;
}

常用动画属性值

timing-function：
- ease（默认）
- linear
- ease-in
- ease-out
- ease-in-out
- cubic-bezier(n,n,n,n)
direction：
- normal（默认）
- reverse
- alternate
- alternate-reverse

示例

css

/* 淡入效果 */
@keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }
}.fade-in {animation: fadeIn 1s ease-in;
}/* 旋转动画 */
@keyframes spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }
}.spinner {animation: spin 2s linear infinite;
}/* 弹跳球 */
@keyframes bounce {0%, 100% { transform: translateY(0); }50% { transform: translateY(-20px); }
}.ball {animation: bounce 1s ease infinite;
}

结合使用示例

css

.fancy-button {border-radius: 25px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);animation: pulse 2s infinite;
}@keyframes pulse {0% {box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4);}70% {box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);}100% {box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);}
}

这些 CSS 特性可以单独使用，也可以组合使用，为网页元素添加丰富的视觉效果和交互体验。

二、代码实例

1. radiu+shadow代码实例如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css3-radiu+shadow</title><style type="text/css">.div1 {width: 400px;height: 100px;border: 1px solid black;/* 取一个值为四个角为30px半径的圆 *//* 取两个值第一个值为左上右下的半径值 右上左下的半径值 *//* border-radius: 30px; *//* 某一个角的时候 第一个值代表水平半径 第二个值为垂直半径 */border-top-left-radius: 30px 50px;}.div2 {width: 100px;height: 100px;background-color: #CCCCCC;border-radius: 50px;}.div3 {width: 400px;height: 100px;background-color: #f90;box-shadow: 5px 5px 5px #868686;}h1 {text-shadow: 2px 2px 2px lawngreen;}</style></head><body><h1>border-radius 圆角边框或背景圆角</h1><div class="div1"></div><div class="div2"></div><h1>阴影 box-shadow text-shadow</h1><p>阴影默认为右下方，可以通过设置水平偏移为负值改变阴影的方向</p><div class="div3"></div></body>
</html>

代码运行：

2. animation动画代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css3-animation动画</title><style type="text/css">div {position: absolute;width: 300px;height: 300px;border: 1px solid black;border-radius: 30px;text-align: center;line-height: 300px;font-size: 24px;}@keyframes donghua1 {10% {background-color: red;left: 0px;}30% {background-color: yellow;font-size: 40px;}60% {background-color: green;color: white;}90% {background-color: blue;left: 300px;}}div:hover {animation: donghua1 5s infinite;}</style></head><body><h1>动画animation</h1><p>第一步创造一个动画</p><p>第二步调用动画 时间 动作</p><div>这是一个动画</div></body>
</html>

动画变化如下：