mysql could not be resolved: Name or service not known。本站提示廣大學習愛好者：（mysql could not be resolved: Name or service not known）文章只能為提供參考，不一定能成為您想要的結果。以下是mysql could not be resolved: Name or service not known正文
我已經向年夜家展現過閃光的logo，熄滅的火狐狸，多重嵌套動畫等例子，明天，我們將要制造一個簡略但異常酷的3D翻轉菜單。年夜家可以先看看現實後果，上面有用果截圖。
後果圖：
HTML代碼
HTML內容是一些用作菜單的鏈接，我們在外面添加了一些額定的SPAN標志來贊助完成3D後果：
<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鏈接標志旁邊是一系列的SPAN元素，動畫演示進程中，它將用來表示3D立方體的“正面”和“後頭”。這些SPAN裡的文字和A鏈接裡的文字是分歧的。
CSS代碼
這個動畫的進程就是完成3D變換和元素地位變更。但現實上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(-25px) rotateX(90deg);
}
.three-d-box {
transition: all .3s ease-out;
transform: translatez(-25px);
transform-style: preserve-3d;
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(-90deg) 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;
}
假如你想看看正面和不和各自是若何扭轉挪動的，我激烈推舉你們試一下，將個中的一個設置為display: none，讓鼠標懸停在它們下面，你將會看到它們各自將完成全部動畫的哪一部門舉措。
這類完成方法的獨一的缺陷是有反復的菜單稱號，固然技巧上是隱蔽看不出來的，但從代碼質量上說存在代碼反復成績。但是，從視覺後果上看，它的動畫異常順滑，毫無瑕疵。沒有JavaScript，Flash或canvas技巧，只是一些簡略的CSS標志，這技巧CSS動畫….一種我們web法式員都應當感激的技巧。
