简单特效处理

最新推荐文章于 2024-10-30 21:47:46 发布

賣可樂的男孩

最新推荐文章于 2024-10-30 21:47:46 发布

阅读量103

点赞数

分类专栏：前端基础文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_52147099/article/details/126754531

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

常用style属性：

注：后面的值需要自己设置，以下的值都是例子
1、旋转

/* 30deg表示30度 */
transform: rotate(30deg);

2、改变旋转中心

transform-origin: 设置值（具体值、top、bottom..）;

3、放大/缩小可以单方向放大缩小 X，Y

/* 根据Y轴缩放 大于1放大，小于1缩小 */
transform:scaleY(0.5);

4、移动第一个数值表示X轴第二个数值表示Y轴

transform: translate(300px,100px);

5、圆角
% 单位表示8个角同时设置
px 表示4个角
圆角可以写4个数值写一个表示4个角写4个表示左上右上右下左下

圆角像素为高度的一半

border-radius:50px;

6、阴影
第一个值表示X轴正数向右负数向左
第二个值表示Y 正数向下负数向上
第三个值表示模糊范围
第四个值表示颜色

box-shadow: 3px 3px 5px blue;

7、过渡–让突然变化变成慢慢变化类似于闪现变成疾跑
第一个属性表示过渡的属性(宽，高，旋转)
第二个表示过渡的时间从起始位置到结束位置的时间
第三个表示运行的曲线(匀速)
第四个属性-延迟1秒

transition: all 4s linear 0s;

测试：通过这个小方块测试上面的属性
在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>特效处理</title>
		<style type="text/css">
			.box{
				width: 300px;
				height: 300px;
				background-color: red;
				margin: 30px auto;
				/* 旋转 */
				/* transform: rotate(30deg); */
				/* 改变旋转中心 */
				/* transform-origin: bottom; */
				
				/* 放大/缩小 可以单方向放大缩小 X，Y */
				/* 根据Y轴缩放 */
				/* transform:scaleY(0.5); */
				
				/* 移动*/
				/* transform: translate(300px,100px); */
				
				/* 过渡 */
				transition: all 4s linear 0s;
				
				/* 圆角 
					圆角像素为高度的一半
				*/
				border-radius:50px;
				
				/* 阴影	*/
				/* box-shadow: 3px 3px 5px blue; */
			}
			.box:hover{
				transform: rotate(45deg);
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>