一、前言
百度的前端技术学院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样式不能改变,所以<input type="checkbox" id="checkBox">
不再适用。这里要用到HTML5的label标签
HTML5中的label标签为 input 元素定义标签(label),<label> 标签的 for 属性应该等于相关元素的 id 元素,以便将它们捆绑起来。
如:
<input type="checkbox" id="checkBox">
<label for="checkBox"></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 动态数据绑定
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 正则表达式入门
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/...
所以选了这个任务,说实话,又“水分”了(捂脸哭)
2.6 position:sticky 实现粘性布局
额外技能点总结,缘起别人的提问 https://segmentfault.com/q/10...
想到之前看过的一篇文章 http://www.cnblogs.com/coco1s... (平时看些技术文章还是有用的,虽然当时可能没起什么作用,不过有个知识点印象。)
<div style="position: fixed;background:red;height:500px;width:500px;overflow:auto;top: 50%;
transform: translateX(-50%) translateY(-50%);
left: 50%;">
<div style="position: absolute;background:black;height:10px;width:10px;top:0;right:0"></div>
<div style="height:5000px">
213123123213123123213123123213123123213123123
</div>
</div>
将黑色的div框样式改为粘性布局
<div style="position: sticky;background:black;height:10px;width:10px;top:0;left:100%"></div>
效果:
三、总结
收获:
①、巩固基础知识
②、css属性应用更加熟练,说实话,之前after和before伪元素自己用得不多,一般都会重新加标签来设置样式,不过这里用过之后,自己简直喜欢上了这两个东西,感觉方便好多。
③、对Vue的动态绑定数据原理理解加深。
④、正则表达式,说实话,自己之前写过那篇文章大多是理论,当真正遇到正则表达式实践时,有点傻了,需多练习。
⑤、安定了下自己哪颗躁动的心,如果工作上没有什么事做,没什么期盼,又正值金三银四跳槽季,我就在想跳槽了,可是没学到什么东西怎么走?茫然,焦虑,但是这些负情绪没用,只会让自己的状态恶性循环,不如做点实事,哪怕是比较简单的任务。还好自己坚持了下,还好这段时间工作上有几个任务,得到了些许锻炼。
不足及改进:
总结来看,自己做得不够,虽然也花了时间,不过能看出有敷衍的成分在。也好久没产出,虽然写得并不怎么样,不过还是想督促自己多总结,这对自己一定是有利的:)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。