qfile 从头开始_从头开始CSS3过渡和转换

最新推荐文章于 2022-02-17 19:55:53 发布

daique1908

最新推荐文章于 2022-02-17 19:55:53 发布

阅读量302

点赞数

文章标签：定位 css css3 人工智能 html

qfile 从头开始

有一些CSS转换和过渡的惊人示例，尽管您可能被它们震撼了，但您很有可能也会不知所措并且受到威胁！本教程将带您回到基础知识。我们将逐步创建一些基本CSS3过渡运动。

关于浏览器支持的快速说明：

跨浏览器的支持已经相当合理了。 Firefox 3.5，Chrome，Opera 10.5，Safari 3.1和Internet Explorer 9.0涵盖了有关转换的内容。尽管已计划为IE10提供支持，但IE在过渡方面的适应性稍差一些。

轴与网格

为了帮助轻松理解运动，我们将研究一个轴网格（您可能会从基础数学中识别出这一点）。我们将使用x和y坐标移动对象。

唯一（关键的）区别是，在我们的轴上，-y值在x轴之上，而通常在它之下。为什么？嗯，HTML和CSS（以及诸如ActionScript之类的其他网络技术）使用了倒置的 笛卡尔坐标系，因为网页从左上角开始向下阅读。所以现在你知道了:)

注意：我将假设您已经熟悉HTML和CSS文件结构。我将跳过解释如何设置CSS文件，放置图像和设置Axis样式的说明。我们的重点将放在动画对象上。如果您不确定自己HTML + CSS技能是否可以掌握，请在30天之内（免费）查看新的Tuts + Premium HTML和CSS ，您将学到所有需要了解的知识。

1.水平运动

我们将演示的第一个动作是“水平”；我们将为该对象设置动画，使其左右移动。

向右移动

为了使对象从其初始位置移动，我们使用： transform: translate(x,y); ，其中x值应为正，y值应为0，以将对象向右移动。

HTML

打开您喜欢的文本编辑器并输入以下html标记，然后保存文件。

<div id="axis" class="one">
<img class="object van move-right" src="images/van-to-right.png"/>
</div>

我们为图像分配了三个类：

对象：我们使用此类为将使用的所有对象设置通用规则。
范：我们将使用不同的对象来演示每个动画，因此我们还将对它们应用不同的类。这样，我们可以分别放置每个对象。
向右移动：我们将使用此类移动对象，每次移动将具有不同的类。

CSS

首先，我们将对象（我们的货车图像）放置在网格的中心。

.object {
	position: absolute;
}
.van {
	top: 45%;
	left: 44%;
}

在此示例中，我们将向右移动对象350px。语法为transform: translate(350px,0); 当轴悬停在上方时，对象将移动。因此，我们使用#axis:hover .move-right 。

#axis:hover .move-right{
	transform: translate(350px,0);
	-webkit-transform: translate(350px,0); /** Chrome & Safari **/
	-o-transform: translate(350px,0); /** Opera **/
	-moz-transform: translate(350px,0); /** Firefox **/
}

CSS转换属性只会将对象从一个点移动到另一点，而不会在两个状态之间设置动画。为此，我们需要在.object类中添加一个transition属性。

.object {
	position: absolute;
	transition: all 2s ease-in-out;
	-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
	-moz-transition: all 2s ease-in-out; /** Firefox **/
	-o-transition: all 2s ease-in-out; /** Opera **/
}

该转换规则将告诉浏览器使用ease-in-out定时功能（补间）为对象附加到对象的all属性设置动画2 seconds ，而不会出现延迟。

我们可以使用6种类型的过渡计时功能：

线性：过渡从开始到结束将具有恒定的速度。
缓解：过渡将缓慢开始，然后变快，然后缓慢结束。
缓入：过渡将缓慢开始。
缓解：过渡将缓慢结束。
缓入：过渡开始和结束缓慢。
三次贝塞尔曲线：为您自己的过渡定义特定的值。

观看演示

向左移动

要将对象向左移动，我们只需要在x坐标中输入一个负值，而y坐标应保持为0 。在本例中，我们将对象-350px向左移动。

HTML

创建另一个HTML文件，然后输入以下标记。

<div id="axis" class="two">
	<img class="object van move-left" src="images/van-to-left.png"/>
</div>

这次我们使用move-left类设置将对象向左移动的css规则。

CSS

然后，我们输入-350px作为x坐标。 transform: translate(-350px,0); 将对象向左移动。很简单，对吧？

#axis:hover .move-left {
	transform: translate(-350px,0);
	-webkit-transform: translate(-350px,0); /** Safari & Chrome **/
	-o-transform: translate(-350px,0); /** Opera **/
	-moz-transform: translate(-350px,0); /** Firefox **/
}

由于我们先前已在.object类中设置了转换规则，因此无需再次设置它。

观看演示

2.垂直运动

垂直移动对象非常容易，几乎与水平移动相同。唯一的区别是，我们将使用-y值将对象向上移动，将使用y值向下移动。

向上移动

HTML

HTML标记与前两个示例相同。但是，我们将其替换为火箭（出于说明目的），并且用于向上运动的类是move-up 。

<div id="axis">
	<img class="object rocket move-up" src="images/rocket.png"/>
</div>

CSS

与面包车一样，我们将火箭定位在网格的中心：

.rocket {
	top: 43%;
	left: 44%;
}

如前所述，y坐标应为负，以使火箭向上移动。在这种情况下，我们将其向上移动350px。

#axis:hover .move-up {
	transform: translate(0,-350px);
	-webkit-transform: translate(0,-350px);
	-o-transform: translate(0,-350px); 
	-moz-transform: translate(0,-350px);
}

观看演示

向下移动

