How to use CSS3 instead of JS to achieve interactive effects

This time I will show you how to use CSS3 instead of JS to achieve interactive effects. What are the precautions for using CSS3 to replace JS to achieve interactive effects? The following is a practical case, let's take a look.

[CSS3 and JS]

Students who know CSS all know that the implementation of CSS is the lowest level, neither in terms of implementation nor performance. JS The scripts that provide interfaces are comparable; from the perspective of comparing CSS3 animation and JS animation, it will be clearer; and with the use of front-end frameworks, page animations will increasingly use CSS3

[Other uses of CSS3]

In addition to the replacement of animations, there is also the implementation of various interactions, which also reflects the power of CSS, and more options are provided by using CSS3 Tool;

Let’s take a look at an example first: it can better reflect my deep understanding of CSS this time

c9ccee2e6ea535a969eb3f532ad9fe89
body{background:#f4f4f4;margin:0;}
/*list*/
.listcon{}
.listcon .box{background:#fff;position:relative;border-bottom:solid 1px #858585;overflow:hidden;}
.listcon .box:hover{background:#f4f4f4;-webkit-transition:all .6s;transition:all .6s;}
.listcon .box:hover .delete{-webkit-transition:all .6s;transition:all .6s;opacity:1;}
.listcon .input{-webkit-appearance:none;appearance:none;position:absolute;top:10px;left:12px;padding:0;border:none;margin:0;width:24px;height:24px;border:solid 2px red;border-radius:50%;box-sizing:border-box;outline:none;cursor:pointer;}
.listcon .input:checked::after{content:'';width:14px;height:14px;background:red;position:absolute;top:3px;left:3px;border-radius:50%;}
.listcon label{line-height:24px;padding:10px 0 10px 48px;display:block;-webkit-transition:all .4s;transition:all .4s;}
.listcon .input:checked+label{color:#d9d9d9;text-decoration:line-through;}
.listcon .delete{width:44px;height:44px;float:right;position:relative;cursor:pointer;opacity:0;}
.listcon .delete:hover::after{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.listcon .delete:hover::before{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.listcon .delete::after{content:'';position:absolute;width:2px;height:20px;background:red;top:12px;left:50%;margin-left:-1px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:4px;-webkit-transition:all .6s;transition:all .6s;}
.listcon .delete::before{content:'';position:absolute;width:20px;height:2px;background:red;top:50%;left:12px;margin-top:-1px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:4px;-webkit-transition:all .6s;transition:all .6s;}
531ac245ce3e4fe3d50054a55f265927
28859b2ba70e98e5703d7b62483afef7
    9890cd3db8af2c13be66110fccb4c149
        efa64630fb67b2f5e868af04ec249fd694b3e26ee717c64999d7867364b1b4a3
        4cd7a1c97800370822b14b86c8fd82a0
        2e1cf0710519d5598b1f0f14c36ba674啥地方垃圾费8c1ecd4bb896b2264e0711597d40766c
    94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

[Description]

The above includes many interactions, hover interaction, checked interaction;

I believe that many people have already implemented the above implementation method; here I mainly talk about my I have been working for nearly four years now for my insights and vision of technology. During these years, I know how fast I have grown, but the same thing is that I can use a lot of knowledge and know how to use it; but this time I really know how to use it. Understand, what does it mean to only know the meaning but not know the true meaning? Why!

I have previously implemented the above interactive effects using a combination of css and js. During this period, I also tried to use all css to achieve interactive effects. However, I was stuck in my ways when exploring, and it has not been truly realized until now. Original idea;

The benefits of using CSS to fully realize it improve the reusability and maintainability, provide a better way to implement the corresponding components, and also improve the performance;

.listcon .input:checked+label

Like the above usage, we can use various powerful selectors added by CSS3 to achieve more and better interactive effects; from now on, we will leave the tragedy of using JS to change the DOM and lean more towards CSS

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to customize text omission in CSS

How to make absolute positioning of css compatible with all resolutions

The above is the detailed content of How to use CSS3 instead of JS to achieve interactive effects. For more information, please follow other related articles on the PHP Chinese website!