HTML CSS动画实现图片过渡与变换

最新推荐文章于 2024-05-03 13:51:38 发布

稻草人404

最新推荐文章于 2024-05-03 13:51:38 发布

阅读量1k

点赞数 4

分类专栏： web前端文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_65992344/article/details/137754818

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、CSS过渡与变换效果

需要实现过渡和变换效果时，使用CSS动画是一种常见的方法。CSS动画允许我们在元素上应用一系列的动画效果，从而创建出流畅和引人注目的过渡和变换效果。

1. `transition`属性：通过指定过渡的属性、持续时间和过渡函数，我们可以实现元素属性的平滑过渡。在例子中，我们使用了`transition: all 1s ease-in-out;`将所有属性的过渡效果设置为1秒，并且使用了`ease-in-out`过渡函数，使过渡效果更加平滑。

2. `transform`属性：通过指定元素的变换操作，我们可以实现元素的旋转、缩放、平移等变换效果。在例子中，我们使用了`transform: rotate(360deg);`将元素绕中心点旋转360度，从而实现了旋转效果。

案例源码


<!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度，从而实现了无限旋转的效果。

二、学校官网网页

案例源码

<!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>