CSS总结 • 【第7章变形和动画】

最新推荐文章于 2022-09-19 16:20:28 发布

.冯上

最新推荐文章于 2022-09-19 16:20:28 发布

阅读量200

点赞数

分类专栏： HTML CSS总结文章标签： css

本文链接：https://blog.csdn.net/qq_51756226/article/details/111286087

版权

HTML CSS总结专栏收录该内容

17 篇文章 1 订阅

订阅专栏

全部章节 >>>>

CSS3属性transform详解

该属性有转变形态的意思，可以"translate偏移"，“rotate旋转”，“skew倾斜”，“scale放大缩小”

1.偏移 translate

用法：transform: translate(X轴偏移, Y轴偏移)；

X轴偏移：transform: translateX(10px)；
Y轴偏移：transform: translateY(10px)；

这里的Y轴和正常的Y轴不一样，它往上表示负数，往下表示正数；X轴是正常的

且，如果设置百分比，表示偏移自身的百分比

假如有两个盒子，红色“father”和蓝色“son”，且“父绝子相”父级绝对定位，子级相对定位

让“son”垂直居中（top: 50%;）效果图：
在这里插入图片描述

在这里插入图片描述
让“son”往上偏移，让它在视觉上居中。

就要让它Y轴偏移自身的：-50%，效果图：

在这里插入图片描述

这样就让定位的元素居中啦

2.旋转 rotate

用法：顺时针：rotate(45deg)

水平：rotateX(45deg)
垂直：rotateY(45deg)

在这里插入图片描述

上图中的旋转中心点，在正中心

3.设置中心点 transiform-origin

默认：50% 50%
同：center center

方位名词：水平垂直
例：transiform-origin：right top；
设置右上角

也可以使用像素px：水平垂直；

在这里插入图片描述

4.倾斜 skew

用法：skew(水平倾斜deg,垂直倾斜deg)

水平：skewX(deg)
垂直：skewY(deg)

在这里插入图片描述

4.放大缩小 scale

用法：默认一倍：scale(水平1倍，垂直1倍)

水平：scaleX(0.5倍)
垂直：scaleY(0.5倍)

在这里插入图片描述

5.过度效果：transition

这是一个属性，配合(转变形态)transtion使用，加了这个属性后，可以设置过度时间，会在时间内完成转变。

过渡时间：all 持续时间延时时间
持续时间表示：该时间内完成转变
延时时间表示：延时一段时间，再进行转变

指定形态：形态时间
表示：只会过度指定的形态，其他形态没有过度效果
指定形态后，all需要去掉

加速：ease-in
表示：由慢到快

减速：ease-out
表示：由快到慢

加速然后减速：ease-in-out
例如给了hover（伪类选择器），鼠标移上去会由慢到快，鼠标移开再由快到慢

5.合并写法

transform（转变形态）合并写法：根据写法顺序，执行转变。最好把位移放在最前面

transition（过度效果）合并写法：形态花费时间何时开始运动曲线

CSS3动画详解：animation

1.使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
            height: 200px;
            width: 200px;
            background-color: green;
            /*动画合并写法：*/
            /*animation: 动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向;*/
            animation: name 3s ease 0s infinite normal;
        }
        /*创建动画:*/
        /*关键帧 动画名称*/
        @keyframes name {
            from {
                background-color: green;
            }
            50%{
                background-color: red;
            }
            to {
                background-color: blue;
                margin-left: 800px;
            }
        }
    </style>
</head>
<body>
<div class="one"></div>
</body>
</html>

开始：
在这里插入图片描述
50%：

结束：

2.样式

动画名称：animation-name

花费时间：animation-duration

运动曲线：animation-timing-function（默认：ease      加速：ease-in      减速：ease-out      加速然后减速：ease-in-out）

何时开始：animation-delay

播放次数：animation-iteration-count（无限次：infinite）

是否反方向：animation-direction    （正向：normal      反向：reverse      执行多次时，先正向再反向：alternate      执行多次时先反向再正向：alternate-reverse）

运行或暂停：animation-play-state   （运行：running）（暂停：pause）

合并写法：动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向

3.创建动画

关键帧：@keyframes

开始：from        或百分比：0%

结束：to          或百分比：100%

@keyframes 动画名称{
	from {
		background-color: red;
	}

	to {
		background-color: blue;
	}
}

.冯上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS总结 • 【第7章变形和动画】

全部章节 >>>>CSS3属性transform详解该属性有转变形态的意思，可以"translate偏移"，“rotate旋转”，“skew倾斜”，“scale放大缩小”1.偏移 translate用法：transform: translate(X轴偏移, Y轴偏移)；X轴偏移：transform: translateX(10px)；Y轴偏移：transform: translateY(10px)；这里的Y轴和正常的Y轴不一样，它往上表示负数，往下表示正数；X轴是
复制链接

扫一扫