How to use CSS3 instead of JS to achieve interactive tutorial

This article mainly introduces the use of CSS3 instead of JS to achieve interaction. From the perspective of comparing CSS3 animation and JS animation, it will be clearer; and with the use of front-end frameworks, there will be more and more page animations Application CSS3. Please refer to this article for specific sample codes

[CSS3 and JS]

Students who know CSS know that the implementation of CSS is the lowest level. Neither in terms of performance nor in terms of performance, scripts such as JS 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, there will be more and more page animations Applying 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 Most of them use the selector provided by CSS3;

Let’s look at an example first: it can better reflect 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>
<p class="list__con">
    <p class="box">
        <p class="delete"></p>
        <input class="input" type="checkbox" />
        <label>啥地方垃圾费</label>
    </p>
</p>

[Explanation]

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

For the above implementation I believe that many people have already achieved this method; here I will mainly talk about my understanding of this time and my vision for technology. I have been working for nearly four years now. During these years, I know how fast I have grown, but the same point is That is, I can 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 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 use of JS to change the DOM. Tragedy, more inclined to CSS

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