Rumah > Artikel > hujung hadapan web > 使用css3让网页元素通过样式实现动画效果代码

使用css3让网页元素通过样式实现动画效果代码

零下一度asal: 2017-04-22 13:41:222280semak imbas

使用css3可以在不使用javascript和flash的情况下让网页元素通过样式实现动画效果，让网站更加酷炫。

css3过渡

过度动画（trainsition)属性就可以实现让元素样式的过度，trainsition支持的浏览器有ie10，firefox，chrome和opera。

先来看看trainsition的几个属性：

trainsition-property:规定应用过渡的css属性名称。

trainsition-duration:规定过度花费的时间。

trainsiton-timing-function:规定过度的时间曲线.

trainsition-delay：规定过渡何时开始。

先看一个简单的过度例子，在demo.css中写上

p{
width:100px;
height:100px;
background:red;
trainsition:width 3s,height 2s;//在这里为了方便，将过渡属性简写了，我们可以将过渡属性简写为trainsition:加上上面四个属性，可以把默认属性省略。
}

p:hover
{
width:300px;
height:200px;
}

在demo.html中写上

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"  href="demo.css"/>
</head>
<body>

<p></p>

</body>
</html>

把鼠标移动到红色p块上就可以看见红色的块长和宽慢慢的增加，这就是过渡的最简单实现。

注意：过渡时间不设置的话，默认情况下为0。就是不会出现过渡的效果。

我们更经常使用的方法是通过js来添加样式来实习各种动画过渡，如下：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<style>
p{
   background:red;
   width:200px;
   height:200px;
   transition:width 2s,height 2s;
}
p.over{
width:300px;
height:300px;
}
</style>
</head>
 
<body>
<p 
</p>
<script> 
$(&#39;p&#39;).hover(function(){
  $(&#39;p&#39;).addClass(&#39;over&#39;);},
  function(){
    $(&#39;p&#39;).removeClass(&#39;over&#39;);
});
</script> 
</body>
</html>

改代码中通过jquery在鼠标划过时添加了over的样式，在鼠标离开时移除了over样式，由于在p样式里设置了transition属性，所以实现了过渡动画。

但是上面虽然实现样式的改变，我们可以看出该改变是从一个初状态到末状态的改变，局限性非常大，所以我们希望有中间状态的转化。这时候就要用到关键帧动画(@keyframes)：

其基本格式为：

@keyframes 名称｛

时间点｛元素状态｝

....

｝

如我们可以用

@frames chgground{
    from{ backgroud:red;}
    to{backgroud:yellow;}
}

定义里关键帧动画之后还要把它绑定到一个要应用的元素中才可以，如：

p{
animation:chgbackground 3s;
}

我们用animation来绑定，该元素的属性有：

p就有了chgbackground的动画，我们还可以使用百分比来指定关键帧的状态，from to 就是0%和%100，如下代码

@frames chgbackground{  
0%{background:yellow;}  
50%{background:red;}  
100%{background:black;}  
}

t通过该代码就可以实现背景在0%到50%和50%到100%时不一样的渐变效果。

使用animate.css只要下载animate.css并在引用该文件，在需要的地方加上上特定的动画类名，就可以实现各种效果，如：

3f1c4e4b6b16bbbd69b2ee476dc4f83a$('p').addClass('shake');2cacc6d41bbb37262a98f745aa00fbf0就可以轻松的添加元素抖动效果。

Atas ialah kandungan terperinci 使用css3让网页元素通过样式实现动画效果代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：纯css做一个简单好看的导航栏Artikel seterusnya：用css实现图片放大镜效果实例详解（图）

Artikel berkaitan

Lihat lagi