css过渡取消过渡_CSS基础知识：CSS3过渡
css过渡 取消过渡
随着CSS3在⽹络上的推⼴，它带来了⼀些有趣的新演⽰技术。 今天，我们将回顾使⽤CSS3过渡和动画的基础知识，以增加额外的修饰。
本教程包括Tuts + Premium成员可⽤的截屏视频。
步骤1 –链接转换
⾸先，我们将使⽤⼀些基本技术-⾸先，当⽤户将⿏标悬停在指定元素上时，只需简单更改⽂本颜⾊即可。
a { color:#000; }
a:hover { color:#f00; }
在这⾥，我们将⿏标悬停时将⽂本颜⾊更改为红⾊。 现在，使⽤少量CSS3，我们可以通过逐渐淡⼊颜⾊来创建更加平滑的外观。
a{
color:#000;
-webkit-transition:color 1s ease-in;
}
a:hover{color:#f00;}
我们添加了css属性-webkit-transition。 请注意，-webkit前缀指定此选项仅在Webkit引擎或Safari和Chrome中有效。 幸运的是，其他现代浏览器也有⾃⼰的实现。 涵盖所有浏览器的完整声明可能类似于以下内容：
a {
color:#000;
-webkit-transition:color 1s ease-in;
-moz-transition:color 1s ease-in;
-o-transition:color 1s ease-in;
transition:color 1s ease-in;
}
请注意，在本教程中，我们将只专注于Webkit实现。 声明属性后，我们得到的值是“ color 1s easy-in”。 这是速记声明； 这三个值表⽰：
1. 要转换的属性
2. 过渡期
3. 过渡类型
在这种情况下，我们使⽤缓⼊过渡，这将缓慢开始过渡，并加快过渡速度。
步骤2 –背景转换
更改状态的另⼀个基本⽤途是更改焦点上的输⼊框的背景。
input.ourInputBox:focus{
-webkit-transition:background-color 0.5s linear;
background:#CCC;
}
这次，我们将过渡声明置于悬停状态，这样就不会在CSS中添加其他不必要的类。 输⼊框获得焦点后，我们将应⽤过渡。
步骤3 –过渡多个属性
实际上，CSS过渡相对来说很简单，可以添加到现有的悬停功能中，并为您的⽹站提供更多⽀持CSS3的浏览器。
为了更进⼀步，我们还可以使⽤CSS3过渡的简化版本来过渡多个CSS属性。
a.thebg {
color:#000;
background:#f00;
padding:5px;
-webkit-border-radius: 5px;
-webkit-transition-property:color, background;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;
}
a.thebg:hover {
color:#f00;
background:#000;
}
这次，背景和⽂本颜⾊在悬停时发⽣了变化，因此我们可以在过渡时将这两个属性作为⽬标。 我们简
单地分割转换：⾸先，我们具有-webkit-transition-property，并⽤逗号分隔不同的值。 因此，我们分别针对颜⾊和背景属性。
-webkit-transition-property:color, background;
然后，我们使⽤以下命令设置过渡的持续时间：
-webkit-transition-duration:1s, 1s;
它们的引⽤顺序与第⼀条语句相同。 但这⼀次，两个值都设置为1s。
最后，我们设置计时函数，并设置两个不同的值：第⼀个是线性的，与我们第⼀个声明的变量– color有关； 第⼆个与可变背景有关。因此，我们将颜⾊设置为在⼀秒钟内线性变化，并在同⼀时间段内设置背景为缓和。
步骤4 –将各个部分放在⼀起
当CSS3转换与其他新CSS属性结合使⽤时，它们便开始出现了。
您可以在查看使⽤重叠元素和过渡的⽰例。
让我们创建⼀个简单的动画弹出标志⽰例。
我们⾸先为路标创建边界框，并为其提供⼀个相对的定位上下⽂，以确保我们可以在其中完全定位项⽬。
#signpost{
width:60px;
height:196px;
position:relative;
}
现在，我们将框放在页⾯上，然后将标牌的各个部分放在其中。
<div id="signpost">
<img id="post" src="post.png">
<img id="sign" src="sign.png">
</div>
接下来，以2的z索引定位帖⼦，以将其放置在符号上⽅。
#post{
width:79px;
height:196px;
z-index:2;
position:relative;
}
现在，我们添加位于帖⼦下⽅的符号，并使⽤CSS3 transform属性对其进⾏旋转。
#sign{
height:46px;
width:80px;
position:absolute;
top:10;
left:60;
-webkit-transform-origin:0 0;
-webkit-transform: rotate(86deg);
z-index:1;
-webkit-transition:-webkit-transform 0.5s ease-in-out;
}
使⽤-webkit-transform旋转标志：rotate（86deg），并将其定位在桩下。 为了确保符号围绕适当的点旋转，我们必须将变换原点更改
为左上⾓：0、0。
我们设置过渡以使⽤缓⼊配置⽂件在0.5s内更改-webkit-transform属性，并在悬停时将符号旋转回其原始⽅向。
#signpost:hover #sign{
-webkit-transform:rotate(0deg);
}
我们在包含#signpost：hover的对象上执⾏此操作，⽽不是在#sign本⾝的⿏标上进⾏操作。
步骤5 –动画介绍
现在，我们可以使⽤webkit动画将所有这些结合在⼀起，这使我们能够执⾏诸如连续旋转的操作。
我们⾸先创建两个圆形图像，然后将它们放置在⼀个包含div的位置–就像上⾯的路标⼀样。
<div id="circles">
<img src="tutsplus.s3.amazonaws/tutspremium/web-development/056_css_trans/images/outer.png" width="180" height="180" class="outercircle"/>  <img
src="tutsplus.s3.amazonaws/tutspremium/web-development/056_css_trans/images/middle.png" width="90" height="90" class="middlecircle"/> </div>
#circles{
width:180px;
height:180px;
position:relative;
}
.outercircle{
width:180px;
height:180px;
position:absolute;
z-index:1;
top:0:
left:0;
}
.middlecircle{
width:90px;
height:90px;
position:absolute;
z-index:3;
top:45px;
left:45px;
}
现在我们需要定义动画； 我们将沿相反的⽅向旋转圆圈，因此我们需要设置两个动画。
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes spinrev {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-360deg);
}
}
给动画起⼀个参考名称，在本例中为“ spin”和“ spinrev”。 然后，我们他们分配到和值; 因此我们使⽤webkit变换将图像从0度旋转到360度，反之则旋转到-360度。
现在，我们将此动画分配给悬停状态。 请注意，如果我们将其分配为正常状态，则动画将在页⾯加载后⽴即运⾏。
#circles:hover .outercircle {
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 10s;
}
#circles:hover .middlecircle{rotate属性
-webkit-animation-name: spinrev;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 5s;
}
我们引⽤之前创建的动画名称（-webkit-animation-name：spin;）。 然后，声明希望动画运⾏的次数（-webkit-animation-iteration-count：⽆限；）。 在这种情况下，当#circles div悬停在其上时，infinite将使其不断旋转。
接下来，我们设置计时功能（-webkit-animation-timing-function：linear;），最后，我们为每次迭代设置⼀个持续时间-在这种情况下，它将是⼗秒（-webkit-animation-duration：10s ;），以及五个完整的⾰命。
第6步–使⽤Modenizr进⾏优雅的处理
⼀旦⼀切正常，我们应该考虑使⽤没有CSS3功能的Web浏览器进⾏浏览的⽤户。 使⽤JavaScript库（例如可以轻松完成此操作，该库向与浏览器功能相关HTML元素添加了类。
使⽤上⾯的路标⽰例，不⽀持CSS转换的浏览器将⽆法将路标正确放置在路标下； 因此我们可以定位这些浏览器，并简单地隐藏标志，直到将其悬停为⽌。
.no-csstransforms #signpost #sign{
display:none;
}
.no-csstransforms #signpost:hover #sign{
display:block;
}
就像链接到Modernizr脚本，到适当的类名称，然后为该实例创建单独CSS语句⼀样简单。
结论
⽬前为⽌就这样了。 我希望你喜欢它！ 如果您有以下任何问题/意见，请告诉我！
css过渡 取消过渡

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。