CONTENT

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

使用方法:

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

CSS样式:

  1. /* 效果CSS开始 */
  2. .zzsc{ padding:2% 0; overflow:hidden;}
  3. .zzsc img{width: 18%;margin:1%; border-radius:5px; float:left;}
  4. .zzsc .rotatesimg{-webkit-animation:transform-5 2s ease 500ms alternate none 1;animation:transform-5 2s ease 500ms alternate none 1;}
  5. @-webkit-keyframes transform-5 {
  6.     from{-webkit-transform:perspective(400px) rotateY(180deg);transform:perspective(400px) rotateY(180deg);}
  7.         to{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);}
  8. }
  9. @keyframes transform-5 {
  10.     from{-webkit-transform:perspective(400px) rotateY(180deg);transform:perspective(400px) rotateY(180deg);}
  11.         to{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);}
  12. }
  13. /* 效果CSS结束 */

效果如图:

Comments | NOTHING

暂无评论...