一个例子帮你记住CSS3新特性_css3新特性记不住-CSDN博客

本文链接：https://blog.csdn.net/qq_60248719/article/details/123759553

我是根据这篇文章里的一些特性来设计的，话不多说先贴代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一个例子解决css3新特性</title>
	</head>
	<body>
		<button type="button" id="btn">动起来</button>
		<div id="main">
			<div class="box">
				一个例子解决css3新特性一个例子解决css3新特性一个例子解决css3新特性一个例子解决css3新特性一个例子解决css3新特性一个例子解决css3新特性一个例子解决css3新特性一个例子解决css3新特性一个例子解决css3新特性一个例子解决css3新特性一个例子解决css3新特性一个例子解决css3新特性一个例子解决css3新特性一个例子解决css3新特性一个例子解决css3新特性一个例子解决css3新特性一个例子解决css3新特性一个例子解决css3新特性一个例子解决css3新特性一个例子解决css3新特性
			</div>
		</div>
	</body>
	<style type="text/css">
		#btn {
			margin: 30px;
			background-color: #00aa00;
			color: #FFF;
			border: none;
		}

		#main {
			position: absolute;
			left: 100px;
			top: 100px;
			height: 400px;
			width: 400px;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to left, rgba(193, 64, 0, 1.0), rgba(56, 168, 82, 1.0));
			padding: 20px;
			box-sizing: border-box;
			box-shadow: 8px 8px 8px 8px #888;
			border-radius: 20px;
			transform: rotate(15deg);
		}

		.box {
			/* overflow-x: hidden; */
			/* white-space: nowrap; */
			word-wrap: break-word;
			/* text-overflow: ellipsis; */
			max-height: 100px;
			width: 300px;
			overflow-y: scroll;
			color: #FFF;
			font-weight: bold;
			transition-property: max-height;
			transition-delay: 0;
			transition-duration: 0.5s;
			transition-timing-function: linear;
		}

		.box.open {
			max-height: 1000px;
		}

		.box.hide {
			max-height: 100px;
		}

		@keyframes move {
			0% {
				margin-top: 0px;
			}

			50% {
				margin-top: 100px;
			}

			100% {
				margin-top: 0px;
			}
		}

		@keyframes reduction {
			0% {
				margin-left: 0px;
			}

			50% {
				margin-left: 100px;
			}

			100% {
				margin-left: 0px;
			}
		}

		.move {
			animation-name: move;
			animation-duration: 0.5s;
			animation-delay: 0.5s;
			animation-timing-function: linear;
			animation-iteration-count: 1;
		}

		.reduction {
			animation-duration: 0.5s;
			animation-name: reduction;
			animation-delay: 0.5s;
			animation-timing-function: linear;
			animation-iteration-count: 1;
		}
	</style>
	<script type="text/javascript">
		let btn = document.getElementById('btn')
		let main = document.getElementById('main')
		let box = document.getElementsByClassName('box')[0]
		btn.addEventListener('click', _ => {
			if (box.className.includes('open')) {
				box.className = 'box hide'
				main.className = 'reduction'
			} else {
				box.className = 'box open reduction'
				main.className = 'move'
			}
		})
	</script>
</html>

直接新建一个html文件然后整个替换再运行就可以看到效果了

css3

点击按钮前，我们从下到上来看

1.阴影 box-shadow

2.边框圆角 border-radius

3.盒子新特性 box-sizing:border-box

4.颜色 rgba

5.背景渐变 linear-gradient

6.溢出 overflow:scroll

7.文字换行 word-wrap

8.旋转 transform:rotate

9.弹性盒 justify-content:center