css入门学习day06笔记

最新推荐文章于 2024-10-09 14:44:12 发布

Perryc

最新推荐文章于 2024-10-09 14:44:12 发布

阅读量145

点赞数

分类专栏： HTML基础文章标签： css css动画 html基础动画实例动画效果

本文链接：https://blog.csdn.net/Perryc/article/details/98970167

版权

HTML基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

css动画实例（续）

css外联布局：

html {
	color: #333;
	font:normal 12px '微软雅黑','Microsoft YaHei';
}
body,ul,ol,p,h1,h2,h3 {
	margin: 0;
	padding: 0;
}
ul,ol {
	list-style: none;
}
a {
	text-decoration: none;
	color: #333;
}

一、伸缩

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画</title>
	<style>
		.box {
			width: 300px;
			height: 200px;
			font-size: 0;
			border: 1px solid red;
			overflow: hidden;
			transition-property: border;
			transition-duration: 2s;
		}
		.box:hover{
			border: 10px solid teal;
		}	

		img {
			width: 100%;
			transition-property: transform;
			transition-duration: 3s;
			transition-timing-function: linear;
		}	
		.box:hover > img{
			transform: scale(2);
			/*animation-name: dong;*/
			/*animation-duration: 3s;*/
		}
		@keyframes dong {
			from {
				transform: scale(1);
			}
			to {
				transform: scale(2);
			}
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="./image/lianjia_03.png" alt="">
	</div>
</body>
</html>

效果图：

在这里插入图片描述

二、变形


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>变形</title>
	<style>
		body {
			margin: 0;
		}
		.box {
			width: 300px;
			height: 300px;
			text-align: center;
			line-height: 300px;
			background-color: pink;
			transition: transform 2s linear;
			transform-origin: center;
		}
		.box:hover {
			transform: translateX(-200px);
		}
		.cell {
			height: 300px;
			background-color: lightblue;
		}
	</style>
</head>
<body>
	<div class="box">hello world</div>
	<div class="cell"></div>
</body>
</html>

效果图：

在这里插入图片描述

三、伸缩盒

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>媒体查询</title>
	<link rel="stylesheet" href="../common.css">
	<style>
		.products {
		}
		.products > ul{
		}
		.products > ul > li {
			height: 100px;
			margin-bottom: 20px;
			background-color: lightblue;
		}
		/*pad*/
		@media screen and (min-width: 768px) and (max-width: 1024px) {
			.products > ul{
				display: flex;
				flex-wrap: wrap;
			}
			.products > ul > li {
				width: 49%;
				margin-right: 2%;
			}
			.products > ul > li:nth-child(2n) {
				margin-right: 0;
			}
		}
		/*pc*/
		@media screen and (min-width: 1024px) {
			.products {
				width: 1060px;
				margin: 0 auto;
				background-color: pink;
			}
			.products > ul::after {
				display: block;
				content: "";
				clear: both;
			}
			.products > ul > li {
				width: 250px;
				margin-right: 20px;
				float: left;
			}
			.products > ul > li:nth-child(4n) {
				margin-right: 0;
			}
		}
	</style>
</head>
<body>
	<!-- 
		pc 一行四列，容器宽度为1200px 居中
		pad 一行两列，满屏显示
		phone 	一行一列，满屏显示
		移动优先
	-->
	<div class="products">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
</html>