一文搞懂css 2D动画效果
2024-05-10 19:10:19
文章目录
- 前言
- 一、过渡动画效果简述 transition:
- 1、代码示例
- 2、效果展示
- 二、定位translate
- 1、2D定位 transform: translate(50%, 50%);
- ①.代码示例
- ②.效果展示
- 2、2D定位 transform: translateY(-20px);【抬高】
- ①.代码示例
- ②.效果展示
- 三、2D旋转 transform: rotate(180deg);
- 1、代码示例
- 2、效果展示
- 四、2D放缩
- 1、2D放缩 transform: scale(50%, 50%);
- ①.代码示例
- ②.图片展示
- 2、2D放缩 transform: scale(1.25);
- ①.代码示例
- ②.图片展示
- 总结
前言
今天要介绍的是2D动画效果,主要包括2D动画的定位、旋转、缩放。
先来一波动画效果展示,后面会具体到每一个案例。
进度条
盒子旋转
盒子放缩
一、过渡动画效果简述 transition:
1、代码示例
transition: all .5s 1s;过渡属性,过渡时间,过渡曲线,停止间隔（上述没有书写过渡函数,过渡函数不常使用）
代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 进度条效果*/.nav {margin: 20px;width: 200px;height: 15px;border-radius: 7px;border: red 1px solid;padding: 1px;}/* 哪个模块发生变化将transition加在哪个盒子内*/.nav1 {width: 100px;height: 15px;border-radius: 7px;background-color: red;transition: all .5s 1s;}/* 经过.nav则.nav1发生变化,颜色变蓝*/.nav:hover .nav1 {width: 150px;background-color: blue;}</style>
</head><body><div class="nav"><div class="nav1"></div></div><div class="nav"><div class="nav1"></div></div><div class="nav"><div class="nav1"></div></div><div class="nav"><div class="nav1"></div></div><div class="nav"><div class="nav1"></div></div><div class="nav"><div class="nav1"></div></div><div class="nav"><div class="nav1"></div></div></body></html>
2、效果展示
二、定位translate
1、2D定位 transform: translate(50%, 50%);
百分比是相对于盒子左上角为原点,向右向下移动了多少。
可以将transform加在子代元素中,也可以加在hover内。
①.代码示例
代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 固定盒子的方式有定位,浮动,外边距等以上方式盒子定位容易影响到其他盒子的位置2D盒子定位的盒子不会影响到其他盒子的位置,只会覆盖其他盒子--><style>p {display: inline-block;width: 300px;height: 300px;background-color: turquoise;}p::before {content: '';display: block;width: 50%;height: 50%;background-color: brown;/* 使用百分比的时候用的是该盒子长宽的百分比 */transform: translate(50%, 50%);}</style>
</head><body><p></p>
</body></html>
②.效果展示
背景盒子为浅蓝色,中间盒子为棕色,中间盒子大小为原来盒子的50%
而棕色盒子向右下偏移的长度又为棕色盒子的50%
2、2D定位 transform: translateY(-20px);【抬高】
在x轴或y轴移动一定的像素，有个兄弟是translateY
在这里就是进行了竖直方向的移动
①.代码示例
代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {float: left;margin: 100px auto;width: 200px;height: 400px;background-color: cadetblue;color: #fff;font-size: 30px;font-family: '幼圆';text-align: center;line-height: 200px;font-weight: 700;border: cyan 5px solid;transition: all .4s;}div:hover {box-shadow: 0px 20px 10px cyan;transform: translateY(-20px);}div::before {content: '';display: block;width: 200px;height: 200px;background-size: 200px 200px;background-image: url(../1.jpg);}</style>
</head><body><div>Hello</div><div>Hello</div><div>Hello</div><div>Hello</div><div>Hello</div>
</body></html>
②.效果展示
三、2D旋转 transform: rotate(180deg);
旋转180deg意思就是旋转180度（顺时针）
transform-origin: left bottom;
这句话的意思是,以左下角为中心点（因为旋转默认是以中心为旋转点的）
1、代码示例
代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {overflow: hidden;position: relative;width: 300px;height: 300px;border: springgreen 5px solid;margin: 200px auto;}/* 这里不能旋转360度,旋转360度会使页面回到原始位置,给人一个没有旋转的假象*/div::before {position: absolute;display: block;content: '';width: 100%;height: 100%;background-color: steelblue;transform-origin: left bottom;transform: rotate(180deg);transition: all .6s;}div:hover::before {transform: rotate(0);}</style>
</head><body><div></div>
</body></html>
2、效果展示
四、2D放缩
1、2D放缩 transform: scale(50%, 50%);
transform-origin: left bottom;
意思是按照左下角为固定中心,进行缩放
transform: scale(50%, 50%);
意思是缩放的宽、高为原来50%
①.代码示例
代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- h盒子放缩是页面布局中不可缺少的一部分可以根据transform-origin定位,使盒子依赖于某一位置进行缩放--><style>div {width: 300px;height: 300px;background-color: steelblue;transition: all .7s;border: red 3px solid;}div:hover {transform-origin: left bottom;transform: scale(50%, 50%);}</style>
</head><body><div></div>
</body></html>
②.图片展示
2、2D放缩 transform: scale(1.25);
transform: scale(50%, 50%);
意思是缩放的宽、高为原来50%
transform: scale(1.25);
意思是将图像放大为原来的1.25倍
是网页布局中常用到的一个动画效果。
①.代码示例
代码如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 当鼠标放在盒子上之后过渡效果会带给用户更好的体验--><style>/* 一、盒子的自动放大,由于盒子有边框所以盒子内的图片放大后不会撑开盒子,而是仅仅显示盒子内的图片*/div {overflow: hidden;margin: 200px auto;width: 200px;height: 200px;/* background-image: url(../two.png); */}div img {transition: all .6s;width: 100%;height: 100%;}div:hover img {transform: scale(1.25);}</style>
</head><body><div><img src="../two.png" alt=""></div>
</body></html>
②.图片展示
总结
过渡是动画效果中常用的技术,2D动画效果主要的三大方面要好好掌握,华丽的动画会带给人不一样的体验,但是由于动画效率较为低下不推荐使用过多的动画效果。
一文搞懂css 2D动画效果相关推荐
- html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
- 【精选】一文搞懂css三大特性
文章目录 前言 一.css的三大特性都有什么? 二.盒子模型 1.盒子属性 ①盒子边框border ②盒子边角border-radius ③盒子阴影 box-shadow 2.内边距padding 3 ...
- 一文搞懂css中精灵图如何使用
文章目录 前言 一.精灵图是什么? 1.概念: 2.图片示例: 二.为什么使用精灵图? 1.用户体验而言: 2.就开发者而言: 3.就服务器而言: 三.怎样使用精灵图 1.background-pos ...
- css股票曲线图图解,如何看懂股票曲线图，一文搞懂这些曲线所代表的含义！
原标题:如何看懂股票曲线图,一文搞懂这些曲线所代表的含义! 在股票技术分析中,我们经常要分析K线图,分时图等等,有些新手在入门的时候常常把两者弄混,所以统称它们为曲线图,实际它们就是K线图和分时图了, ...
- 一文搞懂 Cocos Creator 3.0 坐标转换原理
一文搞懂 Cocos Creator 3.0 坐标转换原理 屏幕坐标 UI 触点坐标 UI 多分辨率适配方案 UI 触点获取 不同坐标之间的转换 屏幕坐标与 3D 节点世界坐标互转 3D 节点之间的坐 ...
- 【UE·蓝图底层篇】一文搞懂NativeClass、GeneratedClass、BlueprintClass、ParentClass
本文将对蓝图类UBlueprint的几个UClass成员变量NativeClass.GeneratedClass.BlueprintClass.ParentClass进行比较深入的讲解,看完之后对蓝图 ...
- 一文搞懂Qt中的颜色渐变(QGradient Class)
一文搞懂Qt中的颜色渐变(QGradient Class) 1, 快速开始! Qt中与颜色渐变有关的类是QGradient 其中它又有三个子类:QLinearGradient.QRadialGradi ...
- 《一文搞懂NMS发展历程》Soft-NMS、Weighted NMS、IoU-Net、Softer-NMS、Adaptive NMS、DIoU-NMS
<一文搞懂NMS发展历程>Soft-NMS.Weighted NMS.IoU-Net.Softer-NMS.Adaptive NMS.DIoU-NMS 文章目录 <一文搞懂NMS发展 ...
- 一文搞懂k近邻（k-NN）算法（一）
原文链接 一文搞懂k近邻(k-NN)算法(一) 前几天和德川一起在学习会上讲解了k-NN算法,这里进行总结一下,力争用最 通俗的语言讲解以便更多同学的理解. 本文目录如下: 1.k近邻算法的基本概念, ...
最新文章
- python_cookies
- 解决Incorrect integer value: ‘‘ for column问题
- Spring中使用RedisTemplate操作Redis（spring-data-redis）
- prometheus命令_Prometheus入门教程（一）：Prometheus 快速入门
- Xtrabackup安装以及应用
- 深挖基于 CSS 的变换与动画技术
- 操作 神通数据库_国产神通数据库操作备忘(Linux)
- 大一c语言论文700字,大二学年学生自我鉴定范文700字
- 2020届春招实习面经（含阿里、腾讯、网易、京东、华为、美团、快手、字节跳动）
- 减肥日志：100天40斤！！
- Android App集成支付宝
- ELK日志分析系统搭建以及springboot日志发送到ELK中
- IP地址和long互转
- 配色（转http://huaban.com/boards/13532082/）
- es数据类型 long造成的sum求和为0的问题
- 网络原理TCP IP
- 我的Hadoop安装流程
- 隆鑫通用VOGE机车首届文化艺术节圆满落幕
- python程序设计实验指导书第1版实验三十四_《python编程基础》实验指导书.doc
- 我的作品之《Unity虚拟现实开发实战》，翻译自《Unity Virtual Reality Projects》