CSS变形与动画(一):transform变形 与 transition过渡动画 详解(用法 + 代码 + 例子 + 效果)

文章目录

  • 变形与动画
    • transform 变形
      • translate 位移
      • scale 缩放
      • rotate 旋转
      • skew 倾斜
      • 多种变形
      • 设置变形中心点
    • transition 过渡动画
      • 多种属性变化

变形与动画

transform 变形

包括:位移、旋转、缩放、倾斜。
下面的方法都是transform里的,记得加上。
展示效果为变化前后对比。

translate 位移

translate(tx, ty); 只沿着x轴、y轴移动
translateX(tx) 只沿着x轴移动
translateY(ty) 只沿着y轴移动
translateZ(tz) 只沿着z轴移动
translate3d(tx, ty, tz) 沿着x轴、y轴、z轴移动

transform: translate(20px, 20px);

在这里插入图片描述

scale 缩放

scale(sx, sy) 沿着x、y轴缩放,小于1缩小,大于1放大
scaleX(sx) 沿着x轴缩放
scaleY(sx) 沿着y轴缩放
scaleZ(sx) 沿着z轴缩放
scaleZ(sx, sy, sz) 沿着x、y、z轴缩放

transform: scale(1.2, 1.2);

在这里插入图片描述

rotate 旋转

rotate(angle) 沿着z轴旋转
rotateX(angle) 沿着x轴旋转
rotateY(angle) 沿着y轴旋转
rotateZ(angle) 沿着z轴旋转
rotate3d(angle) 沿着x、y、z轴旋转

transform: rotate(30deg);

在这里插入图片描述

skew 倾斜

skew(xangle, yangle) 沿着x、y轴倾斜
skewX(xangle) 沿着x轴倾斜
skewY(xangle) 沿着y轴倾斜

transform: skew(10deg, 10deg);

在这里插入图片描述

多种变形

多种变形函数用空格隔开即可,注意不要用逗号
例如这样:

transform: translate(20px, 20px) scale(1.2, 1.2) skew(10deg, 10deg) scale(1.2, 1.2);

设置变形中心点

transfrom-origin:x坐标 y坐标(数值、left、top…)
放在需要改变的选择器上。
例如:没有设置时默认为中心。 (这里加了过渡方便对比)

在这里插入图片描述
设置为 0 0 为变形中心点后。

transform-origin: 0 0;

在这里插入图片描述

transition 过渡动画

用来给变形加上过渡动画的,例如我们hover时才让目标变形,就可以加上过渡动画,来展示效果。说白了就是给其加上计算出来的过程。

transition–property 设置指定属性进行过渡动画
transition-duration 设置动画的持续时间
transition-timing-function 设置动画的渐变速度,其值有linear(匀速)、ease(由快到慢,由快倒满)、ease-in(由快到慢)、ease-out(由快到慢)
transition-delay 设置动画延迟时间

多种属性变化

,号隔开即可
transition: 属性 持续时间 渐变速度 延迟时间

transition-property: width, height, color;
transition-duration: 1s, 1.5s, 2s;
transition-timing-function: ease, linear, ease-in;
transition-delay: 0s, 1s, 0s ;

也可以这样:

transition: width 1s ease 0s, heigth 1.5s linear 1s, color 2s ease-in 0s;

例子:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding:0;margin:0;}body{width:100%;height: 100vh;display: flex;justify-content: center;align-items: center;}div{background: red;width:200px;height: 200px;transition: width 2s ease 0s, heigth 4s linear 1s, background-color 4s;}div:hover{background: blue;width:300px;height: 300px;transform:  rotate(360deg);}</style></head>
<body><div></div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/89006.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Apache Maven:从构建到部署,一站式解决方案

目录 一、Maven介绍 1. Maven是什么&#xff1f; 2.Maven的作用&#xff1f; 二、Maven仓库介绍 2.1 库的分类 三、Maven安装与配置 3.1 Maven安装 3.2 Maven环境配置 3.3 仓库配置 四、Eclipse与Maven配置 五、Maven项目测试 5.1 新建Maven项目步骤及注意事项 5.…

