CSS3的转换

简介: 通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。您可以使用 2D 或 3D 转换来转换您的元素。

CSS3 转换:

通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
您可以使用 2D3D 转换来转换您的元素。
AI 代码解读

一、transform:
2D 转换方法:子属性:translate()、rotate()、scale()、skew()

    1.translate(x,y);偏移
        a): translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)。
        b): translateX(x)仅水平方向移动(X轴移动)。
        c): translateY(y)仅垂直方向移动(Y轴移动)。

    2.rotate(ndeg):旋转n为数字
    3.scale(x,y) 缩放  让元素根据中心原点对对象进行缩放   x,y表示倍数
        a): scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)。
            注意:Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。
        b): scaleX(x)元素仅水平方向缩放(X轴缩放)。
        c): scaleY(y)元素仅垂直方向缩放(Y轴缩放)。
    4.skew(xdeg,ydeg) 倾斜变形
        a):skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形)。
            第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切。
        b): skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形)。
        c): skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)。
AI 代码解读

二、原点 transform-origin(x,y) x,y可以用百分比来表示 表示原点的横向距离和纵向距离
在没有重置transform-origin改变元素原点位置的情况下,
CSS变形进行的旋转、位移、缩放,扭曲等操作都是以元素自己中心位置进行变形。
我们可以通过transform-origin来对元素进行原点位置改变
例: transform-origin: 0 0; 以左上角为原点
50% 0; 以上中为原点
100% 50% 以右中为原点

三、transtion:过渡动画:
transition属性是一个复合属性,主要包括以下几个子属性:

    1transition-property:指定过渡或动态模拟的CSS属性。
        所有的css属性用all
    2transition-duration:指定完成过渡所需的时间。
        单位是s秒或者ms毫秒
    3transition-timing-function:指定过渡函数。
        ease:由快到慢
        linear:匀速
        ease-in:加速
        ease-out:减速
        ease-in-out:先加速再减速
    4transition-delay:指定开始出现的延迟时间。
            单位是s秒或者ms毫秒。



transition:要改变的属性或all 时间;
例如:transtion:width 2s;
    transtion:all 3s
AI 代码解读

四、@keyframes介绍:
keyframes被称为关键帧,。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。
如在“0%”到“100%”之间创建更多个百分比,分别给每个百分比中给需要有动画效果的元素加上不同的样式,从而达到一种在不断变化的效果
在@keyframes中定义动画名称时,其中0%和100%还可以使用关键词from和to来代表,其中0%对应的是from,100%对应的是to。

第一步:在css样式中,先定义动画样式
    @keyframes  动画名{
        from{ css样式}
        to{ css样式 }
    }
    或者使用百分号
    @keyframes 动画名 {
            0%{
                left: 0;
                top: 0;
            }
            30%{
                left: 800px;
                top:0;
                border-radius: 50%;
            }
            60%{
                left: 800px;
                top:400px;
                background-color: red;
                border-radius: 50%;
                transform: scale(.5);
            }
            90%{
                left: 0;
                top:400px;
                background-color: green;
                border-radius: 50%;
            }
            100%{
                left: 0;
                top: 0;
            }
        }
第二步:使用animation应用动画

        animation:动画名
AI 代码解读

五、animation:
组合写法(简写):animation: myfirst 5s linear 2s infinite alternate both;

