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

没有那个平移的效果

@charset"utf-8";
*{margin:0;padding:0;}
figure{position:relative;width:33.33%;overflow:hidden;float:left;}
figcaption{position:absolute;top:0;left:0;color:#FFF;font-family:"微软雅黑"}
figure img{opacity:0.8}
figure figcaption p{transiton:all 0.35s;}
@media screen and (min-width:1001px){
	figure{width:33.33%}
}
@media screen and (min-width:601px) and (max-width:1000px){
    figure{width:50%}

}
@media screen and (max-width:600px){
    figure{width:100%}
}
.test1{background:#2F0000}
.test1 figcaption p{background:#FFF;color:#333;margin:5px;text-align:center;transform:translate(-120px,0px)}
.test1 figcation p:nth-of-type(1){transition-delay:0.05s}
.test1 figcation p:nth-of-type(2){transition-delay:0.1s}
.test1 figcation p:nth-of-type(3){transition-delay:0.15s}
.test1 figcaption{padding:20px;}
.test1:hover figcaption p{transform:translate(0px,0px)}

正在回答

1 回答

部分浏览器要加前缀


transition: ;

-moz-transition: ; /* Firefox 4 */

-webkit-transition: ; /* Safari 和 Chrome */

-o-transition: ; /* Opera */


transform: ;

-ms-transform: ;     /* IE 9 */

-moz-transform: ;    /* Firefox */

-webkit-transform: ; /* Safari 和 Chrome */

-o-transform: ;      /* Opera */


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

举报

0/150
提交
取消
CSS3图片动态提示效果
  • 参与学习       53895    人
  • 解答问题       142    个

实用的CSS3图片动态提示效果,熟练掌握CSS动画的制作技法

进入课程

没有那个平移的效果

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