❤
translate、transform、transition和animation
translate:移动,css 中 transform的一个方法
正常写法是:
translate() ,元素从其当前位置移动,根据给定的 距离左侧(x 坐标) 和 距离上面(y 坐标) 位置参数进行移动
基本用法
transform: translate(50px, 100px);
一些兼容写法
transform:translate(50px,100px) // W3c标准
-webkit-transform:translate(10,10) // Safari Chrome
-moz-transform:translate(10,10) // firefox
-ms-transform:translate(10,10) // IE9
-o-transform:translate(10,10) // opera
————————————————
transform
1、介绍
transform是CSS3中具有颠覆性的特征之一,应用于元素的2D或3D转换,可以实现元素的位移、旋转、倾斜、缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果
3D变形
2d x y
3d x y z
左手坐标系
伸出左手,让拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方。这样我们就建立了一个左手坐标系,拇指、食指和中指分别代表X、Y、Z轴的正方向。
CSS3中的3D坐标系与上述的3D坐标系是有一定区别的,相当于其绕着X轴旋转了180度
x左负
y 上负
z 里负
2、使用
(1)移动 translate(x, y) --参照上文 (位移)
(2)CSS Transform scale 属性
(3)缩放 scale(x, y)
用来改变元素的显示比例
(4)旋转 rotate(deg)
Transform:rotateX/rotateY/rotateZ;/rotate(旋转)/
rotateX(30deg)表示元素沿着x轴做旋转,30deg表示要沿着x轴方向的 顺时针旋转30度,将值设为负数则是逆时针旋转30度。
单位是 deg 度数
rotateX()
就是沿着 x 立体旋转.
transform:rotateX(180deg);
rotateY()
沿着y轴进行旋转
transform:rotateY(180deg);
rotateZ()
沿着z轴进行旋转
transform:rotateZ(180deg);
(5)skew 属性 (倾斜)
skewX 属性
transform: skewX(-32deg);
元素沿着 X 轴翻转段落元素 -32 度
skewY属性
skewY属性使指定元素沿 Y 轴(垂直方向)翻转指定角度
transform:skewY(-10deg);
(6) transform-origin可以调整元素转换变形的原点
transform-origin: left top;transform: rotate(45deg);
改变元素原点到左上角,然后进行顺时旋转45度
(7)perspective(透视) 属性
图像之所以具有立体感(3D效果),其实只是一种视觉呈现,通过透视可以实现此目的
透视可以将一个2D平面,在转换的过程当中,呈现3D效果
透视原理: 近大远小 。
浏览器透视:把近大远小的所有图像,透视在屏幕上。
perspective:视距,表示视点距离屏幕的长短。视点,用于模拟透视效果时人眼的位置
注:并非任何情况下需要透视效果,根据开发需要进行设置。
perspective 一般作为一个属性,设置给父元素,作用于所有3D转换的子元素
理解透视距离原理:
属性 : backface-visibility
backface-visibility 属性定义当元素不面向屏幕时是否可见。
开门案例
翻转盒子案例
CSS动画库
Animations由两部分组成:css动画的配置,以及一系列的keyframes(用来描述动画的开始、过程、结束状态),不需要了解任何Js技术即可完成动画的制作
详细可看关于我的另一篇 animation 文章
常见的一些CSS3 动画库(让网页不再单调)
Animate.css
Animate.css 是一个轻量级的开源 CSS 动画库,提供了近 80 种常用的动画效果,涵盖了淡入淡出、翻转、缩放、旋转等多种类型。它易于使用,只需在 HTML 元素中添加类名即可实现动画效果。Animate.css 还支持自定义动画效果,具有很强的灵活性。
以下是其中一些常用的动画特效:
Bounce:元素在运动过程中有弹性的跳跃效果。
FadeIn:元素由透明到不透明,实现淡入效果。
FlipInX:元素从 X 轴翻转进入。
Pulse:元素呼吸般的闪烁效果。
RotateIn:元素以一定的时间内旋转一周进入。
SlideInLeft:元素从左侧滑入。
Swing:元素像摆钟一样左右晃动。
ZoomIn:元素从小到大缩放或者从远到近变大。
RollIn:元素从外面卷入。
以上仅是 Animate.css 中的几个动画特效示例,Animate.css 提供的动画特效非常丰富,可以满足不同场景下的需求。Animate.css 的使用也非常简单,只需将其导入到页面中,然后在 HTML 元素中添加相应的类名即可实现对应的动画效果,使网页看起来更加生动、有趣和令人印象深刻。
代码地址:https://github.com/animate-css/animate.css.git
Hover.css
Hover.css 是一个基于 CSS3 的动画库,专门用于创建图像悬停效果。它提供了多种简单易用的特效,例如左右翻转、上下翻转、放大缩小、渐变缩放等。Hover.css 可以为网站的图片增加生动有趣的效果,吸引用户的注意力。
Hover.css 提供了多种动画效果,例如:
hvr-bounce-in:元素在进入时具有弹性效果;
hvr-pulse-grow:元素像心脏一样跳动;
hvr-shrink:元素从大到小收缩;
hvr-bob:元素上下晃动;
除了上面的示例之外,还可以通过修改 Hover.css 代码来自定义颜色、尺寸和透明度等属性,以满足不同的设计需求
代码地址:https://github.com/IanLunn/Hover.git
Magic.css
Magic.css 是一个非常实用的 CSS3 动画库,提供了多种简单易用的 CSS3 动画效果,例如抖动、闪烁、旋转等。它易于使用,只需在 HTML 元素中添加类名即可实现动画效果。Magic.css 还支持自定义动画效果,可以帮助用户快速实现酷炫的动画效果。适用于多种场景:
网站首页和 Banner:通过 Magic.css 提供的动画特效,可以为网站的首页和 Banner 增添生动和有趣的元素,吸引用户的注意力,增加用户停留时间。
动态图标和按钮:Magic.css 可以实现很多具有交互性的动态图标和按钮,例如交换位置、旋转、弹跳、闪烁等效果,可以提升用户体验和页面互动性。
表单验证和反馈:Magic.css 中提供了一些表单验证和反馈的动态效果,例如闪烁、震动、颜色变化等,可以帮助用户快速识别表单的状态和错误信息。
图片和文字特效:通过 Magic.css 提供的图片和文字特效,可以为网页添加更多的视觉效果,例如立体效果、浮动、旋转、缩放等,可以使页面更加丰富和生动。
代码地址:https://github.com/miniMAC/magic.git
Loaders.css
Loaders.css 是一个轻量级的 CSS3 动画库,专门用于创建加载动画和进度条效果,提供了多种简单易用的设计。使用 Loaders.css 可以为页面的加载过程增加一些生动有趣的元素,降低用户等待时的焦虑感。
代码地址:https://github.com/ConnorAtherton/loaders.css.git
Imagehover.css
Imagehover.css 是一个基于 CSS3 的动画库,专门用于创建图像悬停效果。使用 Imagehover.css 可以为网站的图片增加生动有趣的效果,吸引用户的注意力,提升用户体验和页面互动性。
Imagehover.css 适用于多种场景,包括但不限于:
图片悬停特效:Imagehover.css 提供了多种精美的图片悬停特效,可以为网站的图片增加生动有趣的效果,吸引用户的注意力。
产品展示:Imagehover.css 可以用于展示产品的图片,通过特效的触发方式,提高用户对产品的关注度和购买欲望。
图片墙:Imagehover.css 可以用于实现图片墙,通过特效的布局和设计,让页面更加生动和有趣。
代码地址:https://github.com/ciar4n/imagehover.css.git
持续更新中…