C/C++test两步完成CMake项目静态分析

您可能一直在静态分析中使用CMake。但您是否尝试过将Parasoft C/Ctest与CMake一起使用吗&#xff1f;以下是如何使用C/Ctest在基于CMake的项目中运行静态分析的详细说明。 CMake是用于构建、测试和打包软件的最流行的工具之一。Parasoft C/Ctest通过简化构建管理过程&#xff…

RabbitMQ基础(2)——发布订阅/fanout模式 topic模式 rabbitmq回调确认 延迟队列(死信)设计

目录 引出点对点(simple)Work queues 一对多发布订阅/fanout模式以登陆验证码为例pom文件导包application.yml文件rabbitmq的配置生产者生成验证码&#xff0c;发送给交换机消费者消费验证码 topic模式配置类增加配置生产者发送信息进行发送控制台查看 rabbitmq回调确认配置类验…

Redis_缓存1_缓存类型

14.redis缓存 14.1简介 穿透型缓存&#xff1a; 缓存与后端数据交互在一起&#xff0c;对服务端的调用隐藏细节。如果从缓存中可以读到数据&#xff0c;就直接返回&#xff0c;如果读不到&#xff0c;就到数据库中去读取&#xff0c;从数据库中读到数据&#xff0c;也是先更…

制造执行系统(MES)在新能源领域的应用

制造执行系统&#xff08;MES&#xff09;在新能源领域有许多应用&#xff0c;特别是在管理、监控和优化新能源生产过程方面。新能源包括太阳能、风能、生物质能、地热能等。以下是一些MES在新能源方面的应用领域&#xff1a; 生产计划与调度&#xff1a;MES可以协助规划和调度…

谷粒商城第十一天-品牌管理中关联分类

目录 一、总述 二、前端部分 1. 调整查询调用 2. 关联分类 三、后端部分 四、总结 一、总述 之前是在商品的分类管理中直接使用的若依的逆向代码 有下面的几个问题&#xff1a; 1. 表格上面的参数填写之后&#xff0c;都是按照完全匹配进行搜索&#xff0c;没有模糊匹配…

计算机网络—HTTP

这里写目录标题 HTTP是什么HTTP常见状态码HTTP常见字段GET与POST的区别Get和Post是安全和幂等吗PUT幂等&#xff0c;不安全DELETE幂等&#xff0c;不是安全 HTTP缓存技术HTTP缓存实现技术 HTTP1.0优缺点和性能HTTP1.1优缺点和性能HTTP2优缺点和性能HTTP3优缺点和性能HTTP和HTTP…

vuex学习总结

一、vuex工作原理 工作流程&#xff1a;需求&#xff1a;改变组件count的sun变量的值&#xff0c;先调用dispatch函数传入jia函数和要改变的值给actions&#xff08;这个actions里面必须有jia这个函数&#xff09;&#xff1b;actions收到后调用commit函数将jia方法和值传给mut…

做BI领域的ChatGPT,思迈特升级一站式ABI平台

8月8日&#xff0c;以「指标驱动 智能决策」为主题&#xff0c;2023 Smartbi V11系列新品发布会在广州丽思卡尔顿酒店开幕。 ​ 后疫情时代&#xff0c;BI发展趋势的观察与应对 在发布会上&#xff0c;思迈特CEO吴华夫在开场致辞中表示&#xff0c;当前大环境背景下&#xf…

Stable Diffusion教程(9) - AI视频转动漫

配套抖音视频教程&#xff1a;https://v.douyin.com/UfTcrcJ/ 安装mov2mov插件 打开webui点击扩展->从网址安装输入地址&#xff0c;然后点击安装 https://github.com/Scholar01/sd-webui-mov2mov 最后重启webui 下载模型 从国内liblib AI 模型站下载模型 LiblibAI哩…

