CSS

最新推荐文章于 2024-09-21 23:59:03 发布

月光派件中。

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量239

点赞数

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

本文链接：https://blog.csdn.net/weixin_46064684/article/details/108716764

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

放大缩小比例：zoom

<!DOCTYPE HTML>
<html>
	<head>
		<title>ZOOM</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			p#d1{
				zoom:10%;
			}
		</style>
	</head>
	<body>
		<h1>Zoom</h1>
		<p id="d1">放大缩小</p>
	</body>
</html>

内容盒子与边框盒子

内容盒子：content-box padding与border不占有原有的高和宽

边框盒子：border-box padding与border都包含在固有的宽度和高度内

调整元素

宽 — x    高 — y     水平 — x     垂直 — y
resize – 调整元素
    none 不可以调整
    both 宽高都可以调整
    vertical 可以调整高度
    horizontal 宽度

过渡

transition:检索或设置过渡效果
    transition-property : 指定过渡的属性 all 全属性
    transition-duration: 指定过渡的时间
    transition-timing-function:过渡效果
        ease ease-in
        linear
    transition-delay:过渡的开始时间

transition-property:all;
transition-duration:2s;
transition-timing-function:linear;
transition-delay:0.5s;

transition:all 2s linear 0s;/* 组合 */

<!DOCTYPE HTML>
<html>
	<head>
		<title>过渡</title>
		<meta charset="utf-8"/>
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				background-color:pink;
				margin-top:20px;
				transition:all 2s;
			}
			.c1:hover{
				width:400px;
				background-color:blue;
				transition-timing-function:ease;
			}
			.c2:hover{
				width:400px;
				transition-timing-function:ease-in;
			}
			.c3:hover{
				width:400px;
				transition-timing-function:linear;
			}
			.c4:hover{
				width:400px;
				transition-timing-function:ease-out;
			}
			.c5:hover{
				width:400px;
				transition-timing-function:ease-in-out;
			}
		</style>
	</head>
	<body>
		<h1>过渡</h1>
		<div class="c1">ease</div>
		<div class="c2">ease-in</div>
		<div class="c3">linear</div>
		<div class="c4">ease-out</div>
		<div class="c5">ease-in-out</div>
	</body>
</html>

动画 Animation

animation-name 动画名称
animation-duration 动画维持时间
animation-timing-function 动画的过渡类型
animation-delay 动画延迟的时间
animation-iteration-count 动画循环次数
animation-direction 在循环中是否反向运动
animation-play-state 动画状态
animation-fill-mode 动画时间之外的状态

组合写法：animation:player 10s ease 0s 1 normal running;

关键帧
@keyframes name{
from{}
to{}
}

渐变

线性渐变 — Linear Gradients

默认的从上到下的线性渐变 .c1{background: linear-gradient(#fff,blue);}
从左到右的线性渐变 .c2{background: linear-gradient(to right,#fff,blue);}
对角线性渐变.c3{background: linear-gradient(to right top,#fff,blue);}
指定角度的线性渐变.c4{background: linear-gradient(222deg,#fff,blue);}
重复的线性渐变.c5{background: repeating-linear-gradient(#fec,#f0f 10%,#abc 20%);}
带透明度的线性渐变.c6{background: linear-gradient(to left,rgba(255,155,23,0.5),rgba(25,54,34,0.5));}
多个颜色节点从上到下的线性渐变.c7{background: linear-gradient(to left,red,orange,yellow,green,blue,cyan,purple);}
多个颜色节点从上到下的线性渐变.c8{background: linear-gradient(to top ,red,orange,yellow,green,blue,cyan,purple);}

径向渐变 — Radial Gradients

.s1{background:radial-gradient(形状描述,起始颜色,结束颜色);}

转换 transfrom

rotate 旋转

定义2D旋转 transfrom：rotate（45deg）
沿X轴的3D旋转 transfrom：rotateX（45deg）
沿Y轴的3D旋转 transfrom：rotateY（45deg）
沿Z轴的3D旋转 transfrom：rotateZ（45deg）

scale 缩放

定义2D缩放旋转 transfrom:scale(2,2)
scaleX通过设置X轴的值来定义 transfrom:scaleX(2)
scaleY通过设置Y轴的值来定义 transfrom:scaleY(2)

skew 倾斜

transfrom:skew(45deg，45deg)
transfrom:skewX(45deg)
transfrom:skewY(45deg)

translate 移位

transform:translate(-45px,-45px)
transform:translateX(45px)
transform:translateY(45px)

matrix 放大+倾斜

transform:matrix(2,2,0,2,45,0);

perspective 透视图

.perspective:hover .fill{}
-webkit-perspective:200px

transform-origin 透视图

.to-100-0-0{
	transform-origin:100% 0 0;
}

.to-0-100-0{
	transform-origin:0 100% 0;
}

.to-0-0-100{
	transform-origin:0 0 100%;
}

补充

搭配使用超出部分省略号显示

white-space 强制在一行显示
text-overflow 超出部分用省略号
overflow:hidden 超出部分隐藏

设置图片透明度： image.opacity{opacity:0.5}

月光派件中。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录