CSS3②

最新推荐文章于 2024-09-14 17:04:32 发布

XIANAN_

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量133

点赞数 2

文章标签： css3 css

本文链接：https://blog.csdn.net/m0_56103565/article/details/124768011

版权

🌸变换

transform：该属性可以对元素进行旋转、缩放、移动或倾斜

	<body>
		<style type="text/css">
			div{
				width: 200px;
				height: 100px;
				border-top: 50px solid #cd491d;
				transform:rotate(45deg);
				transform: skew(30deg,0deg);
				margin:0 auto;
			}
		</style>
		<div></div>
	</body>

🌸动画1

①animationName：表示动画的名称；
②from：定义动画的开头，相当于 0%；
③percentage：定义动画的各个阶段，为百分比值，可以添加多个；
④to：定义动画的结尾，相当于 100%；
⑤properties：不同的样式属性名称，例如 color、left、width 等等。

	<body>
		<style>
			@keyframes demo1 {
				/* from{}
				   to{  } */
				0% {
					left: 100px;
				}
				40% {
					left: 150px;
				}
				60% {
					left: 75px;
				}
				100% {
					left: 100px;
				}
			}

			div {
				position: absolute;
				width: 20px;
				height: 20px;
				background-color: red;
				animation: demo1 10s linear infinite alternate; 
			}
			div:hover{
				animation-play-state: paused;
			}
		</style>
		<div></div>
	</body>

🌸动画2

主轴：默认X

交叉轴：默认Y
转动的是，所有的东西是挂在轴上的，虽然看不见


	<body>
		<style type="text/css">
			.box{
				display: flex;/*定义一个flex弹性盒子*/
				flex-direction: row-reverse;/*设置flex盒子的主轴方向，这里为反向（90°主轴占到了原来交叉轴的位置）*/
				justify-content: center;/*所有盒子对齐*/
				justify-content: space-between;/*两端的默顶格，中间的空间平分*/
			}
			.box>div{
				width: 25%;
			}
			.d1{
				background-color: #00aaff;
			}
			.d2{
				background-color: #00FF00;
			}
			.d3{
				background-color: #ff557f;
			}
			.d4{
				background-color: #ffff00;
			}
		</style>
		<div class="box">
			<div class="d1">111</div>
			<div class="d2">222</div>
			<div class="d3">333</div>
			<div class="d4">444</div>
		</div>
	</body>

🌸过渡

变换的特点

①需要分别定义两个值，且需要动作触发的
② 上下两个属性的值需要不同

	<body>
		<style>
			div{
				width: 100px;
				height: 50px;
				background-color: #cb0000;
				transition: width 2s,background-color;
				/* 动画时间变化 */
				
				/* transition:all 1s;  所有支持的都可以显示出来*/
			}
			div:hover{
				/* hover鼠标移上去的动作 */
				width: 600px;
				height: 200px;
				background-color: #0000FF;
			}
		</style>
		<div class="d1"></div>
	</body>

🌸过渡曲线

transition-timing-function 属性

①transition-timing-function: linear;
②transition-timing-function: ease;
③transition-timing-function: ease-in;
④transition-timing-function: ease-out;
⑤transition-timing-function: ease-in-out;

	<style>
	div {
	  width: 100px;
	  height: 100px;
	  background: red;
	  transition: width 2s;
	}
	
	#div1 {transition-timing-function: linear;}
	#div2 {transition-timing-function: ease;}
	#div3 {transition-timing-function: ease-in;}
	#div4 {transition-timing-function: ease-out;}
	#div5 {transition-timing-function: ease-in-out;}
	
	div:hover {
	  width: 300px;
	}
	
	</style>
	<body>
		<h1>transition-timing-function 属性</h1>
		<p>请把鼠标悬停在下面的 div 元素上，来查看不同的速度曲线：</p>
		<div id="div1">linear</div><br>
		<div id="div2">ease</div><br>
		<div id="div3">ease-in</div><br>
		<div id="div4">ease-out</div><br>
		<div id="div5">ease-in-out</div><br>
	</body>