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 高级特性：圆角、阴影与动画
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（默认）linearease-inease-outease-in-outcubic-bezier(n,n,n,n)
- direction：
normal（默认）reversealternatealternate-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>
动画变化如下：
总结
以上就是今天要讲的内容，本文简单记录了radiu、shadow、animation动画，仅作为一份简单的笔记使用，大家根据注释理解