CSS3基础学习——温故知新

最新推荐文章于 2023-04-06 08:23:07 发布

Yonfly

最新推荐文章于 2023-04-06 08:23:07 发布

阅读量176

点赞数

分类专栏： HTML5+API

本文链接：https://blog.csdn.net/m0_37894611/article/details/105973503

版权

HTML5+API 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				/* 实线边框 */
				border: solid 1px #000000;
				/* 宽度 */
				width: 400px;
				/* 高度 */
				height: 50px;
				/* 文本居中对齐 */
				text-align: center;
				/* 居中 */
				margin: 0 auto;
				/* 上边距50px */
				margin-top: 50px;
			}

			/* 旋转 */
			#div1 {
				transform: rotate(5deg);
			}

			/* 图像边框平铺 */
			#div2 {
				border: solid 15px transparent;
				border-image: url('https://www.runoob.com/images/border.png') 30 30 round;
			}

			/* 图像边框拉升 */
			#div3 {
				border: solid 15px transparent;
				border-image: url('https://www.runoob.com/images/border.png') 30 30 stretch;
			}

			/* 线性渐变 */
			#div4 {
				/* 浏览器不支持默认显示颜色 */
				background-color: red;
				/* 默认从上到下 */
				background-image: linear-gradient(red, blue);
				/* 从左到右 */
				background-image: linear-gradient(to right, red, blue);
				/* 从左上到右下 */
				background-image: linear-gradient(to right bottom, red, blue);
				/* 指定角度 ,角度和时钟起始位置相同*/
				background-image: linear-gradient(60deg, red, blue);
			}

			/* 径向渐变 */
			#div5 {
				/* 颜色节点均匀分布 */
				/* 默认椭圆形 */
				background-image: radial-gradient(red, green, blue);
				/* 颜色节点不均匀分布 */
				/* 可定义形状 */
				background-image: radial-gradient(circle, red 5%, yellow 15%, green 80%);
			}

			#div6 {
				font-size: 32px;
				/* 文本阴影 */
				text-shadow: 15px 5px 5px #FF0000;
				/* 盒子阴影 */
				box-shadow: 5px 5px 5px #FF0000;
			}

			#div7 {
				/* 移动 */
				transform: translate(50px, 10px);
			}

			#div8 {
				/* 缩放对象 */
				transform: scale(0.5, 1.5);
				/* 角度拉升 */
				transform: skew(30deg, 10deg);
			}

			#div9 {
				transform: rotateX(30deg);
				transform: rotateY(30deg);
				transform: rotateZ(30deg);
			}

			#div10 {
				/* 动态效果时长 */
				transition: width 2s, height 2s, transform 2s;
				/* 延时出发动态 */
				transition-delay: 0.5s;
			}

			#div10:hover {
				height: 400px;
				/* 旋转 */
				transform: rotate(180deg);
			}



			#div12 {
				resize: both;
				overflow: auto;
			}

			#div13>div {
				box-sizing: border-box;
				width: 50%;
				border: 1em solid red;
				float: left;
				margin-top: 0;
			}

			#div14 {
				outline: 2px solid red;
				outline-offset: 15px;
			}

			#div11 {
				background: red;
				animation: myfirst 60s linear infinite;
			}

			@keyframes myfirst {

				/* 50%   和  100%  是相对于上面调用事件决定的 */
				34% {
					/* 背景色变成黄色 */
					background: yellow;
					transform: rotate(120deg);
				}

				67% {
					/* 旋转180° */
					background: orange;
					transform: rotate(240deg);
				}

				100% {
					/* 旋转180° */
					background: red;
					transform: rotate(360deg);
				}

			}

			/* 响应式 */
			@media only screen and (max-width: 700px) {
				.responsive {
					width: 49.99999%;
					margin: 6px 0;
				}
			}

			.time {
				height: 200px;
				width: 200px;
				margin-top: 0px;
				border-radius: 50%;
			}

			.h {
				margin-top: 45px;
				height: 50px;
				width: 0px;
				animation: myfirst 343200s linear infinite;
				transform-origin:center bottom;
				border: 3px solid red;
			}

			.m {
				margin-top: -85px;
				height: 80px;
				width: 0px;
				animation: myfirst 3600s linear infinite;
				transform-origin:center bottom;
				border: 2px solid blue;
			}

			.s {
				margin-top: -95px;
				height: 90px;
				width: 0px;
				animation: myfirst 60s linear infinite;
				transform-origin:center bottom;
			}
		</style>
	</head>
	<body>
		<div class="time">
			<div class="h"></div>
			<div class="m"></div>
			<div class="s"></div>
		</div>
		<br><br><br><br>
		<div id="div1">顺时针旋转5°</div>
		<div id="div2">这里，图像平铺（重复）来填充该区域。</div>
		<div id="div3">这里，图像被拉伸以填充该区域。</div>
		<div id="div4">线性渐变</div>
		<div id="div5">径向渐变</div>
		<div id="div6">
			文本阴影
		</div>
		<div id="div7">移动对象</div>
		<div id="div8">倍数缩放对象并角度拉升对象</div>
		<div id="div9">3D旋转</div>
		<div id="div10">鼠标悬停时效果</div>
		<div id="div11">↑</div>
		<div id="div12">用户自定义尺寸</div>
		<div id="div13">
			<div>
				左边
			</div>
			<div>
				右边
			</div>
		</div>
		<div id="div14">这个 div有一个轮廓边界在15px边境外的边缘。</div>
	</body>
</html>