I. Introduction
Baidu's front-end technology institute IFE, 2016 years to hear, and then apply themselves, but also the composition of the team, but did not complete a task himself over, sorry ... Watch the IFE, know that in February 2017 there is a new a training, so have been waiting for entry, and then began to do the task (o (╯ □ ╰) o inside release, this time can be so positive is because of his busy work which period, in order to restrain their own restless heart, telling myself seize the opportunity to complete the task which issued, down a little bit.)
Now this period to April 24 to the end, although not that much to complete the task, but in the process learned a thing, because almost halfway lazy, did not stick with it, I think the next time their own set of requirements, think it should start to finish, triumphed over a bit 'lazy', the final score is 74 points, barely into the school to share the list under the hegemony (although there is nothing with eggs, but also to meet under their own vanity ┑ (¯Д ¯) ┍)), so much nonsense, summarize what they have learned it.
Second, to complete the task summary
2.1 with a background image and a pseudo-manner elements custom checkbox, radio style
2.1.1 Task Description: HTTP: //ife.baidu.com/course/d ...
2.1.2 process:
Native checkbox, radio style can not be changed, it <input type="checkbox" id="checkBox">is no longer applicable. Here's label to use HTML5 tags
HTML5 tag label is in the label input element definition (label), <label> tag for attribute related elements should be equal to the id element in order to bundle them together.
Such as:
<input type="checkbox" id="checkBox">
<label for="checkBox"></label>Note:
"for" property of the label can be bound to another element. Please put the value of the id attribute of the related elements of value "for" property to.
Then take input element to display: none; css then the label is set to Custom style
label {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #d9d9d9;
border-radius: 50%;
position: relative;
}This is set outside a circle, which circle is provided by :: after pseudo-class
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: '';
}If CheckBox, outside the square, which is the corresponding hooks
label {
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #d9d9d9;
position: relative;
}"√" on the hook production:
label::after {
border: 2px solid #d73d32;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}Mention here to distinguish between pseudo-classes and pseudo elements:
1) pseudo-class: the meaning of existence is to find information that does not exist in the DOM tree information and can not be conventional CSS selectors to get through the selector. A class of pseudo-colon: at the beginning, after the colon is the name of the class and the pseudo-optional parameters contained in the parentheses.
Common pseudo-classes:
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:checked 向选中的控件元素添加样式2) pseudo-elements: pseudo-element to create some abstract elements in the DOM tree, these elements do not exist in the abstract language of the document (can be understood as html source code);
Note: css3 order to distinguish between pseudo-classes and pseudo-elements, a predetermined pseudo-class preceded by a colon, in front of the dummy element has two colons
Common pseudo-elements:
::before 为作用元素的第一个子节点插入dom中
::after 为作用元素的最后一个子节点插入dom中With: all add style to the elements through the selector
Different: pseudo-element creates an element, but not the real Html elements, pseudo-class equivalent to creating a style for a class element
2.2 funny mouse suspended blur
2.2.1 Task Description: HTTP: //ife.baidu.com/course/d ...
2.2.2 The implementation process:
Look under the effect made: point me see
1) on a blurry picture (Reference: Source )
The main use CSS3 filter (filter) properties
grammar:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();blur (px) is provided to the image Gaussian blur. "Radius" value is set to a standard differential Gaussian function, or number of pixels on the screen to melt together, the greater the value of the fuzzy; if the value is not set, the default is 0; this parameter can be set css length value, but do not accept a percentage value.
So you can add a picture such effect on 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) on the border extension (Reference: Source )
/*形状扩展*/
.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;
}Mainly through border: 000 This property 6px solid #, when the width and height are set to 100%, or up and down the right and left border is transparent and can be achieved :: after :: before assembled into a rectangle, on both sides from the middle expansion, so the initial left and top to 50%; final note transition-property: height, width, left, top; settings.
3) text flow gradient light animation (Reference: Source )
.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;}
}It is noted that:
①, -webkit-background-Clip: text;
background-Clip attribute predetermined drawing area background.
grammar:
background-clip: border-box|padding-box|content-box;
Value corresponding to: the background is clipped to the cassette frame, padding block, content block.
The text used here applies only to the chrome browser.
②, background-size: 200% 100%;
to match the background image size to double the horizontal direction, so background-position have to move with the changes in space.
2.3 Dynamic Data Binding
2.3.1 Task Description: HTTP: //ife.baidu.com/course/d ... (corresponding to the back there are two, three, four, five)
2.3.2 implementation process:
How Vue dynamic data binding, in this before there wrote this article: HTTP: //www.cnblogs.com/wj204 / ...
Although previous studies have had, but this time along with the task to do when you can see that he is still a thorough understanding Debu, here no detailed breakdown, and it also made the point on the task notes: HTTP: //ife.baidu.com/note/det ...
2.4 Regular Expressions Getting Started
2.4.1 Task Description: HTTP: //ife.baidu.com/course/d ...
2.4.2 implementation process:
feel a little pick their familiar task, because there wrote an article before the regular expression : HTTPS: //segmentfault.com/a/11 ... (/ □) as to review, because these are not firmly grasp the basics.
2.4.2.1 phone number match
/*
电话号码前三位规则:
联通: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
*/Therefore, regular expressions can be written as:(/^1[34578][0-9]{9}$/g)
2.4.2.2 determines whether the string has an adjacent duplicate words entered regular expression can be written as: / (b [a-zA -Z] + b) s + 1b / g
explain the regular expression:
①, (B [a-zA-Z] + b) is a capture packet, it captures all of the words:
" asd sf hello hello asd".match(/(b[a-zA-Z]+b)/g) // ["asd", "sf", "hello", "hello", "asd"]②, s plus a space constraints, so the last word to be excluded:
" asd sf hello hello asd".match(/(b[a-zA-Z]+b)s/g) ["asd ", "sf ", "hello ", "hello "]③, "1" after the reference:
" asd sf hello hello asd".match(/(b[a-zA-Z]+b)s+1b/g) ["hello hello"]2.5 CSS3 FIG achieve 3D rotation
2.5.1 Task Description: HTTP: //ife.baidu.com/course/d ...
2.5.2 implementation process: Because there are pure css3 wrote some animation to achieve their own before http://www.cnblogs.com/ wj204 / ...
so I chose this task, to be honest, and "water" of the (Behind his cry)
2.6 position: sticky viscous layout implemented
Additional skill points summarize, the origin of other people's questions https: //segmentfault.com/q/10 ...
think before read an article HTTP: //www.cnblogs.com/coco1s ... (usually see these technologies the article is useful, though it was probably not play any role, but there is a knowledge impressions.)
<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>The black box style changed tack div layout
<div style="position: sticky;background:black;height:10px;width:10px;top:0;left:100%"></div>effect:
Third, the summary
reward:
①, reinforce the basics
②, css property applied more skilled, honest, before and after pseudo-elements before they used not by much, usually re-label to style, but after using it here, just like on their own two something, I feel a lot of convenience.
③, dynamic data binding principle Vue understanding deepened.
④, regular expressions, to be honest he wrote the article before mostly theory, when actually encountered the practice of regular expressions, a little silly, need more practice.
⑤, which settled under their own pieces of restless heart, if there is no work to do, nothing to look forward to, but also a time when gold and three silver four seasons quit, I just want a new job, but did not learn anything how to go? Loss, anxiety, negative emotions useless but these will only make the state a vicious cycle, as really do something, even if it is a relatively simple task. Fortunately, we stick to the next, but fortunately this time there are several tasks at work, get a little exercise.
Inadequate and improvements:
Overall, I own doing enough, although it took time, but can see there are perfunctory ingredients. Also for a long time did not output, although written is not how, but still want to push myself more sum, which he must be beneficial :)