已有公司将ChatGPT集成到客服中心以增强用户体验

Ozonetel正在利用ChatGPT来改善客户体验。该公司表示&#xff0c;他们通过使用ChatGPT收集与客户互动过程收集的“语料”能够更有针对性地提高服务效率&#xff0c;提供个性化的用户体验&#xff0c;并实现更高的客户满意度。[1] 通过这套解决方案&#xff0c;客服中心将拥有一…

办理流量卡也是有条件的,这五种情况就不能办理流量卡!

流量卡资费虽然便宜&#xff0c;但也不是谁都可以办得&#xff0c;以下这几种情况是办不了的&#xff01; 看到网上的流量卡资费便宜&#xff0c;也想随手申请一张&#xff0c;别想得太简单了&#xff0c;流量卡也不是那么好办理的&#xff0c;换句话来讲&#xff0c;办理流量…

【量化课程】07_量化回测

文章目录 7.1 pandas计算策略评估指标数据准备净值曲线年化收益率波动率最大回撤Alpha系数和Beta系数夏普比率信息比率 7.2 聚宽平台量化回测实践平台介绍策略实现 7.3 Backtrader平台量化回测实践Backtrader简介Backtrader量化回测框架实践 7.4 BigQuant量化框架实战BigQuant简…

特语云用Linux和MCSM面板搭建 我的世界基岩版插件服 教程

Linux系统 用MCSM和DockerWine 搭建 我的世界 LiteLoaderBDS 服务器 Minecraft Bedrock Edition 也就是我的世界基岩版&#xff0c;这是 Minecraft 的另一个版本。Minecraft 基岩版可以运行在 Win10、Android、iOS、XBox、switch。基岩版不能使用 Java 版的服务器&#xff0c;…

Spring BeanPostProcessor 接口的作用和使用

BeanPostProcessor 接口是 Spring 框架中的一个扩展接口&#xff0c;用于在 Spring 容器实例化、配置和初始化 bean 的过程中提供自定义的扩展点。通过实现这个接口&#xff0c;您可以在 bean 实例创建的不同生命周期阶段插入自己的逻辑&#xff0c;从而实现对 bean 行为的定制…

Springboot-Retrofit HTTP工具框架快速使用

在SpringBoot项目直接使用okhttp、httpClient或者RestTemplate发起HTTP请求&#xff0c;既繁琐又不方便统一管理。 因此&#xff0c;在这里推荐一个适用于SpringBoot项目的轻量级HTTP客户端框架retrofit-spring-boot-starter&#xff0c;使用非常简单方便&#xff0c;同时又提供…

【第二阶段】kotlin的函数类型作为返回类型

fun main() {//调用,返回的是一个匿名类型&#xff0c;所以info就是一个匿名函数val infoshow("",0)//info接受的返回值为匿名类型&#xff0c;此时info就是一个匿名函数println(info("kotlin",20)) }//返回类型为一个匿名函数的返回类型fun show(name:Str…

maven如何建立JavaWeb项目并连接数据库,验证登录

这里是建立建立web项目&#xff1a;Maven如何创建Java web项目&#xff08;纯干货版&#xff09;&#xff01;&#xff01;&#xff01;_明天更新的博客-CSDN博客 我们主要演示如何连接数据库验证登录。 1.在webapp目录下创建我们的登录页面&#xff1a;index.jsp 还需要再…

Stable Diffusion+Temporal-kit 半虚半实应用

1.先下载temporal-kit,重启webui 2.下载好ffmpeg,配置好环境,下载Ebsynth 3.准备好你需要的视频,拖到预处理视频位置 4.填写参数,点解保存设置,然后并点击生成,会生成到目标文件夹的input位置 5.然后拉出input文件夹里面你想切换成处理的帧图片,然后填写prompt查看效…

excel操作之向下填充快速操作(序号1->100)

开始-》填充-》序列-》列 步长值为1&#xff0c;终止值为100 如果是日期操作