向下移动对象的方法（使人惊讶）与向上移动相反。 y坐标值应为正，x坐标应保持为0。语法为以下transform: translate(0,y);

HTML

在此示例中，我们将使用硬币演示向下运动。天才！

<div id="axis" class="four">
<img class="object coin move-down" src="images/coin.png"/>
</div>

CSS

#axis:hover .move-down {
	transform: translate(0,350px);
	-webkit-transform: translate(0,350px);
	-o-transform: translate(0,350px); 
	-moz-transform: translate(0,350px);
}

观看演示

3.对角运动

为了创建对角线过渡，我们将结合坐标x和y的值 。语法应transform: translate(x,y) 。根据方向， x和y的值可以为负或正。

HTML

为了演示我们的对角线运动，我们将使用纸飞机。

<div id="axis" class="five">
<img class="object plane move-ne" src="images/paper-plane.png"/>
</div>

CSS

我们将向东北方向移动。对于x坐标值，我们输入一个正值（350px），对于y坐标，我们输入一个负值（-350px）。因此，语法将如下所示： transform: translate(350px,-350px);

#axis:hover .move-ne {
	transform: translate(350px,-350px);
	-webkit-transform: translate(350px,-350px);
	-o-transform: translate(350px,-350px); 
	-moz-transform: translate(350px,-350px);
	
}

随意进行实验并指导对象沿其他对角线轴的移动。

观看演示

4.旋转

CSS3中的旋转运动使用从0°到360°的径向坐标进行调节。要旋转对象，只需应用以下css属性： transform: rotate(ndeg); 其中n是旋转度。

顺时针360°

要顺时针旋转对象，请为rotate(ndeg)属性输入一个正值。

HTML

在此示例中，我们将使用铅笔来演示运动。

<div id="axis" class="six">
<img class="object pencil rotate360cw" src="images/pencil.png"/>
</div>

CSS

然后，我们将对象顺时针旋转360度。

#axis:hover .rotate360cw {
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-o-transform: rotate(360deg); 
	-moz-transform: rotate(360deg);
}

观看演示

逆时针360°

要执行逆时针旋转，我们输入（您猜对了）负值。

HTML

我们仍然使用铅笔作为对象，但是我们将其类更改为.rotate360ccw。

<div id="axis" class="seven">
<img class="object pencil rotate360ccw" src="images/pencil.png"/>
</div>

CSS

#axis:hover .rotate360ccw {
	transform: rotate(-360deg);
	-webkit-transform: rotate(-360deg);
	-o-transform: rotate(-360deg); 
	-moz-transform: rotate(-360deg);
}

观看演示

5.缩放

缩放是CSS3中一个有趣的功能。通过使用scale（n）或scale（x，y）属性，我们可以在HTML中放大或缩小对象。将根据n / x，y值缩放对象，其中x轴表示宽度，y轴表示高度。例如，如果输入scale（2），则对象将从其初始尺寸开始沿两个轴缩放两次（较大200％）。

让我们看下面的例子。

在此示例中，我们将汽车的尺寸增加了200％，给人一种幻象，即汽车正在靠近（希望如此）。

HTML

同样，HTML标记几乎没有变化，但是这次我们使用汽车作为对象。

<div id="axis" class="eight">
<img class="object car larger" src="images/car.png"/>
</div>

CSS

#axis:hover .larger{
	transform: scale(2);
	-webkit-transform: scale(2);
	-o-transform: scale(2); 
	-moz-transform: scale(2);
}

观看演示

6.多重动作

在玩完基本的动作和变换之后，我们现在尝试结合其中的一些动作。让我们来看看。

HTML

这次，我们将使用飞旋镖来演示动画。

<div id="axis" class="ten">
<img class="object boomerang multiple-move" src="images/pencil.png"/>
</div>

CSS

计划是对角移动回旋镖，同时执行旋转。为此，我们只需列出转换，并用空格分隔即可。

#axis:hover .multiple {
	transform: translate(350px, -350px) rotate(360deg);
	-webkit-transform: translate(350px, -350px) rotate(360deg);
	-o-transform: translate(350px, -350px) rotate(360deg);
	-moz-transform: translate(350px, -350px) rotate(360deg);
}

观看演示

结论

这些是基本示例，还有很大的发展空间！请记住：在使用CSS3属性时，请考虑到浏览器支持，不要为这些效果而疯狂-它们应增强您的设计，而不是淹没它！

要获得更多灵感，请看一下Envato Market上一些很棒的CSS3动画和效果。这里有一些例子：

这些华丽，微妙且有用CSS3翻转，淡入淡出和辉光过渡可帮助您扩展网站的资源并更有效地利用您的空间。包括视频，地图，图像等在内的所有内容都可以翻转（或淡化）。

这是纯CSS3加载程序动画的工具包。这些15+ CSS3动画效果与所有主要浏览器兼容。

这是五个纯CSS动画图像标题的集合。该工具包提供了一些很棒的效果，可以在创建网站时节省大量时间。

此项目使您可以使用社交媒体为员工等构建自己的镶嵌网格。它包括28个社交图标和一系列不同的网格配置。

翻译自: https://webdesign.tutsplus.com/articles/css3-transitions-and-transforms-from-scratch--webdesign-4975

qfile 从头开始

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
qfile 从头开始_从头开始CSS3过渡和转换

有一些CSS转换和过渡的惊人示例，尽管您可能被它们震撼了，但您很有可能也会不知所措并且受到威胁！本教程将带您回到基础知识。我们将逐步创建一些基本CSS3过渡运动。关于浏览器支持的快速说明：跨浏览器的支持已经相当合理了。 Firefox 3.5，Chrome，Opera 10.5，Safari 3.1和Internet Explorer 9.0涵盖了有关转换的内容。尽管已计划...
复制链接

扫一扫