##.markdown-body{顏色：#383838；字體大小：15px；行高：30px；字母間距：2px；word-break：break-word；字體系列：-蘋果系統，BlinkMacSystemFont， Segoe UI，Roboto，Oxygen，Ubuntu，Cantarell，Open Sans，Helvetica Neue，sans-serif；滾動行為：平滑；背景圖像：線性漸變（0deg，透明24％，rgba（201,195,195） ,.329) 25%,hsla (0,8%,80.4%,.05) 26%,透明27%,透明74%,hsla(0,5.2%,81%,.185) 75%,rgba(180,176,176 ,.05) 76%,透明77%,透明),線性漸變(90deg,透明24%,rgba(204,196,196,.226) 25%,hsla(0,4%,66.1%,.05) 26%,透明27%,透明74%,hsla (0,5.2%,81%,.185) 75%,rgba(180,176,176,.05) 76%,透明77%,透明);背景顏色:#fff;背景-尺寸：50px 50px；padding-bottom：60px }.markdown-body ::selection{顏色：#fff；背景顏色：#a862ea}.markdown-body h1，.markdown-body h2，.markdown-body h3，。markdown-body h4,.markdown-body h5, .markdown-body h6{margin:24px 0 12px;color:#a862ea}.markdown-body h1{line-height:2;font-size:1.4em}.markdown- body h1~p:first-of-type: first-letter{color:#a862ea;float:left;font-size:2em;margin-right:.4em;font-weight:bolder}.markdown-body h2{font -size:1.2em}.markdown-body h3 {font-size:1.1em}.markdown-body ol,.markdown-body ul{padding-left:2em}.markdown-body ol li,.markdown-body ul li {margin-bottom:0;padding-left: .2em}.markdown-body ol li::marker,.markdown-body ul li::marker{color:#a862ea}.markdown-body ol li.task-list- item,.markdown-body ul li.task- list-item{list-style:none}.markdown-body ol li.task-list-item ol,.markdown-body ol li.task-list-item ul,. markdown-body ul li.task-list-item ol,.markdown-body ul li.task-list-item ul{margin-top:0}.markdown-body ol ol,.markdown-body ol ul,.markdown- body ul ol,.markdown-body ul ul{ margin-top:10px}.markdown-body a,.markdown-body 程式碼,.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown- body h4,.markdown-body h5,.markdown -body h6,.markdown-body li,.markdown-body p{opacity:.85;vertical-align:baseline;transition:all .1s escape}.markdown-body a :hover,.markdown-body 程式碼:hover, .markdown-body h1:hover,.markdown-body h2:hover,.markdown-body h3:hover,.markdown-body h4:hover,.markdown-body h5:hover ,.markdown-body h6:hover,.markdown -body li:hover,.markdown-body p:hover{opacity:1}.markdown-body a{display:inline-block;color:#a862ea;cursor:pointer; text-decoration:none;position:relative}. markdown-body a:after{content:"";position:absolute;width:98%;height:1px;bottom:0;left:0;transform:scaleX(0) ;background-color:#a862ea;transform-origin :右下角;transition:transform .3s escape-in-out}.markdown-body a:hover:after{transform:scaleX(1);transform-origin:左下角} .markdown-body a:active,. markdown-body a:link{color:#a862ea}.markdown-body img{max-width:100%;user-select:none;margin:1em 0;transition:transform .2s緩和0s;背景顏色：#f8f5ff; box-shadow:0 0 10px #e7daff}.markdown-body img:hover{opacity:1;box-shadow:0 0 20px #e7daff;transform:translateY(-1px)} .markdown-body blockquote{padding:.5em 1em;margin:12px 0;border-top-left-radius:2px;border-bottom-left-radius:2px;border-left:3pxsolid #a862ea;背景顏色: #f8f5ff}.markdown-body blockquote>p{margin :0}.markdown-body .math{font-style:italic;margin:12px 0;padding:.5em 1em;background-color:#f8f5ff}.markdown-body .math>p{margin:0}.markdown- body程式碼{padding:2px .4em;overflow-x:auto;color:#a862ea;font-weight:700;word-break:break-word;font-family:運算子Mono,Consolas,Monaco,Menlo,monospace; background-color:#f8f5ff}.markdown-body pre{margin:2em 0}.markdown-body pre>code{display:block;padding:1.5em;word-break:正常;字型大小:.9em;字型樣式:正常;字體粗細:400;字體系列:Operator Mono,Consolas,Monaco,Menlo,monospace;行高:18px;顏色:#383838;邊框半徑:2px;滾動行為:平滑;box-shadow:0 0 10px #e7daff }.markdown-body pre>code:hover{box-shadow:0 0 20px #e7daff}.markdown-body pre>code::-webkit -scrollbar{高度：6px;背景顏色：#f8f5ff}.markdown-body pre >code::-webkit-scrollbar-thumb{背景顏色：#e7daff;border-bottom-left-radius:3px;border-bottom -right-radius:3px}.markdown-body hr{margin:2em 0;border- top:1pxsolid #a862ea}.markdown-body table{寬度:100%;字體大小:12px;最大寬度:100% ;overflow:auto;border-collapse:collapse}.markdown-body thead{color:#a862ea;background :#f8f5ff}.markdown-body td,.markdown-body th{padding:.5em;border:1pxsolid #e7daff }.markdown-body tr{background-color:#f8f5ff}@media (max-width:720px){ .markdown-body{font-size:12px}}一個商務簡約的登陸
#前幾天在逛codepen的時候，發現了一個很靜音的登陸界面，於是就想著自己實現一下，於是就得到了這個demo。
順便將接下來網站的登陸介面也改成這個樣式了。
先上一個效果圖：
在效果圖裡面我們看到有兩個輸入框，一個為文字輸入框，一個為密碼輸入框。
由於兩個輸入框的樣式大致差不多，所以我們只講述第一個輸入框的實作。
1.輸入框結構
實際上，這個輸入框有兩個部分組成：
分別是輸入框的提示內容和輸輸入框本體。
我們將輸入框的提示內容放進label標籤中，並且給label標籤新增一個for屬性，值為輸入框的id屬性值。
這樣使用者在點擊提示語句時，遊標會自動聚焦到輸入框中。
<div class="user_name">
<label for="userName" class="userNameTip">请输入您的用户名</label>
<input type="text" id="userName">
</div>到此為止，我們輸入框的結構就建置好了。
2.輸入框樣式
我們先為整個大盒子增加一個相對定位，方便後續我們對裡面元素的位置調整。順便設定一個整個盒子的大小。
.user_name {
position: relative;
width: 400px;
height: 200px;
}接下來我們就為輸入框改變一個樣式，畢竟這樣一個預設的框框實在太難看了。
.user_name{
width: 200px;
height: 50px;
position: absolute;
top: 50px;
left: 30px;
font-size: 20px;
}
這裡我們先給整個輸入框的整體調整一個位置，然後設定一個字體大小，這樣我們的輸入框就有了一個基本的樣式。
下面就開始設定輸入框的樣式：
#userName{
display: inline-block;
width: 300px;
height: 30px;
color: #0FF;
font-size: 20px;
border: 0px transparent;
border-bottom: 2px solid #fff;
background-color: rgb(54, 54, 54);
}
在這裡我們設定了輸入框的寬度，高度，字體顏色，字體大小，邊框，背景顏色。
因為我此時整個大背景顏色為rgb(54, 54, 54),為了不讓這個輸入框這麼突出沒所以我設定了輸入框的背景顏色與大背景顏色為一樣的顏色。
但是這樣還不夠，因為在輸入框獲得焦點的時候，輸入框外邊還有一個邊框，這樣會使得輸入框很醜。
透過outline屬性我們可以設定輸入框來獲得焦點時的邊框樣式。
在效果圖中，我們可以看見輸入框獲得焦點時，輸入框下邊有一個藍色的邊框，這個邊框的寬度為2px，顏色為#0FF。
我們我們這樣給輸入框來一個樣式：
#userName:focus{
outline: none;
border-bottom: 2px solid #0FF;
}
這樣輸入框的樣式就出來了：
3.輸入框提示語
在效果圖裡面輸入框還未獲得焦點的時候，提示語句在輸入框裡面的，這個就是我們使用絕對定位來實現的，調整到合適的位置，將提示語句放在輸入框裡面。
且此時文字的顏色為白色。
.userNameTip{
position: absolute;
top: 0px;
left: 0px;
font-size: 20px;
color: #fff;
}
最後這整個輸入框的樣式就是這樣：
#當然現在這是一個靜態的輸入框，沒有任何的交互，我們接下來就來實現這個輸入框的交互作用。
4.輸入框互動
互動肯定需要一個動畫來實現，這裡我們發現在輸入框獲得焦點之後，提示文字會變小，顏色也會隨之改變，然後移動到輸入框的上方，這個就是我們需要實現的效果。
失去焦點之後,我們就會判斷，這個輸入框裡面是否有內容：
如果有內容的話，動畫就不移除，一直保持動畫的結束狀態；如果沒有內容，就移除動畫回到初識狀態。
那麼我們定義一個動畫：
@keyframes user {
from{
top: 0px;
font-size: 20px;
}
to{
top: -20px;
font-size: 12px;
color: #0FF;
}
}
現在有一個問題，我們點擊輸入框，最後將這個動畫加入輸入框的提示語句上，那麼我們如何將動畫加上去呢？
我這裡使用的jquery中對class的操作來實現，也就是利用jQuery中的addClass()和 removeClass()方法來實作。
那麼在此之前，我們就需要先將動畫寫進一個類別裡面，然後透過jQuery來操作這個類別。
我這裡簡單的寫了一個class，然後將動畫寫進去：
.userNameTipA{
animation: user 0.3s linear normal forwards;
animation-iteration-count: 1;
}
然後我們就可以透過jQuery來操作這個類了：
$('#userName').focus(function () {
$('.userNameTip').addClass('userNameTipA');
console.log("点击了");
})
$('#userName').blur(function () {
let val = $('#userName').val();
if (val) {
return;
} else {
$('.userNameTip').removeClass('userNameTipA');
}
});
最後點選儲存，運行，就可以看到效果了。
總結
其實這個demo還是很簡單的，就是利用一些定位來調整輸入框的位置，然後針對輸入框的聚焦樣式和失焦樣式來實現動畫，最後透過jQuery來操作這個動畫。
推薦學習：《css影片教學》
