在css3中定义了两种类型的渐变:什么和什么,分别使用什么和什么函数实现...

发布网友 发布时间：2022-04-28 21:56

我来回答

共2个回答

懂视网 时间：2022-05-13 07:54

首先，要知道它的规范和用法

还记得transition的用法么：在初始的样式中加入div{transition：width（height、transform） 5s；width：100px；}，然后再div：hover{width：300px}，是这样来实现过渡效果的，那么动画又该如何呢？

这里动画则是先描绘出动画的整体效果，然后对于实现动画的对象进行绑定

这里用个修改于w3cschool中的例子进行记录：

@keyframes myfirst{0% {background: red; left:0px; top:0px;}25% {background: yellow; left:200px; top:0px;transform:rotate(100deg);}50% {background: blue; left:200px; top:200px;}75% {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}@-moz-keyframes myfirst /* Firefox */{0% {background: red; left:0px; top:0px;}25% {background: yellow; left:200px; top:0px;transform:rotate(100deg);}50% {background: blue; left:200px; top:200px;}75% {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}@-webkit-keyframes myfirst /* Safari 和 Chrome */{0% {background: red; left:0px; top:0px;}25% {background: yellow; left:200px; top:0px;transform:rotate(100deg);}50% {background: blue; left:200px; top:200px;}75% {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}@-o-keyframes myfirst /* Opera */{0% {background: red; left:0px; top:0px;}25% {background: yellow; left:200px; top:0pxl;transform:rotate(100deg);}50% {background: blue; left:200px; top:200px;}75% {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}

这样再找一个对象进行绑定，而这个对象你发现一个什么问题了么，left和top来描绘距离啊，肯定是绝对位置嘛，所以来写一下html部分

div{animation: myfirst 5s;-moz-animation: myfirst 5s;	/* Firefox */-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */-o-animation: myfirst 5s;	/* Opera */-moz-animation-iteration-count: 4;}

但是有一点我们需要注意，并不是随便绑定就可以实现的，这个绑定是有条件的，那么是什么条件呢？

1、确定绑定的是哪一个动画效果，2、实现动画效果需要多长时间，如果不写，默认为不运行；

当然这是最基本的要求，而我们为了动画效果实现的更好，还可以从以下几个属性进行设置：

1、animation-iteration-count，设置设定的动画效果执行的次数，这里还要明确一点的时，当全部次数运行完后，仍然会消失

2、animation-direction，是动画效果该如何实现，是正常还是逆序；

3、animation-play-state，动画的运行效果，暂停还是运行；

4、animation-delay，动画何时开始运行

等等，通过这些属性，我们能更好的个性化的实现自己的动画效果了吧

css3在不知不觉中原来已经看了这么多了，在这个周末应该好好总结一下相关的内容了，这几天就把还没看到的几个地方再学习下好了

热心网友 时间：2022-05-13 05:02