分开写
    1、调用动画 animation-name: 主要是用来调用 @keyframes 定义好的动画名

    2、设置动画播放时间 animation-duration:  单位:s

    3、置动画时间外属性 animation-fill-mode: 
      none: 默认值,表示动画将按预期进行和结束,在动画完其最后一帧时,动画会反转到初始帧处
      forwards: 表示动画结束后继续应用最后的关键帧的位置
      backwards: 会在向元素应用动画样式时迅速应用动画的初始帧
      both: 元素动画同时具有forwards和backwards效果

    4、设置动画播放方式 animation-timing-function: ease(由快到慢)/ linear(匀速) / ease-in(加速) / ease-out(减速) ease-in-out(先加速再减速)

    5、设置动画播放之前等待的时间 animation-delay: 单位:s

    6、设置动画播放次数 animation-iteration-count: 通常设置为整数, 默认值为1; 取值为infinite,动画将会无限次的播放

    7、设置动画播放方向 animation-direction: normal是默认值,动画的每次循环都是向前播放;另一个值是alternate,他的作用是,动画播放在第奇数次向前播放,第偶数次向反方向播放

    8、设置动画的播放状态 animation-play-state: paused将正在播放的动画停下来; running将暂停的动画重新播放,这里的重新播放不一定是从元素动画的开始播放,而是从暂停的那个位置开始播放
AI 代码解读
目录
打赏
0
1
1
0
163
分享
相关文章
Unity 不同Scene场景转换(简)
本文提供了Unity中实现场景转换的基本方法,包括编写传送脚本、创建传送门和玩家对象,并通过触发器实现玩家触碰传送门时切换到另一个场景的功能。
Unity 不同Scene场景转换(简)
图解MySQL【日志】——Undo Log
Undo Log(回滚日志)是 MySQL 中用于实现事务原子性和一致性的关键机制。在默认的自动提交模式下,MySQL 隐式开启事务,每条增删改语句都会记录到 Undo Log 中。其主要作用包括:
172 0
支撑每秒数百万订单无压力,SpringBoot + Disruptor 太猛了!
本文详细介绍如何通过 Spring Boot 集成 Disruptor 实现每秒处理数百万订单的高性能系统。Disruptor 是一种无锁并发框架,采用环形缓冲区和无锁算法,提供极低延迟和高吞吐量。文章涵盖 Maven 配置、事件工厂、处理器及生产者实现,并通过 REST API 和 Thymeleaf 展示订单创建流程。Disruptor 在高并发场景下表现出色,是解决高性能并发处理的理想方案。
requestAnimationFrame在性能优化中的应用有哪些?
【5月更文挑战第29天】requestAnimationFrame在性能优化中的应用有哪些?
176 1
C#数据去重的这几种方式,你知道几种?
C#数据去重的这几种方式,你知道几种?
120 0
【专栏】探讨分布式限流所面临的挑战以及目前业界常用的解决方案
【4月更文挑战第27天】在互联网时代,分布式限流是应对高并发、保护系统稳定的关键。它面临数据一致性、算法准确性和系统可扩展性的挑战。常见限流算法有令牌桶、漏桶和滑动窗口。解决方案包括使用分布式存储同步状态、结合多种算法及动态调整阈值。定期压力测试确保策略有效性。随着系统规模增长,限流技术将持续发展,理解并应用限流原理对保障服务质量至关重要。
234 3
Python的xlrd模块在Anaconda中的安装
本文介绍在Anaconda环境下,安装Python读取.xls格式表格文件的库xlrd的方法~
747 1
Python的xlrd模块在Anaconda中的安装
我心中的云时代原生开发环境
试想,如果未来的应用开发,开发者通过函数计算、弹性容器服务等能力去承载自己的业务逻辑,存储、数据库、消息等中间件能力通过 Backend as a Service 的方式去获取,即未来使用云计算的开发者能够无需关心云计算的基础底层概念,直接聚焦自己的业务开发,以近乎无感的方式获得云计算的帮助。基于这样的趋势的预判,本文作者开始在云原生的路径上探索,并致力于为云时代的原住民开发者提供一个理想的一站式的开发工作环境:云原生 Serverless 开发者工作平台。
762 0
我心中的云时代原生开发环境
Yum工具详解(一)-----Yum配置本地源
Yum工具详解(一)-----Yum配置本地源
350 0
BI系统概述(上)-- BI价值及核心模块
文章从三个问题入手, 什么是BI系统?为什么要建设BI系统?BI系统有哪些功能? 通过对BI价值以及核心功能介绍,希望让读者对BI系统有初步了解
517 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等