首页>案例集

仿腾讯专题页,实现3D旋转效果

这个专题页我挺喜欢的,就在上课的时候简单的仿制了一下,不过没有设置video和图片的切换,直接用了图片,算是阉割版了。下面的3D旋转使用了不同的方式,把图片也包括进去了,原始版本是只有边框旋转,图片不动。

其实这种3D没有添加景深,都算是伪3D吧,不过比起普通的旋转来说看起来效果可能更酷炫一些,不过网页上用多了也有点喧宾夺主,还是要适可而止。

具体效果如下:

3D旋转.jpg

效果展示

案例下载:

链接:https://pan.baidu.com/s/1kW9H0Q7 密码:21sc

案例知识点:

1、这里的布局使用了一种百分比的布局方式

2、animation的各种属性,比如延迟。

3、rotateY,沿着Y轴的3D旋转。

部分代码如下:

.nav{
	position:relative;
	width:900px;
	margin:0 auto;
	top:70%;}
.box{
	width:25%;
	float:left;
	animation:moveUp 0.8s ease-out forwards;
	transform:translateY(300px);
	}
.box a{
	display:block;}
.border{
	width:60%;
	margin:0 auto;
	text-align:center;
	border:3px solid #c32a52;
	border-top:none;
	padding-bottom:10%;
	position:relative;
	}
.border img{
	width:45%;}
.border::before,.border::after{
	content:"";
	position:absolute;
	width:20.43%;
	height:3px;
	left:0;
	top:0;
	background:#c32a52;
	}
.border:after{
	right:0;
	left:auto;}
.box2 .border::after,.box2 .border::before{
	background:#f7eb4e;}
.box3 .border::after,.box3 .border::before{
	background:#3d8acc;}
.box4 .border::after,.box4 .border::before{
	background:#d75e2d;}
.b2{
	border-color:#f7eb4e}
.b3{
	border-color:#3d8acc}
.b4{
	border-color:#d75e2d}
.box2{
	animation-delay:0.2s;}	
.box3{
	animation-delay:0.4s;}
.box4{
	animation-delay:0.6s;}
.rotateY{
	transition:all 1s ease-out;
	transform:rotateY(360deg);}
@keyframes moveUp{
	0%{
		transform:translateY(300px);}
	100%{
		transform:translateY(0);}
	}

JavaScript代码如下:

<script>
$(function(){
	$(".box").mouseenter(function(){//鼠标移入
		$(this).find(".border").addClass("rotateY");
		})
	$(".box").mouseleave(function(){/*鼠标移出*/
		$(this).find(".border").removeClass("rotateY");
		})
	})
</script>

声明:坚持了三年的原创web前端教程网站,以为可以一直随心所欲的写下去。网站的虚拟主机和域名钱,一年大概二三百,我负担得起。可惜随着用户访问量的不断增加,阿里云每个月提供的免费流量已经不够了(用户访问网站,需要从阿里云服务器下载网页,要耗费阿里云主机的流量),需要我花钱从阿里云买流量,网站才能继续访问,这个钱一年至少一千多,我不想接广告,只能靠添加打赏插件和下载一些案例需要付费的方式补贴一点流量的钱。特此声明!

原创比抄袭难多了,请多多支持!
打赏

点赞


13
保存到:

相关文章

Top