C3 动画

最新推荐文章于 2024-10-07 09:24:46 发布

Jason–json

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量165

点赞数 1

文章标签： c3 javascript css html5 html

本文链接：https://blog.csdn.net/weixin_46146313/article/details/104184142

版权

2D动画

transform：针对一个元素只能用一次不能一次写给多个元素。
transition all 2s 过度效果，写在过度之前的样式里，不能写在hover里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: red;
				margin-left: 20px;
				text-align: center;
				line-height: 100px;
				transition:all 3s;
				
			}
			.div1:hover{
				transform: rotateZ(180deg) scale(2,2);
			}
			
		</style>
	</head>
	<body>
		<!--1旋转--度 deg>-->
		<div class="div1">文字</div>
		
		<!--2位移--像素 px>-->		
		<div class="div2" style="transform: translateX(150px);">位移</div>
		
		<!--3缩放--大于1 放大  小于1收缩  如果给两个参数代表 X，Y 逗号间隔-->
		<div class="div3" style="transform: scaleX(1.5);" id="">缩放</div>	

		<!--4切斜-->		
		<div class="div4" style="transform: skewX(45deg);">倾斜X</div>
		<div class="div5" style="transform: skewY(30deg);">倾斜Y</div>
		<br /><br />
		<div class="div6" style="transform: skew(30deg,30deg);">倾斜X,Y</div>
		
		<!--5文字反倾斜  就是把文字在反过来写一遍-->		
		<div class="div7" style="transform: skewX(45deg);">
			<p style="transform: scaleX(-45deg);">倾斜X</p>
		</div>
	</body>
</html>