• 不断学习才有回报,学无止境!

网页加载后图片翻转效果的CSS3代码

DIV+CSS技巧发现 箭翎 747次浏览 0个评论 扫描二维码

特效说明:这是一款CSS3网页加载后图片翻转效果代码,基于CSS3属性transform编写简单动画,随简单,但是效果很好的图片翻转效果。请用支持HTML5+CSS3主流浏览器预览效果。(兼容测试:FireFox、Chrome、Safari、Opera等支持HTML5/CSS3浏览器)使用方法:
调用CSS样式:

<link rel="stylesheet" type="text/css" href="css/style.css" />

CSS代码:
/* 效果CSS开始 */

.zzsc{ padding:2% 0; overflow:hidden;}
.zzsc img{width: 18%;margin:1%; border-radius:5px; float:left;}
.zzsc .rotatesimg{-webkit-animation:transform-5 2s ease 500ms alternate none 1;animation:transform-5 2s ease 500ms alternate none 1;}
@-webkit-keyframes transform-5 {
from{-webkit-transform:perspective(400px) rotateY(180deg);transform:perspective(400px) rotateY(180deg);}
to{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);}
}
@keyframes transform-5 {
from{-webkit-transform:perspective(400px) rotateY(180deg);transform:perspective(400px) rotateY(180deg);}
to{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);}
}

/* 效果CSS结束 */

效果展示如下图:


1


箭翎 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明网页加载后图片翻转效果的CSS3代码
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址