电子商务网站开发与实现,莱西做网站公司,2016优秀网站设计,自己如何创立网站css3的新属性非常不错#xff0c;目前IE除外其他浏览器都已支持
实现原理:比如元素a在hover时候可以改变元素b的状态。
效果如本农导航#xff0c;欢迎采用和建议~
a:hover b{ 执行简单动画效果
}
HTML !DOCTYPE htmlhtml langenhead目前IE除外其他浏览器都已支持
实现原理:比如元素a在hover时候可以改变元素b的状态。
效果如本农导航欢迎采用和建议~
a:hover b{ 执行简单动画效果
}
HTML !DOCTYPE html
html langen
head
meta charsetUTF-8
title3D-navBar/title
link relstylesheet hrefcss/3dnavBar.css
/head
body
header
ul classblock-menu idF1
li
a hrefjavascript:; classthree-dHome
span classthree-d-box
span classfrontHome/span
span classbackHome/span
/span
/a
/li
li
a hrefjavascript:; classthree-dHtml
span classthree-d-box
span classfrontHtml/span
span classbackHtml/span
/span
/a
/li
li
a hrefjavascript:; classthree-dCSS
span classthree-d-box
span classfrontCSS/span
span classbackCSS/span
/span
/a
/li
li
a hrefjavascript:; classthree-dJavascript
span classthree-d-box
span classfrontJavascript/span
span classbackJavascript/span
/span
/a
/li
li
a hrefjavascript:; classthree-djQuery
span classthree-d-box
span classfrontjQuery/span
span classbackjQuery/span
/span
/a
/li
li
a hrefjavascript:; classthree-dajax
span classthree-d-box
span classfrontajax/span
span classbackajax/span
/span
/a
/li
li
a hrefjavascript:; classthree-dphp
span classthree-d-box
span classfrontphp/span
span classbackphp/span
/span
/a
/li
li
a hrefjavascript:; classthree-dbootstrap
span classthree-d-box
span classfrontbootstrap/span
span classbackbootstrap/span
/span
/a
/li
li
a hrefjavascript:; classthree-dangular
span classthree-d-box
span classfrontangular/span
span classbackangular/span
/span
/a
/li
/ul
/header
/body
/html CSS *{
list-style: none;
margin: 0;
padding: 0;
}
.block-menu{
background:#AA7A53;
height:50px;
overflow:hidden;
padding-left:40px;
}
.block-menu li{
float: left;
margin-left: 15px;
}
.block-menu li a{
color:#fff;
text-decoration:none;
text-transform:uppercase;
font-size:16px;
line-height:20px;
font-weight:bold;
font-family: Arial, sans-serif;
display:block;
padding:15px 10px;
}
.three-d-box,.front,.back{
width: 100%;
display: block;
height:50px;
position:absolute;
top:0;
left:0;
text-align: center;
line-height: 50px;
background:#AA7A53;
}
.three-d{
perspective:200px;
position:relative;
}
.three-d-box{
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transform:translateZ(-25px);
-moz-transform:translateZ(-25px);
-o-transform:translateZ(-25px);
-ms-transform:translateZ(-25px);
transform:translateZ(-25px);
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.front{
-webkit-transform:rotateX(0deg) translateZ(25px);
-moz-transform:rotateX(0deg) translateZ(25px);
-o-transform:rotateX(0deg) translateZ(25px);
-ms-transform:rotateX(0deg) translateZ(25px);
transform:rotateX(0deg) translateZ(25px);
}
.back{
-webkit-transform:rotateX(-90deg) translateZ(25px);
-moz-transform:rotateX(-90deg) translateZ(25px);
-o-transform:rotateX(-90deg) translateZ(25px);
-ms-transform:rotateX(-90deg) translateZ(25px);
transform:rotateX(-90deg) translateZ(25px);
}
.three-d:hover .three-d-box{
-webkit-transform: translateZ(-25px) rotateX(90deg);
-moz-transform: translateZ(-25px) rotateX(90deg);
-o-transform: translateZ(-25px) rotateX(90deg);
-ms-transform: translateZ(-25px) rotateX(90deg);
transform: translateZ(-25px) rotateX(90deg);
} 更多专业前端知识请上
【猿2048】www.mk2048.com
