PageAdmin网站内容管理系统(CMS)交流论坛

注册

 

QQ登录

只需一步,快速开始

发新话题 回复该主题

图片旋转特效 [复制链接]

1#
当鼠标移到图片上面时,图片可以旋转,达到非常漂亮的动态效果。代码如下:
样式代码:
.tptx {    
            margin: 0 auto;
            -webkit-border-radius: 110px;
            border-radius: 110px;
            -webkit-transition: -webkit-transform 0.2s ease-out;
            -moz-transition: -moz-transform 0.2s ease-out;
            -o-transition: -o-transform 0.2s ease-out;
            -ms-transition: -ms-transform 0.2s ease-out;
        }
        .tptx:hover {
            -webkit-transform: rotateZ(180deg);
            -moz-transform: rotateZ(180deg);
            -o-transform: rotateZ(180deg);
            -ms-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
        }

网页代码:<img src="img/XXX" class="tptx" />

注XXX为图片地址,代码中数字根据你的需求任意调整,0.2为转动时间,180为转动角度(360为一周)。

实例:业华游乐.中国
分享 转发
TOP
2#
TOP
发新话题 回复该主题