This article illustrates the effect of menu navigation based on CSS3 attribute transition. Share to everyone for your reference. Specifically as follows:
CSS3 navigation menu, when you move the layer below the display layer, transition will cause the page to flicker, because the chrome in the initial rendering of CSS animation of the bug, although temporarily unable to verify the root cause of the problem, but currently known solution has two:
-webkit-backface-visibility:hidden (whether the back of the element to be converted is visible when facing the user: hidden)
-webkit-transform-style:preserve-3d; (Sets how embedded elements are rendered in 3D space: Reserved 3D).
The screenshot of the running effect is as follows:
The specific code is as follows:
The
code is as follows: <! DOCTYPE html>
<html lang=zh-cn>
<head>
<TITLE>CSS3 Properties Transition make menu navigation </title>
<style>
*{margin:0px;padding:0px;}
body{background: #45B5DA; margin:0px;padding:0px;}
. tips{width:370px;margin:0 auto;line-height:24px;padding-top:10px;}
. Bredcolor{color: #fff;}
#nav {position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-185px}
li{
width:74px;height:40px;text-align:center;float:left;line-height:40px;color: #fff; text-decoration:none; List-style:none;cursor:pointer;
}
li#chage{
width:70px;height:38px;display:block;position:absolute;left:0px;z-index:-1;border:2px solid #191919;
border-radius:10px;
background:-webkit-gradient (linear, 0 100%, 0 0, from (Black), color-stop (0.5, black), Color-stop (0.52, #313131), to ( #6A6A6A));
box-shadow:0px 2px 0px rgba (255, 255, 255,. 3);
-webkit-transform:translate (0px,0px);
-webkit-transition:-webkit-transform 2s ease-out;
}
</style>
</head>
<body>
<section class= "Tips" >
When you move the layer below the display layer, transition will cause the page to flicker, because of the chrome in the initial rendering of CSS animation bug, although temporarily unable to verify the root cause of the problem, but currently known solution has two:
-webkit-backface-visibility:hidden (whether the back of the element to which you are converting is visible when facing the user: hidden)
-webkit-transform-style:preserve-3d; (Sets how embedded elements are rendered in 3D space: Reserved 3D)
QQ Group: 197326136
</section>
<section id= "NAV" >
<li href= "#" title= "CSS3 menu, CSS3 menu navigation" > Home </li>
<li href= "#" class= "nav_2" onmouseover = "zhj.slide (1);" onmouseout = "zhj.slide (0);" > Scripts </li>
<li href= "#" onmouseover = "zhj.slide (2);" onmouseout = "zhj.slide (0);" > Special Effects </li>
<li href= "#" onmouseover = "zhj.slide (3);" onmouseout = "zhj.slide (0);" > Source </li>
<li href= "#" onmouseover = "zhj.slide (4);" onmouseout = "zhj.slide (0);" > Downloads </li>
<li href= "javascript:void (0);" id= "Chage" ></li>
</section>
</body>
<script type= "Text/javascript" >
function $ (ID) {
return typeof id = = "string"? document.getElementById (ID): ID;
}
var zhj = {};
zhj.slide = function (index) {
var transx = 74*index;
$ (' chage '). style['-webkit-transform '] = ' translate ' (' +transx+ ' px,0px) ';
}
</script>
</html>
I hope this article will help you with the CSS3 Web design.
