一、CSS过渡与变换效果
需要实现过渡和变换效果时，使用CSS动画是一种常见的方法。CSS动画允许我们在元素上应用一系列的动画效果，从而创建出流畅和引人注目的过渡和变换效果。
-
`transition`属性：通过指定过渡的属性、持续时间和过渡函数，我们可以实现元素属性的平滑过渡。在例子中，我们使用了`transition: all 1s ease-in-out;`将所有属性的过渡效果设置为1秒，并且使用了`ease-in-out`过渡函数，使过渡效果更加平滑。
-
`transform`属性：通过指定元素的变换操作，我们可以实现元素的旋转、缩放、平移等变换效果。在例子中，我们使用了`transform: rotate(360deg);`将元素绕中心点旋转360度，从而实现了旋转效果。
案例源码
html
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
transition: all 1s ease-in-out;
animation: rotate 2s infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// JavaScript代码
</script>
</body>
</html>案例效果图
这个案例效果使用了`@keyframes`规则来定义了一个动画序列。通过指定动画的关键帧（0%和100%），定义动画在不同时间点的样式。设置了0%时元素的旋转角度为0度，100%时元素的旋转角度为360度，从而实现了无限旋转的效果。
二、学校官网网页
案例源码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学校官网网页</title>
<style>
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
}
/* 导航栏容器 */
.container {
height: 70px;
background-color: #9a3032;
width: 100%;
}
/* 导航栏项 */
.nav-item {
float: left;
color: white;
height: 40px;
line-height: 70px;
margin-left: 20px;
padding-left: 5px;
padding-right: 5px;
position: relative;
}
/* 鼠标悬停效果 */
.nav-item:hover {
background-color: white;
color: #9a3032;
}
/* 下拉菜单容器 */
.dropdown {
display: none;
position: absolute;
width: 300px;
padding: 10px;
left: 0;
}
/* 鼠标悬停显示下拉菜单 */
.nav-item:hover .dropdown {
display: block;
}
/* 下拉菜单项 */
.dropdown ul {
list-style: none;
}
.dropdown ul li {
color: black;
line-height: 28px;
margin-left: 15px;
font-size: 15px;
}
.dropdown ul li::before {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #9a3032;
content: "";
margin-right: 10px;
}
/* 拉伸导航栏宽度 */
.container .frist_div {
width: 1500px;
}
/* 下拉菜单容器宽度 */
.container .frist_div .dropdown {
width: 400px;
}
</style>
</head>
<body>
<div class="container">
<div class="frist_div">
<div class="nav-item">首页</div>
<div class="nav-item">
学校概况
<div class="dropdown">
<img src="subnav-img.png" />
<ul>
<li>学校简介</li>
<li>校长寄语</li>
<li>学校领导</li>
<li>学校风光</li>
<li>学校标识</li>
</ul>
</div>
</div>
<div class="nav-item">
组织机构
<div class="dropdown">
<img src="subnav-img.png" alt="" />
<ul>
<li>党群机构</li>
<li>行政部门</li>
<li>二级学院</li>
</ul>
</div>
</div>
<div class="nav-item">
党群组织
<div class="dropdown">
<img src="subnav-img.png" alt="" />
<ul>
<li>党委介绍</li>
<li>党员之家</li>
<li>党建活动</li>
</ul>
</div>
</div>
<div class="nav-item">
教育教学
<div class="dropdown">
<img src="subnav-img.png" alt="" />
<ul>
<li>本科教育</li>
<li>职业教育与继续教育</li>
<li>教研与科研</li>
<li>教学动态</li>
</ul>
</div>
</div>
<div class="nav-item">
国际教育
<div class="dropdown">
<img src="subnav-img.png" alt="" />
<ul>
<li>国际交流中心</li>
<li>国际教育学院</li>
<li>国际联合培养</li>
<li>英才计划</li>
</ul>
</div>
</div>
<div class="nav-item">
校园生活
<div class="dropdown">
<img src="subnav-img.png" alt="" />
<ul>
<li>校园设备</li>
<li>教学设施</li>
<li>餐饮服务</li>
</ul>
<div>
<ul>
<li>住宿服务</li>
<li>网络服务</li>
<li>综合服务</li>
</ul>
</div>
</div>
</div>
<div class="nav-item">
学生服务
<div class="dropdown">
<img src="subnav-img.png" alt="" />
<ul>
<li>学工动态</li>
<li>学生会</li>
<li>学生自助</li>
<li>心理健康</li>
<li>资料下载</li>
</ul>
</div>
</div>
<div class="nav-item">
招生就业
<div class="dropdown">
<img src="img/1.png" alt="" />
<ul>
<li>招生网</li>
<li>就业网</li>
</ul>
</div>
</div>
<div class="nav-item">
人才招聘
<div class="dropdown">
<img src="img/1.png" alt="" />
<ul>
<li>招聘公告</li>
<li>联系我们</li>
</ul>
</div>
</div>
<div class="nav-item">
校友会
</div>
</div>
</div>
</body>
</html>案例效果图
使用CSS动画实现过渡和变换效果可以：
-
硬件加速：CSS动画可以利用浏览器的硬件加速功能，使动画更加流畅和高效。这意味着动画会在GPU上进行处理，而不是在CPU上，可以提供更好的性能和更少的卡顿。
-
简单易用：使用CSS动画非常简单，只需通过CSS属性和关键帧来定义动画效果即可。无需编写复杂的JavaScript代码，减少了开发的复杂性和工作量。
-
性能优化：CSS动画是基于浏览器的渲染引擎实现的，因此可以进行更好的性能优化。浏览器可以根据需要优化和合并动画，从而减少对CPU和内存的使用，提高页面的响应速度和性能。
-
跨浏览器兼容性：CSS动画在现代浏览器中得到广泛支持，并且可以通过添加浏览器前缀来兼容旧版浏览器。这使得开发者可以在不同的浏览器中实现一致的过渡和变换效果，而无需担心兼容性问题。
-
可控性和可重用性：CSS动画允许我们对动画进行精确的控制，包括动画的持续时间、过渡函数、延迟等。