css怎么让鼠标悬浮旋转出现另一张图片鼠标拿开旋转消失
2个回答
展开全部
css让鼠标悬浮旋转出现另一张图片鼠标拿开旋转消失，可以尝试一下代码
.xwcms {
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;
}
.xwcms:hover {
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
<img src="img/jiaotou.png" class="xwcms" />
.xwcms {
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;
}
.xwcms:hover {
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
-o-transform: rotateZ(180deg);
-ms-transform: rotateZ(180deg);
transform: rotateZ(180deg);
}
<img src="img/jiaotou.png" class="xwcms" />
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这与html的结构是分不开的
举个例子
html
<div.class="pic">鼠标移过来看看<img src="你找张你本地的图片放这里"/></div>
.pic{position:relative;}
.pic img{display:none}
.pic:hover img{display:block}上面的代码，实现了鼠标经过时，图片显示。但ie低版本浏览不支持a以外的元素的hover伪类，所以这个写法是不兼容低版本浏览的。
另外你的要求是
鼠标拿开旋转消失
这个可以在.pic img加css3的过渡属性，在.pic:hover img加css3的旋转属性即可。
更多追问追答
追问
可以吧代码详细化吗？谢谢
追答
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css3学习</title>
<style type="text/css">
.pic{position:relative;height: 24px;width: 200px;margin: 120px auto;}
.pic img{position: absolute;right: 0;top: 0;transition:all 0.5s linear;transform:rotate(0deg);opacity: 0}
.pic:hover img{opacity: 1; transform:rotate(-360deg);}
</style>
</head>
<body>
<div class="pic">鼠标移过来看看<img src="https://gss0.bdstatic.com/70cFsj3f_gcX8t7mm9GUKT-xh_/avatar/100/r11s1g9.gif"/></div>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
