Example analysis of how to use CSS3 instead of JS to achieve interaction

[CSS3 and JS]

Students who know CSS all know that the implementation of CSS is the lowest level, and it is not comparable in terms of implementation method and performance. JS scripts that provide interfaces are comparable; from The comparison between CSS3 animation and JS animation will make it 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, the implementation of various interactions also reflects the power of CSS, and more of the selectors provided by CSS3 are used;

Let’s look at an example first: Yes It better reflects my deep understanding of CSS this time

<style>
body{background:#f4f4f4;margin:0;}
/*list*/
.list__con{}
.list__con .box{background:#fff;position:relative;border-bottom:solid 1px #858585;overflow:hidden;}
.list__con .box:hover{background:#f4f4f4;-webkit-transition:all .6s;transition:all .6s;}
.list__con .box:hover .delete{-webkit-transition:all .6s;transition:all .6s;opacity:1;}
.list__con .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;}
.list__con .input:checked::after{content:&#39;&#39;;width:14px;height:14px;background:red;position:absolute;top:3px;left:3px;border-radius:50%;}
.list__con label{line-height:24px;padding:10px 0 10px 48px;display:block;-webkit-transition:all .4s;transition:all .4s;}
.list__con .input:checked+label{color:#d9d9d9;text-decoration:line-through;}
.list__con .delete{width:44px;height:44px;float:right;position:relative;cursor:pointer;opacity:0;}
.list__con .delete:hover::after{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.list__con .delete:hover::before{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.list__con .delete::after{content:&#39;&#39;;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;}
.list__con .delete::before{content:&#39;&#39;;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>
<div class="list__con">
    <div class="box">
        <div class="delete"></div>
        <input class="input" type="checkbox" />
        <label>啥地方垃圾费</label>
    </div>
</div>

[Explanation]

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

I believe that many people have already implemented the above implementation method; here I mainly talk about my understanding of this time and my vision for technology. I have been working for nearly four years now. In these In the middle of the year, I know how fast I am growing up, but the same thing is that I know how to use a lot of knowledge and know how to use it; but this time I really understand what it means to only know its meaning but not know its true meaning, and 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;

.list__con .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 become more More inclined to CSS

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