CSS- 4.6 radiu、shadow、animation动画

Yvonne爱编码

已于 2025-05-20 10:47:23 修改

阅读量574

点赞数 29

分类专栏：前端文章标签： css 前端状态模式 html HBuilder

于 2025-05-19 09:49:31 首次发布

本文链接：https://blog.csdn.net/HRDMN/article/details/148049907

版权

前端专栏收录该内容

21 篇文章

订阅专栏

本系列可作为前端学习系列的笔记，代码的运行环境是在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 过渡

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

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>

动画变化如下：