CSS3（转换、过渡、动画）入门篇

碌星
1,453 阅读5分钟

transform （转换）

CSS3-transform 属性允许设置元素平移,旋转，缩放或倾斜。

  • 参数

    • transform-origin：更改一个元素变形的原点；
    eg：transform-origin: center;

    • transform-style：设置元素的子元素是位于 3D 空间中还是平面中
    transform-style: flat;
transform-style: preserve-3d;
    • transform-box：属性定义了与transform以及transform-origin属性相关的布局框;感觉没啥作用~

1.translate （平移）

  • 类型
    • translate()：平移2D平面上的元素。
    • translateX()：水平平移元素。
    • translateY()：垂直平移元素。
    • translateZ()：沿z轴平移一个元素。
    • translate3d()：在3D空间中平移元素。
transform: translate(2,1);

2.rotate （旋转）

  • 类型
    • rotate()围绕2D平面上的一个固定点旋转一个元素。
    • rotateX()围绕水平轴旋转元素。
    • rotateY()围绕垂直轴旋转元素。
    • rotateZ()围绕z轴旋转元素。
    • rotate3d()在3D空间中围绕固定轴旋转元素。
transform: rotate(19.5deg);

3.scale （缩放）

  • 类型
    • scale()在2D平面上向上或向下缩放元素。
    • scaleX()水平向上或向下缩放元素。
    • scaleY()垂直向上或向下缩放元素。
    • scaleZ()沿z轴向上或向下缩放元素。
    • scale3d()在3D空间中向上或向下缩放元素。
transform: scale(2,2);

4.skew （倾斜）

  • 类型
    • skew()在2D平面上倾斜一个元素。
    • skewX()在水平方向上倾斜元素。
    • skewY()在垂直方向倾斜一个元素。
transform: skew(30deg);

5.matrix （矩阵）

6.perspective （透视）

z = 0平面和用户之间的距离以便使所述3D定位的元素一些透视效果。z> 0的每个3D元素变大;，每个z <0的三维元素则变小。

如果想了解更多，点击查看

transition（过渡）

提供了一种在更改CSS属性时控制动画速度的方法。
常见触发过渡的方法：hover，focus，active，checked等

  • 语法
    • transition-property：指定哪个或哪些 CSS 属性用于过渡
    • transition-duration：指定过渡的时长。
    • transition-delay：指定延迟，即属性开始变化时与过渡开始发生时之间的时长。
    • transition-timing-function：指定一个函数，定义属性值怎么变化。
<body>
    <div class="box"></div>
</body>

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    transform:rotate(180deg);
}

animation（动画）

它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，它们的重复次数以及它们如何重复来控制。

  • 语法

    • animation-name：指定应用的一系列动画

    • animation-duration：指定一个动画周期的时长

    • animation-delay：定义动画于何时开始

    • animation-timing-function：属性定义CSS动画在每一动画周期中执行的节奏

      • 参数值： linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(a,b) | cubic-bezier

    • animation-direction：属性指示动画是否反向播放

      • 参数值： normal(正常方向) | reverse(反方向) | alternate(先正后反交替运行) | alternate-reverse(先反后正交替运行)

    • animatiom-fill-mode：设置CSS动画在执行之前和之后如何将样式应用于其目标

      • 参数值： none(默认值) | forward(结束时的状态) | backforward(开始时的状态) | both

    • animation-interation-count：定义动画在结束前运行的次数

      • 参数值： number | infinite

    • animation-paly-state：定义一个动画是否运行或者暂停

      • 参数值： running | paused

实践1 - 模拟扑克洗牌效果

思路：2个div时间差错开平移和改变元素的层重叠顺序即可实现以下效果：

<div class="d0">
    <div class="d1"></div>
    <div class="d2"></div>
</div>

CSS:
<style>
* {padding: 0;margin: 0}
.d0 {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 400px;
	height: 200px;
}
.d1 {
	width: 100px;
	height: 130px;
	background-color: orange;
	border: 1px solid #666;
	position: absolute;
	animation: move 5s infinite ease-in-out;
}
.d2 {
	width: 100px;
	height: 130px;
	background-color: olivedrab;
	border: 1px solid #666;
	position: absolute;
	animation: move 5s 2.5s infinite ease-in-out;
}
@keyframes move {
	0%{
		transform: translate(0);
		z-index: 1;
	}
	12.5% {
		transform: translate(100px, 0);

	}
	25% {
		transform: translate(0);
		z-index: -1;
	}
	100% {
		transform: translate(0);
		z-index: 1;
	}
}
</style>

实践2 - 加载中动画

思路：4个div时间差错开平移即可实现以下效果：

css:

* {padding: 0;margin: 0}
.d0{width:200px;height:200px;position: absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
span{position:absolute;width:30px;height:30px;border-radius: 50%;animation:move 2s infinite linear}
.d0 span:first-child {background-color:#19A68C;animation-delay:-1.5s;}
.d0 span:nth-child(2) {background-color:#F63D3A;animation-delay:-1s;}
.d0 span:nth-child(3) {background-color:#FDA543;animation-delay:-0.5s;} 
.d0 span:last-child {background-color:#193B48;}

@keyframes move{
	0%,100%{
		transform:translate(0)
	}
	25%{
		transform:translate(60px,0)
	}
	50%{
		transform:translate(60px,60px)
	}
	70%{
		transform:translate(0,60px)
	}
}

<div class="d0">
	<span></span><span></span><span></span><span></span>
</div>

结语

CSS3功能还有很多，本篇只是简单的总结了CSS3中转换，过渡和动画的基本语法，快速了解它们的基本语法和用法，还有很多知识点是有待深究的，后续会推出一些实践的例子。文章如有错误之处请指出！。互相学习！一起进步！

avatar
文章
阅读
粉丝