咨询电话：186 7916 6165 (微信同号) 在线QQ：181796286

在线留言网站地图

NEWS BLOG ·

学无止境

关注开优网络关注前沿

学无止境

当前位置：首页 > 学无止境 > CSS

没有了

4种CSS3效果(360度旋转、旋转放大、放大、移动)

CSS3 图片旋转

发表日期：2016-02-11 文章编辑：南昌开优网络浏览次数：4286 标签：CSS应用

网页用常用的ico小图标用CSS3 使其鼠标移上去时旋转

<a href="#"><img src="images/tubiao.jpg" />  标题题标题题标题题标题题标题题标题题标题题</a>

<style type="text/css">

img

{

border: none;

float: left;

margin: 6px 0 0 6px;

-webkit-transition: 1s all;

-moz-transition: 1s all;

-o-transition: 1s all;

transition: 1s all;

}

a:hover img

{

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

}

</style>

返回列表

上一篇：没有了！下一篇：4种CSS3效果(360度旋转、旋转放大...