• 欢迎访问夜影小窝网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入夜影小窝 QQ群
  • Git主题现已支持滚动公告栏功能,兼容其他浏览器,看到的就是咯,在后台最新消息那里用li标签添加即可。
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏夜影小窝吧

一款纯CSS3立体式3D鼠标悬停效果

WEB技术 yyhouse 3个月前 (04-19) 79次浏览 已收录 0个评论 扫描二维码
文章目录
[隐藏]
好看的CSS立体式代码,来源懒人之家,效果展示

使用方法:

1、将CSS样式拷贝到你的网页中或者加入到主题style.css里面。

body{border:none;margin:0;background-color:#0D3462;}
li{list-style:none;}
ul{margin:0;padding:0;}
.contentbox{width:1000px;margin:auto;margin-top:2em;clear:left;}
.qcontainer{-webkit-perspective:400;-moz-perspective:400;float:left;width:220px;margin-right:20px;}
.film{width:100%;height:300px;-webkit-transform-style:preserve-3d;-webkit-transition:1.5s;-moz-transform-style:preserve-3d;-moz-transition:1.5s;}
.qcontainer:hover .film{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);}
.face{position:absolute;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;}
.face h3{color:white;text-align:center;}
.back{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);background:-webkit-gradient(linear,left top,left bottom,from(#fdbb5a),to(#db5726));background:-moz-linear-gradient(top,#fdbb5a,#db5726);width:220px;height:300px;}
.foot{text-align:center;color:#fff;position:fixed;bottom:20px;left:50%;margin-left:-126px;font-size:12px;font-family:"微软雅黑";}

2、将下面代码部分拷贝到你需要的地方即可

<!-- 代码部分begin -->
<div class="contentbox">
	<div class="qcontainer">
		<div class="film">
			<div class="face front"><img src="所需调用图片地址"></div>
			<div class="face back"><h3>鼠标悬停翻转后的文字</h3></div>
		</div>
	</div>
	<div class="qcontainer">
		<div class="film">
			<div class="face front"><img src="所需调用图片地址"></div>
			<div class="face back"><h3>鼠标悬停翻转后的文字</h3></div>
		</div>
	</div>
	<div class="qcontainer">
		<div class="film">
			<div class="face front"><img src="所需调用图片地址"></div>
			<div class="face back"><h3>鼠标悬停翻转后的文字</h3></div>
		</div>
	</div>
	<div class="qcontainer">
		<div class="film">
			<div class="face front"><img src="所需调用图片地址"></div>
			<div class="face back"><h3>鼠标悬停翻转后的文字</h3></div>
		</div>
	</div>
</div>
<!-- 代码部分end -->

转载请注明:来源于【夜影小窝】。文章标题:一款纯CSS3立体式3D鼠标悬停效果,文章链接:https://www.yeyhome.com/335.html
喜欢 (5)
[327982852@qq.com]
分享 (0)
yyhouse
关于作者:
90后,从事弱电安防智能化工程,包含监控系统,楼宇对讲系统,LED系统,广播音箱系统,停车场系统,楼宇对讲系统喜欢分享捣鼓有趣的代码。。。
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
×
订阅图标按钮