摘要:向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍,這樣才有移動與變化的空間。不足及改進總結來看,自己做得不夠,雖然也花了時間,不過能看出有敷衍的成分在。
一、前言
百度的前端技術學院IFE,2016年就聽說了,當時自己也報名,還組成隊伍了,不過自己一個任務也沒完成就結束了,遺憾... 關注了IFE,知道2017年2月有新的一期培訓,于是一直在等著報名,然后開始做里面發布的任務(o(╯□╰)o,這次能這么積極是因為自己哪段時間工作閑,為了按捺自己躁動的心,告訴自己抓住這次機會,去完成里面發布的任務,沉淀一下。)
現在這一期到4月24號就結束了,雖然完成的任務不算多,但是在這過程中還是學到了東西,中途差點因為懶,沒有堅持下來,想了下自己當時定的要求,想到應該善始善終,就戰勝了一下‘懶’,最后成績是積分74,勉強入了下學霸的分享榜單(雖然并沒有什么卵用,不過還滿足了下自己的虛榮心┑( ̄Д  ̄)┍)),廢話了這么多,總結下自己學到的東西吧。
二、完成任務總結 2.1 用背景圖和偽元素方式實現自定義checkbox,radio樣式2.1.1 任務描述:http://ife.baidu.com/course/d...
2.1.2 實現過程:
原生的checkbox,radio樣式不能改變,所以 不再適用。這里要用到HTML5的label標簽
HTML5中的label標簽為 input 元素定義標簽(label),
如:
注意:
"for" 屬性可把 label 綁定到另外一個元素。請把 "for" 屬性的值設置為相關元素的 id 屬性的值。
接著要把input元素設置為display:none;然后通過css將label設置為自定義的樣式
label { display: inline-block; width: 16px; height: 16px; border: 1px solid #d9d9d9; border-radius: 50%; position: relative; }
這是設置為外面的圓圈,里面的圓通過::after偽類設置
label::after { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; cursor: pointer; position: absolute; width: 8px; height: 8px; border-radius: 50%; top: 4px; left: 4px; z-index: 1; content: ""; }
如果是checkbox,外面是正方形,對應里面是對鉤
label { display: inline-block; width: 16px; height: 16px; border: 1px solid #d9d9d9; position: relative; }
"√"對鉤制作:
label::after { border: 2px solid #d73d32; border-top: none; border-right: none; transform: rotate(-45deg); }
這里提一下偽類和偽元素的區分:
1)偽類:存在的意義是為了通過選擇器找到那些不存在于DOM樹中的信息以及不能被常規CSS選擇器獲取到的信息。 偽類由一個冒號:開頭,冒號后面是偽類的名稱和包含在圓括號中的可選參數。
常用的偽類:
:active 向被激活的元素添加樣式。 :focus 向擁有鍵盤輸入焦點的元素添加樣式。 :hover 當鼠標懸浮在元素上方時,向元素添加樣式。 :link 向未被訪問的鏈接添加樣式。 :visited 向已被訪問的鏈接添加樣式。 :first-child 向元素的第一個子元素添加樣式。 :checked 向選中的控件元素添加樣式
2)偽元素:偽元素在DOM樹中創建了一些抽象元素,這些抽象元素是不存在于文檔語言里的(可以理解為html源碼);
注意: css3為了區分偽類和偽元素,規定偽類前面有一個冒號,偽元素前面有兩個冒號
常用偽元素:
::before 為作用元素的第一個子節點插入dom中 ::after 為作用元素的最后一個子節點插入dom中
同:都是通過選擇器為元素添加樣式
異:偽元素會創建一個元素,但不是真正的Html元素,偽類相當于為一個元素創建一個class樣式
2.2 有趣的鼠標懸浮模糊效果2.2.1 任務描述:http://ife.baidu.com/course/d...
2.2.2 實現過程:
先看下做出的效果:點我看看
1)關于圖片模糊(參考資料:來源)
主要用到CSS3 filter(濾鏡)屬性
語法:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
blur(px) 給圖像設置高斯模糊。"radius"一值設定高斯函數的標準差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;如果沒有設定值,則默認是0;這個參數可設置css長度值,但不接受百分比值。
所以圖片上hover時可以加一個這樣的效果:
.wrap:hover .blur { transition: all .5s ease; filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); /*filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); IE6~IE9 */ }
2) 關于邊框擴展(參考資料:來源)
/*形狀擴展*/ .border::before, .border::after { content:" "; display: block; position: absolute; width: 0; height: 0; box-sizing: border-box; transition-property: height,width,left,top; transition-duration: 0.5s; transition-timing-function: ease-in; } .border::before { height: 100%; left: 50%; } .wrap:hover > .border::before { left: 0; width: 100%; border: 6px solid #000; border-left-color: transparent; border-right-color: transparent; } .border::after { width: 100%; top: 50%; } .wrap:hover > .border::after { height: 100%; top: 0; border: 4px solid #000; border-top-color: transparent; border-bottom-color: transparent; }
主要通過border:6px solid #000這個屬性,當width和height都設置為100%時,把左右或上下的border設置為transparent就可以實現::after和::before拼裝成長方形,兩邊都是從中間擴展,所以最初left和top設置為50%;最后需要注意 transition-property: height,width,left,top;的設置。
3)文字漸變光影流動動畫(參考資料:來源)
.text-gradient { display: inline-block; color: black; font-size: 10em; background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96); -webkit-text-fill-color: transparent; -webkit-background-clip: text; -webkit-background-size: 200% 100%; -webkit-animation: masked-animation 4s infinite linear; } @-webkit-keyframes masked-animation { 0% { background-position: 0 0;} 100% { background-position: -100% 0;} }
要注意的是:
①、-webkit-background-clip: text;
background-clip 屬性規定背景的繪制區域。
語法:
background-clip: border-box|padding-box|content-box;
值對應于:背景被裁剪到邊框盒,內邊距框,內容框。
這里用到的text只適用于chrome瀏覽器。
②、background-size: 200% 100%;
讓背景圖片大小水平方向擴大一倍,這樣background-position才有移動與變化的空間。
2.3.1 任務描述:http://ife.baidu.com/course/d... (對應后面有二、三、四、五)
2.3.2 實現過程:
Vue如何實現動態數據綁定,這個在之前有寫過一篇這樣的文章:http://www.cnblogs.com/wj204/...
雖然以前有研究過,不過這次跟著任務做的時候可以看出自己還是理解得不透徹,這里不再詳細分解了,自己在任務上也做了點筆記:http://ife.baidu.com/note/det...
2.4.1 任務描述:http://ife.baidu.com/course/d...
2.4.2 實現過程:
感覺自己挑了自己有點熟悉的任務,因為之前有寫過一篇正則表達式的文章:https://segmentfault.com/a/11... (/ □ ) 當作復習把,因為這些基礎知識掌握得并不牢固。
2.4.2.1 手機號碼匹配
/* 電話號碼前三位規則: 聯通:186 185 170 156 155 130 131 132 移動:139 138 137 136 135 134 178 188 187 183 182 159 158 157 152 150 147 電信:189 180 170 153 133 第一位全是1 第二位:3 4 5 7 8 第三位:0 1 2 3 4 5 6 7 8 9 */
所以正則表達式可以寫為:(/^1[34578][0-9]{9}$/g)
2.4.2.2 判斷輸入的字符串是否有相鄰重復單詞的正則表達式可寫為:/(b[a-zA-Z]+b)s+1b/g
解釋這個正則表達式:
①、 (b[a-zA-Z]+b) 是一個捕獲分組,它捕獲所有的單詞:
" asd sf hello hello asd".match(/(b[a-zA-Z]+b)/g) // ["asd", "sf", "hello", "hello", "asd"]
②、s加了一個空格限制條件,所以最后一個單詞被排除:
" asd sf hello hello asd".match(/(b[a-zA-Z]+b)s/g) ["asd ", "sf ", "hello ", "hello "]
③、"1"后向引用:
" asd sf hello hello asd".match(/(b[a-zA-Z]+b)s+1b/g) ["hello hello"]2.5 CSS3實現3D 輪播圖
2.5.1 任務描述:http://ife.baidu.com/course/d...
2.5.2 實現過程:因為自己之前有寫過一些純css3實現的動畫 http://www.cnblogs.com/wj204/...
所以選了這個任務,說實話,又“水分”了(捂臉哭)
額外技能點總結,緣起別人的提問 https://segmentfault.com/q/10...
想到之前看過的一篇文章 http://www.cnblogs.com/coco1s... (平時看些技術文章還是有用的,雖然當時可能沒起什么作用,不過有個知識點印象。)
213123123213123123213123123213123123213123123
將黑色的div框樣式改為粘性布局
效果:
三、總結收獲:
①、鞏固基礎知識
②、css屬性應用更加熟練,說實話,之前after和before偽元素自己用得不多,一般都會重新加標簽來設置樣式,不過這里用過之后,自己簡直喜歡上了這兩個東西,感覺方便好多。
③、對Vue的動態綁定數據原理理解加深。
④、正則表達式,說實話,自己之前寫過那篇文章大多是理論,當真正遇到正則表達式實踐時,有點傻了,需多練習。
⑤、安定了下自己哪顆躁動的心,如果工作上沒有什么事做,沒什么期盼,又正值金三銀四跳槽季,我就在想跳槽了,可是沒學到什么東西怎么走?茫然,焦慮,但是這些負情緒沒用,只會讓自己的狀態惡性循環,不如做點實事,哪怕是比較簡單的任務。還好自己堅持了下,還好這段時間工作上有幾個任務,得到了些許鍛煉。
不足及改進:
總結來看,自己做得不夠,雖然也花了時間,不過能看出有敷衍的成分在。也好久沒產出,雖然寫得并不怎么樣,不過還是想督促自己多總結,這對自己一定是有利的:)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112002.html
摘要:向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍,這樣才有移動與變化的空間。不足及改進總結來看,自己做得不夠,雖然也花了時間,不過能看出有敷衍的成分在。 一、前言 百度的前端技術學院IFE,2016年就聽說了,當時自己也報名,還組成隊伍了,不過自己一個任務也沒完成就結束了,遺憾... 關注了IFE,知道2017年2月有新的一期培訓,于是一直在等著報名,然后開始做里面發布的任務(...
摘要:向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍,這樣才有移動與變化的空間。不足及改進總結來看,自己做得不夠,雖然也花了時間,不過能看出有敷衍的成分在。 一、前言 百度的前端技術學院IFE,2016年就聽說了,當時自己也報名,還組成隊伍了,不過自己一個任務也沒完成就結束了,遺憾... 關注了IFE,知道2017年2月有新的一期培訓,于是一直在等著報名,然后開始做里面發布的任務(...
摘要:同行這么做使用實現圓形進度條前端掘金在開發微信小程序的時候,遇到圓形進度條的需求。實現也談數組去重前端掘金的數組去重是一個老生常談的話題了。百度前端技術學院自定義前端掘金一標簽概念元素表示用戶界面中項目的標題。 閑話圖片上傳 - 掘金作者:孫輝,美團金融前端團隊成員。15年畢業加入美團,相信技術,更相信技術只是大千世界里知識的一種,個人博客: https://sunyuhui.com ...
摘要:同行這么做使用實現圓形進度條前端掘金在開發微信小程序的時候,遇到圓形進度條的需求。實現也談數組去重前端掘金的數組去重是一個老生常談的話題了。百度前端技術學院自定義前端掘金一標簽概念元素表示用戶界面中項目的標題。 閑話圖片上傳 - 掘金作者:孫輝,美團金融前端團隊成員。15年畢業加入美團,相信技術,更相信技術只是大千世界里知識的一種,個人博客: https://sunyuhui.com ...
摘要:大潮來襲前端開發能做些什么去年谷歌和火狐針對提出了的標準,顧名思義,即的體驗方式,我們可以戴著頭顯享受沉浸式的網頁,新的標準讓我們可以使用語言來開發。 VR 大潮來襲 --- 前端開發能做些什么 去年谷歌和火狐針對 WebVR 提出了 WebVR API 的標準,顧名思義,WebVR 即 web + VR 的體驗方式,我們可以戴著頭顯享受沉浸式的網頁,新的 API 標準讓我們可以使用 ...
閱讀 1756·2021-11-24 09:39
閱讀 1686·2021-11-22 15:22
閱讀 1002·2021-09-27 13:36
閱讀 3230·2021-09-24 10:34
閱讀 3329·2021-07-26 23:38
閱讀 2633·2019-08-29 16:44
閱讀 974·2019-08-29 16:39
閱讀 1104·2019-08-29 16:20