分类目录 共计收录4183站; 资讯文章4628篇; 待审网站 1022站; 当月收录23站; 今日审核0站; 已收到1个打赏!
快审详情
快审qq
首页 > 教程收藏 > CSS教程

css3制作鼠标悬停图片背景360°旋转动画效果

.xwcms {
    width: 220px;
    height: 220px;
    margin: 0 auto;
    background: no-repeat url("images/author.jpg") left top;
    -webkit-background-size: 220px 220px;
    -moz-background-size: 220px 220px;
    background-size: 220px 220px;
    -webkit-border-radius: 110px;
    border-radius: 110px;
    -webkit-transition: -webkit-transform 2s ease-out;
    -moz-transition: -moz-transform 2s ease-out;
    -o-transition: -o-transform 2s ease-out;
    -ms-transition: -ms-transform 2s ease-out;
}
.xwcms:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}

css3制作鼠标悬停图片背景360°旋转动画效果.css样式:3wT网站目录

适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗3wT网站目录

此文由 网站目录 编辑,未经允许不得转载!:

评论 暂无评论
-->