“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

preface

The second section is reissued here

With the experience of the first section, we can make some upgrades to the direct animation effects. If you combine :before, :after, the effects will be much cooler.

Please take a look at the sample effect:

The following are examples

The sample a

<button class="btn-1">Button a</button>

<style>
button{
  position: relative;
  width: 100px;
  height: 40px;
  border: 1px solid #46b0ff;
  background: none;
  cursor: pointer;
  overflow: hidden;
}
button:before, 
button:after{
  position: absolute;
  content: ' ';
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: all .5s;
}
/* Button one */
.btn-1:before{
  top: 0;
  height: 0;
  left: 0;
}
.btn-1:after{
  bottom: 0;
  height: 0;
  left: 0;
  background: rgba(70.176.255.1);
}
.btn-1:hover:before, .btn-1:hover:after{
  height: 50%;
  background: rgba(70.176.255.1);
}
</style>
Copy the code

Resolution:

1, before top = 0, after bottom = 0

2, under the action of absolute positioning, :hover changes :before, :after height, :before will extend down, and :after will extend up.

3. At the same time, we only give :before and :after background color when :hover, so there is a background color transition effect.

Here we can also change to the left and right merge style, and you can do your own research.

Example 2

<button class="btn-2">Button 2</button>

<style>./* omit the top public style */
.btn-2:before, .btn-2:after{
  width: 0;
  height: 0;
  border-width: 0 0 0 0;
  border-style: solid;
  bottom: 0;
}
.btn-2:before{
  border-color: transparent transparent transparent #f13f84;
  left: 0;
}
.btn-2:after{
  border-color: transparent transparent #f13f84 transparent;
  right: 0;
}
.btn-2:hover:before {
  border-width: 100px 0 0 100px;
}
.btn-2:hover:after {
  border-width: 0 0 100px 100px;
}
</style>
Copy the code

Resolution:

1, :before, :after border draw two triangles and their bottom is 0, while :before left=0, :after right=0

Take a look at the example below:

.triangle{
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent transparent #f13f84;
  border-width: 100px 0 0 100px;
}
Copy the code

2, then change the border-width to create an upward merge effect

Example 3

<button class="btn-3">Button three</button>

<style>./* omit the top public style */
.btn-3:before, .btn-3:after{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 0 0;
}
.btn-3:before{
  border-color: transparent transparent transparent #00b7a3;
  bottom: 0;
  left: 0;
}
.btn-3:after{
  border-color: transparent #00b7a3 transparent transparent;
  top: 0;
  right: 0;
}
.btn-3:hover:before, .btn-3:hover:after {
  border-width: 80px 210px;
}
Copy the code

Resolution:

1. With our experience in Example 2, we can work around this a little by changing top, bottom, left, and right

Example 4

<button class="btn-4">Button four</button>

<style>./* omit the top public style */
.btn-4:before, .btn-4:after{
  top: 50%;
  width: 20px;
  height: 20px;
  background: #8865ae;
  border-radius: 50%;
}
.btn-4:before{
  left: -20px;
  transform: translate(-50%, -50%);
}
.btn-4:after{
  right: -20px;
  transform: translate(50%, -50%);
}
.btn-4:hover:before{
  animation: criss-cross-left 0.8 s both;
}
.btn-4:hover:after{
  animation: criss-cross-right 0.8 s both;
}
@keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 150px;
    height: 150px; }}@keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 150px;
    height: 150px; }}Copy the code

Resolution:

Draw two circles that are vertically centered and not visible at the beginning :before to the left and :after to the right

top: 50%;
transform: translateY(-50%);
Copy the code

2, :hover, before 50% of the first half of the animation, change the size of :before, :after left and right, so that it moves to the middle

3. After 50% of the second half of the animation, keep the left and right, and change the size of the circle at the same time, you will see the effect of expansion after the collision of the two balls

The sample of five

<button class="btn-5">
  <span>Button five</span>
</button>

<style>./* omit the top public style */
button span:before, 
button span:after{
  position: absolute;
  content: ' ';
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: all .5s;
}
.btn-5:before, .btn-5:after, .btn-5 span:before, .btn-5 span:after{
  top: 0;
  width: 25px;
  height: 0;
  background: #1199ff;
}
.btn-5:before {
  left: 0;
}
.btn-5:after {
  right: 0;
  bottom: 0;
  top: initial;
}

.btn-5 span:before {
  left: 25px;
  bottom: 0;
  top: initial;
}
.btn-5 span:after {
  left: 50px;
  top: 0;
  bottom: initial;
}
.btn-5:hover:before, 
.btn-5:hover:after,
.btn-5:hover span:before,
.btn-5:hover span:after {
  height: 100%;
}
Copy the code

Resolution:

1. According to example 1, we extend it by adding span element and 2 more pseudo-classes, horizontal layout

2, staggered up and down position, :hover, change the height can form animation effect

The sample of 6

<button class="btn-6">
  <span>Button six</span>
</button>

<style>./* omit the top public style */
.btn-6:before, 
.btn-6:after, 
.btn-6 span:before, 
.btn-6 span:after{
  width: 0;
  height: 0;
  background: #f13f84;
}
.btn-6:before {
  left: 0;
  top: 0;
}
.btn-6:after {
  right: 0;
  top: 0;
}

.btn-6 span:before {
  left: 0;
  bottom: 0;
}
.btn-6 span:after {
  right: 0;
  bottom: 0;
}
.btn-6:hover:before, 
.btn-6:hover:after,
.btn-6:hover span:before,
.btn-6:hover span:after {
  height: 50%;
  width: 50%;
}
Copy the code

Resolution:

1. According to example 5, we rearranged the four pseudo-classes, and their starting positions were located at the four corners of button

2, : Hover, change the width and height, are 50%, can form animation

Example 7

<button class="btn-7">
  <span>Button seven</span>
</button>

<style>./* omit the top public style */
.btn-7:before, 
.btn-7:after{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 0 0;
}

.btn-7:before{
  border-color: transparent transparent transparent #3da83d;
  bottom: 0;
  left: 0;
}
.btn-7:after{
  border-color: transparent #3da83d transparent transparent;
  top: 0;
  right: 0;
}

.btn-7 span:before, .btn-7 span:after {
  content: ' ';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 0 0;
}

.btn-7 span:before {
  border-color: transparent transparent #3da83d transparent;
  right: 0;
  bottom: 0;
}

.btn-7 span:after {
  border-color: #3da83d transparent transparent transparent;
  top: 0;
  left: 0;
}

.btn-7:hover:before {
  border-width: 100px 0 0 100px;
}
.btn-7:hover:after {
  border-width: 0 100px 100px 0;
}
.btn-7:hover span:before {
  border-width: 0 0 100px 100px;
}
.btn-7:hover span:after {
  border-width: 100px 100px 0 0;
}
Copy the code

Resolution:

1. According to examples 2 and 5, the four pseudo-classes are all triangles and are located at button four corners

2, :hover, change the border-width can form animation effect

conclusion

What have you learned from this section?

1, pseudo-class elements are used to deepen rolling solid

2. Element triangle drawing

3, : Hover mouse into animation rolling solid

If you have any questions, please leave them in the comments section.