纯CSS完成菜单、导航栏栏的三d旋转动漫实际效果

日期:2020-10-21 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

我以前向大伙儿展现过闪亮的logo,点燃的火狐狸,多种嵌套循环动漫等事例,今日,大家即将制做1个简易但十分酷的三d旋转菜单。大伙儿能够先看看具体实际效果,下面合理果截图。

实际效果图:


HTML编码

HTML內容是1些用作菜单的连接,大家在里边加上了1些附加的SPAN标识来协助完成三d实际效果:

拷贝编码
编码以下:

<ul class="block-menu lazy ">
<li><a href="/" class="three-d lazy ">
Home
<span aria-hidden="true" class="three-d-box lazy ">
<span class="front lazy ">Home</span>
<span class="back lazy ">Home</span>
</span>
</a></li>
<li><a href="/demos" class="three-d lazy ">
Demos
<span aria-hidden="true" class="three-d-box lazy ">
<span class="front lazy ">Demos</span>
<span class="back lazy ">Demos</span>
</span>
</a></li>
<!-- more items here -->
</ul>

在A连接标识周围是1系列的SPAN元素,动漫演试全过程中,它将用来主要表现三d立方体的“正面”和“反面”。这些SPAN里的文本和A连接里的文本是1致的。

CSS编码

这个动漫的全过程便是完成三d转换和元素部位转变。但具体上A连接是沒有挪动的,动的是SPAN标识,并且是最外层的SPAN标识,內部的SPAN标识被原始化在它的部位上,之后就不做任何变化。每一个元素都可以以向上翻,并要翻回家,大家应用的是CSS transforms。

拷贝编码
编码以下:

/* basic menu styles */
.block-menu {
display: block;
background: #000;
}</p> <p>.block-menu li {
display: inline-block;
}
.block-menu li a {
color: #fff;
display: block;
text-decoration: none;
font-family: 'Passion One', Arial, sans-serif;
font-smoothing: antialiased;
text-transform: uppercase;
overflow: visible;
line-height: 20px;
font-size: 24px;
padding: 15px 10px;
}
/* animation domination */
.three-d {
perspective: 200px;
transition: all .07s linear;
position: relative;
cursor: pointer;
}
/* complete the animation! */
.three-d:hover .three-d-box,
.three-d:focus .three-d-box {
transform: translateZ(⑵5px) rotateX(90deg);
}
.three-d-box {
transition: all .3s ease-out;
transform: translatez(⑵5px);
transform-style: preserve⑶d;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
/*
put the "front" and "back" elements into place with CSS transforms,
specifically translation and translatez
*/
.front {
transform: rotatex(0deg) translatez(25px);
}
.back {
transform: rotatex(⑼0deg) translatez(25px);
color: #ffe7c4;
}
.front, .back {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: black;
padding: 15px 10px;
color: white;
pointer-events: none;
box-sizing: border-box;
}

假如你想看看正面和背面各有是怎样转动挪动的,我明显强烈推荐你们试1下,将在其中的1个设定为display: none,让电脑鼠标悬停在它们上面,你可能看到它们各有将进行全部动漫的哪1一部分姿势。

这类完成方法的唯1的缺陷是有反复的菜单名字,尽管技术性上是掩藏看不出来的,但从编码品质上说存在编码反复难题。但是,从视觉效果实际效果上看,它的动漫十分丝滑,没什么缺陷。沒有JavaScript,Flash或canvas技术性,只是1些简易的CSS标识,这技术性CSS动漫….1种大家web程序流程员都应当谢谢的技术性。