--- Onehack.us e-Learning Platform --- 1
Hello everybody in this lesson we will create two more effects 2
top and bottom left and right effect there will be two lines bottom line and top line and these lines 3
will go from left to right at the same time and there will be top and bottom right to left effect 4
the lines will move from right to left together let's start by creating our first 5
effect we will use two pseudo elements before pseudo element for the upper line 6
after pseudo element for the bottom line let's start by creating our upper line 7
first link before content position absolute 8
width height 9
background color border radius let's position it to top top left 10
right and that's enough let's check okay our top line is ready let's add the bottom line copy this 11
let's make this after let's make this bottom I think that's enough let's check 12
okay our lines are visible first we need to hide them 13
and then we can define our hover states 14
first link hover before 15
width 100 percent and in that time I will use group selector 16
let's make this after because both of the declarations will be the 17
same therefore we can easily group them like this I think that's enough refresh 18
okay they are visible let's add our transitions transition width 0.5 second ease copy this 19
okay we defined everything and we can check our animation now refresh and our top and bottom line 20
effect is ready from left to right you can see I think it's very nice we can increase the time 21
and now it's better yes let's continue to the second element second link 22
this will be from right to left we can reuse we can refactor the styles of the first effect 23
let's come here close this close this close this and copy paste let's make this second 24
second second second this is second refresh and our first effect is applied to second element 25
let's change this we want to move our lines from right to left therefore we need to remove this 26
and this yes we need to align the line to the right 27
refresh and you can see our lines are coming from right to the left 28
yes these are our effects that's it see you on next lesson