为了账号安全,请及时绑定邮箱和手机立即绑定

详细讲解给萌新,我姓雷。

话不多说,先简化代码,把兼容代码去掉,然后看代码里的注释

.change img{

  display:block;

  width:300px;

  height:284px;

  opacity:0;

  transform:translate(-100px,-100px);

  transition: opacity 1s ease-in-out 0.5s,transform 3s ease-in-out;

}

.change:hover img{

  transform:translate(0px,0px);

  opacity:1;

/*透明度1s时间完成转换(由0到1),{两边的ease-in-ou不用说了吧},transform:1s时间完成转换(xy值-100px到0px)  .1s就是我和你赛车我先让你抢跑0.1s在追上你的意思 */

  transition: opacity 1s ease-in-out,transform 1s ease-in-out .1s;

}


正在回答

1 回答

你的问题呢??

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
CSS动画实用技巧
  • 参与学习       79017    人
  • 解答问题       83    个

本CSS教程教你使用CSS实现惊艳的动画效果,一起去领略一番

进入课程

详细讲解给萌新,我姓雷。

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信