css3.0解析(2)

最新推荐文章于 2024-07-10 16:12:49 发布

SDWESCES

最新推荐文章于 2024-07-10 16:12:49 发布

阅读量87

点赞数 1

分类专栏： html 文章标签： css html

本文链接：https://blog.csdn.net/weixin_47484523/article/details/114450208

版权

html 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文介绍了CSS3.0中关于圆角边框border-radius的使用，以及如何创建一个圆形元素。同时，通过animation属性展示了如何实现一个360度旋转、平移和缩放的动画效果，详细解释了关键帧动画的关键概念。

摘要由CSDN通过智能技术生成

css3.0解析(2)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css3.0(2)</title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			.no1{
				width: 300px;
				height: 300px;
				border: 3px solid peru;
				border-radius: 150px;   /*圆*/
			}
			.no2{
				width: 300px;
				height: 300px;
				border-radius: 150px;   /*圆*/
				background-color: peachpuff;
				animation: myplay 2s linear 1s infinite; /*等待时间,一次性的,需要刷新,infinite循环动画*/
			}
			@keyframes myplay{
			    /*from{
					background-color: red;
				}
				to{
					background-color: green;
				}*/
				/*0%{                                    红色过渡到黄色,再过渡到紫色,最后到金色
					background-color: red;
				}
				25%{
					background-color: yellow;
				}
				50%{
					background-color: plum;
				}
				100%{
					background-color: goldenrod;
				}*/
				100%{
					transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg) translate(300px) scale(0.2);
				}     /*旋转移动缩小,动起来*/
			}
		</style>
		<!--
			作者：shidiwen
			时间：2021-01-26
			描述：css 3.0解析(2)
		-->
	</head>
	<body>
		<div class="no1">
			
		</div>
		<div class="no2">
			
		</div>
	</body>
</html>