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

<style>
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;}
</style>
<p class="listcon">
    <p class="box">
        <p class="delete"></p>
        <input class="input" type="checkbox" />
        <label>啥地方垃圾费</label>
    </p>
</p>

[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!