原创 CSS3圖解伸縮性佈局

CSS3伸縮性佈局 flex 父盒子 section 需添加 伸縮佈局模式 display: flex; <section> <div>1</div> <div>2</div> <div>3</div>

原创 淺談CSS繼承及優先級

繼承是很有用的機制,有了它就可以避免給一個元素的所有後代重複應用相同的樣式。如果你要設置的屬性是一個繼承屬性,那麼應該考慮是否直接設置到父元素上。合理的使用繼承,有助於減少選擇符的數量,降低複雜性。 不過,如果有大量的元素繼承了各

原创 純CSS製作rate評分

前段時間在掘金看到一個標題是用純CSS製作rate評分,然後自己就去想了一下,試了一下做了一個效果是做出來了,但代碼好像有點…有待優化哈哈哈。後來回頭點進去那位大哥是用SASS寫的,發現確實秀。 那麼先說一下我的代碼的 實現思路

原创 我是怎樣走上前端這條路的

今天,我講一下我是怎樣走上前端這條路吧,順便也分享一下我的學習路線 首先本人是個渣渣二本,機械電子工程專業,報這個專業是因爲之前我被一些機器人這種東西入腦,當時覺得這個很酷,也以爲這是人工智能(請原諒我的無知),覺得未來有的發展,

原创 CSS3改變圖片的顏色(附gif圖及源碼)

此項目主要是運用混合模式中的色相來完成圖片的變色效果的 首先簡單講一下色相:色彩的相貌,如下圖的顏色 通過在顏色板添加混合模式爲色相樣式,然後通過改變顏色板的顏色使車身部分的顏色改變,因爲除了車身,其他部分的顏色爲黑白,所以沒

原创 CSS實現水波浪效果(附gif圖及源碼)

不多說先上圖,如下圖 其實上圖實現的水波浪的效果並不是讓藍色部分的水動,而是使白色區域變化(讓兩個橢圓繞Z軸旋轉) 那麼我們先在html用一個div做一個杯子,下面是div的樣式代碼 div { margin: 300p

原创 圖片的局部放大算法

如下圖所示: 下面是完整代碼,算法的每一步已加註釋 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>局部放大</titl

原创 原生js實現貪食蛇小遊戲

先不多說先上圖 下面是代碼部分(這裏你可以根據需要改變蛇頭和身體還有食物的圖片,然後默認的樣式是使用純顏色的如果沒有更改我的背景圖片的話------改這些圖開始是想搞笑一下朋友哈哈哈,請不要在意哈),還有操作鍵是使用 ↑ ↓

原创 CSS3圖解顏色漸變

漸變產生的是圖像,所以需要使用 background 線性漸變 linear-gradient(方向,開始顏色,位置,顏色2,位置,顏色3,位置…) 方向: to top:0deg to right:90deg to bottom

原创 CSS時鐘案例

效果如下圖 下面是html代碼 <div class="box"> <div class="line line1"></div> <div class="line line2"></div> <div c

原创 淺談web性能

度量 Web性能的一個重要指標就是頁面內容實際顯示在屏幕上需要多久。這個指標有時候也叫 “渲染時間” 或者 “上屏時間”。現代瀏覽器在屏幕上渲染之前,至少需要兩樣東西:HTML和CSS。這意味着讓瀏覽器儘快下載HTML和全部CSS

原创 圖解CSS形狀Shapes

CSS的高級特效----形狀(Shapes) CSS Shapes包含兩組屬性,shape-outside 和 shape-inside。 (但本文不涉及講shape-inside) shape-outside 有四個形狀函數(

原创 CSS3伸縮性佈局總結

CSS3伸縮性佈局 flex 父盒子 section 需添加 伸縮佈局模式 display: flex; <section> <div>1</div> <div>2</div> <div>3</div>

原创 兩面翻轉----背面隱藏(backface-visibility:hidden)

實現圖片的兩面翻轉,效果如下圖 主要是使用背面隱藏(backface-visibility: hidden;) 實現圖片的兩面翻轉 首先在body中一個 div 中放置兩個圖片 img <div> <img src="imag

原创 微信導航欄的實現

微信導航欄的實現 以下是使用到的背景圖片,原理是使用內邊距撐開圖片 放在images文件夾中的ao.png 放在images文件夾中的tu.png 下面是html標籤 <ul> <li> <a hre