Simple HelloWorld color change

The basic function of this web effect is that clicking the button on the left will change color , Click the button on the right to restore the color

Add some special effects on the basis of this simple function , For practice CSS. The special effects added are ：

• When the mouse hovers over the button, the button border will move
  The realization of button effect needs the help of button Two pseudo elements ::before and ::after, as well as pseudo-classes :hover There are also transition styles transition;
  When the mouse hovers over the button , Two above and below the border “ Gap ” Will move in opposite directions , It's actually two with the same color as the background Pseudo element oblique square （transform: skew(-50deg)） It's moving , This has the effect of changing the border

• When the color changes from the original color to the target color , The circle mask expands from the middle to both sides ; When the color changes back to the original color , The circle mask retracts from both sides to the middle
  The implementation here requires With the help of clip-path and transition;
  In fact, the black font shown in the figure below “Hello World!” There is an absolutely positioned red on the upper layer of “Hello World!”, Just at the beginning clip-path: circle(0px) Generate a display part as radius 0px The circular mask space is hidden . When you click “ Turn red ” After button , This circular mask shows that the space changes to a radius 200px, The display space is large enough , Red “Hello World! It will be completely displayed ”. In transition properties transition The red font will slowly display under the action of

  [ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-YO9K3qzU-1644677773265)(img/circleClipPath.png “ Schematic diagram of circular mask ”)]

effect

[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-DRaqYgCK-1644677773266)(img/finalEffect.gif “ Final effect ”)]

Demo link

Code CodePen Demo link

Article source ：https://gitee.com/thisismyaddress/bocheng-blogs/tree/master/ Web page effects / ordinary HelloWorld Color change