a demo for css transform and transition

最新推荐文章于 2020-08-25 14:46:41 发布

原创最新推荐文章于 2020-08-25 14:46:41 发布 · 446 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#transition #css #chrome #safari #firefox #微软

CSS 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了如何使用CSS实现鼠标悬停时的图标旋转动画及文字颜色渐变过渡效果，并提供了不同浏览器下的兼容写法。

把鼠标放过来看看图标是怎么动起来的

代码：

/**/ img:hover{ -moz-transform:rotate(-130deg); -webkit-transform:rotate(30deg); transform:rotate(30deg); } /*beside linear also have ease,ease-in,ease-out,ease-in-out*/ a:hover { color: red; -webkit-transition: color .25s linear .2s; transition: color .25s linear .2s; }

这是别人写的一段代码：

.pre { font-family:微软雅黑; width:420px; border:3px solid red; /*for IE*/ filter : progid:DXImageTransform.Microsoft.Matrix(SizingMethod="auto expand",M11=1,M12=-0.4,M21=0.4,M22=1); /*for firefox*/ -moz-transform:translate(100px) rotate(35deg); -moz-transform-origin:40% 100%; /*for chrome,safari*/ -webkit-transform:translate(100px) rotate(35deg); -webkit-transform-origin:40% 100%; }

下面是transition的例子，只有chrome支持。

上和吉恩什么是什么呢？看看chrome是如何变色的。