之前自己寫過rate評分的效果，都是ui給的雪碧圖，然後自己拼湊，所以這次我研究了一下用純css來實現評分效果。
引入阿里圖表庫
"stylesheet" href="">class
="rate-content"
>
type
="radio"
name
="rate"
value
="1"
>
type
="radio"
name
="rate"
value
="2"
>
type
="radio"
name
="rate"
value
="3"
>
type
="radio"
name
="rate"
value
="4"
>
type
="radio"
name
="rate"
value
="5"
>
div>
畫預設的星星
/* 去掉預設樣式 */
input
.rate-content
/* 單個星星 */
.rate-content input[name="rate"]
/* 預設顯示的星星 */
.rate-content input::after
.rate-content input[name="rate"]:checked::after
/*單個的選中效果*/
.rate-content input[name="rate"]:
checked
::after,
/*連同剩下的兄弟一起選中*/
.rate-content input[name="rate"]:checked~input[name="rate"]::after
滑鼠移入預覽效果
.rate-content input[name="rate"]:
checked
::after,
.rate-content input[name="rate"]:checked~input[name="rate"]:
:after,
/*單個的滑鼠移入效果*/
.rate-content input[name="rate"]:
hover
::after,
/*連同剩下的兄弟一起*/
.rate-content input[name="rate"]:hover~input[name="rate"]::after
星星的放大效果
/*移入放大*/
.rate-content input[name="rate"]:hover
仿抖音點贊效果
玩過抖音的人應該都知道抖音的點讚效果挺酷炫的，而作為碼農我們一定想知道它是怎麼實現的。先上效果圖 實現原理非常的簡單，直接上 created by csc on 2018 6 11.information 仿抖音點贊功能 class love context context relativelayo...
常用CSS效果
div水平居中margin 0px auto 在ie下可能不能正常顯示，原因dtd說明未正確使用 圍繞div內文字居中 lineheight的高度和div的高度相同 注意，文字不能換行 ie6 div內文字居中 多行文字居中顯示，使用display table cell vertical align...
CSS 中使用動畫效果實現點讚特效
效果圖 當沒有點讚的時候,頁面上只有的圖示是黑色的 點讚之後,出現乙個緩緩上公升的紅心贊,之後頁面上的贊變為取消,圖示變為紅色 緩緩上公升的紅心讚會左右搖擺 頁面的邏輯處理使用 vue 完成 html class clicklike box click clicklike src src alt c...