經常使用的css技巧使用

在平常開發中，若是css運用得當，咱們能夠減小使用js，提升開發效率。下面介紹一些css開發中經常使用技巧

• animation 能夠讓咱們完成一些常見的動畫，好比等待loading，還有一些彈窗過渡動畫等等，好比下面實現的輪播圖

//pug語法
div.content
  div.boxcontent
    div
    div
    div
複製代碼

//stylus語法
.content
  position:relative;
  width:200px;
  height:200px;
  overflow:hidden;
.boxcontent
   position:absolute;
   width:600px;
   height:200px;
   overflow:hidden;
   animation: move 5s infinite;
   colors=red blue #ffe100
   for col , j in colors
    div:nth-child({j+1})
      width:200px;
      height:200px;
      background:col;
      float:left
 @keyframes move
   0%
     left:0
   50%
     left:-200px;
   100%
     left:-400px;
複製代碼

效果：

這個庫animate.css運用的大量animation動畫效果

• 在平常開發中咱們能夠使用input類選擇器改變默認的選中框。

<label>
  <input type="checkbox">
  <span>開心</span>
</label>
<label>
  <input type="checkbox">
  <span>愉快</span>
</label>
<label>
  <input type="checkbox" disabled>
  <span>不開心</span>
</label>
複製代碼

input{
  opacity:0
}
span{
  position:relative;
}
span:before{
  position:absolute;
  width:15px;
  height:15px;
  border:1px solid #ddd;
  content:'';
  left:-20px;
  top:3px;
  line-height:15px;
  text-align:center;
  color:green;
}
input:checked+span:before{
  content:'√';
}
input:disabled+span{
  text-decoration:line-through;
}
input:disabled+span:before{
  content:"×"
}
複製代碼

效果：

• 僞元素before,after在平常開發中使用的也比較多；

好比畫步驟條：

<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
複製代碼

li{
  position:relative;
  list-style:none;
  float:left;
  margin-left:30px;
  border:1px solid #d500ff;
  padding:5px;
  text-align:center;
  border-radius:50%;
  width:30px;
  height:30px;
  line-height:30px;
}
li:after{
  position:absolute;
  top:19px;
  left:40px;
  width:30px;
  height:2px;
  content:'';
  background:#d500ff;
}
li:before{
  position: absolute;
  width: 10px;
  height: 10px;
  content: '>';
  top: 3px;
  left: 61px;
  font-size:18px;
  color: #d500ff;
}
li:last-child:before,li:last-child:after{
    display:none;
}
複製代碼

效果：

• 在開發中咱們常常要使用別的插件或者其餘的樣式，這時候咱們能夠運用css權重來改變原有的樣式。

參考css的優先級和權重

• 還有 :hover，:active在按鈕上或者跳轉連接上也使用比較的頻繁，hover經常使用於鼠標移上按鈕時按鈕背景顏色發生改變，active經常使用於點擊按鈕效果。