您当前的位置:主页 > 资源下载 > Html5模版网站首页Html5模版

推荐一个网页加载后图片翻转效果的CSS3代码

发布时间:2016-03-04编辑:余斗文件大小:69KB阅读:(0)字号:
      特效说明:这是一款CSS3网页加载后图片翻转效果代码,基于CSS3属性transform编写简单动画,随简单,但是效果很好的图片翻转效果。请用支持HTML5+CSS3主流浏览器预览效果。(兼容测试:FireFox、Chrome、Safari、Opera等支持HTML5/CSS3浏览器)   使用方法:   调用CSS样式:

    <link rel="stylesheet" type="text/css" href="http://lailaikeji.com/spa" style="color:#91268F">"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结束 */
     
      推荐一个网页加载后图片翻转效果的CSS3代码
    反转效果展示

    推荐一个网页加载后图片翻转效果的CSS3代码
    解压后文件

  1. 预 览
  2. 下 载
下载说明: 1、解压密码:yudouyudou 2、只有部分模板会提供多页面下载,未加说明都是只有一个首页index.html模板。 3、如果您发现模板或软件有错,或者您有其他更好的意见、建议请给我留言,我会及时处理! 4、如果您遇到什么问题,也可加余斗QQ 548474762 咨询! * 受百度影响,部分网盘资源可能失效,如果您发现资源失效了,请及时留言或联系余斗 * * 下载本站模板以及软件仅供学习研究之用,若发现任何组织机构及个人有用于商业目的者,必追究其法律责任 *
关键字词css3
余斗余斗
  1. 转载请注明:推荐一个网页加载后图片翻转效果的CSS3代码
  2. 版权声明:本站原创文章,由发表在Html5模版分类下,于2016-03-04最后更新
30款CSS3实现的加载Loading时特效
CSS3毛玻璃实现微信发红包看照片
手机扫一扫 随身带着看
鸿运国际手机登录首页