找回密码
 注册

QQ登录

只需一步,快速开始

查看: 17566|回复: 7

[HTML5] 纯css3,鼠标移出怎么添加transition效果

[复制链接]
发表于 2014-6-25 16:41:41 | 显示全部楼层 |阅读模式
100体力
本帖最后由 michaelzhouh 于 2014-6-25 16:43 编辑

 提示:您可以先修改部分代码再运行

鼠标进入,我加了效果,鼠标移出的时候,我想反向transition变回原始状态。不用js能实现么?

晕死,不能直接运行,只能复制代码出去运行。

最佳答案

查看完整内容

[html] .aa {width:120px; height:120px;} .aa img {-webkit-transform:rotate(0deg) scale(1); -webkit-transition:-webkit-transform 1s ease;} .aa:hover img{-webkit-transform:rotate(360deg) scale(0.5); -webkit-transition:-webkit-transform 1s ease;} [/html]猜你要的,chrome下有效,复制到本地查看,兼容的方式可以参考LS
发表于 2014-6-25 16:41:42 | 显示全部楼层
本帖最后由 WellFrog 于 2014-6-25 17:42 编辑

 提示:您可以先修改部分代码再运行

猜你要的,chrome下有效,复制到本地查看,兼容的方式可以参考LS
回复

使用道具 举报

发表于 2014-6-25 17:01:22 | 显示全部楼层
hover为类就能达到你要的效果,但是,你的写法有错误,

要有兼容性写法

下面这个只兼容谷歌,其它的兼容参考W3C

 提示:您可以先修改部分代码再运行

回复

使用道具 举报

发表于 2014-6-25 17:02:24 | 显示全部楼层
不是不能直接运行,是你没有写兼容性写法,需要兼容

下面这个只能兼容谷歌,其它的兼容参考W3C

 提示:您可以先修改部分代码再运行

回复

使用道具 举报

发表于 2014-6-25 17:21:41 | 显示全部楼层

 提示:您可以先修改部分代码再运行

回复

使用道具 举报

发表于 2014-6-25 17:23:52 | 显示全部楼层

是不是这意思
回复

使用道具 举报

发表于 2014-6-25 19:00:30 | 显示全部楼层
很奇怪哦,我回复的帖子说,需要审核,然后现在不见了,审核什么的也没有消息
回复

使用道具 举报

 楼主| 发表于 2014-6-26 09:57:02 | 显示全部楼层

谢谢了,主要还没习惯这个思维,把hover之后的动画写到元素上。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备19000417号-2 )

GMT+8, 2021-11-29 10:59 , Processed in 0.061078 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表