How to use CSS3 instead of JS to implement interactive tutorials

This article mainly introduces the use of CSS3 to replace the JS implementation of the interaction, from the CSS3 animation and JS Animation comparison between the two, will be clearer, and with the use of the front-end framework, page animation will be more and more applications CSS3. For the specific sample code, refer to this article

"CSS3 and JS"

For the CSS to understand the students know that the implementation of CSS is the lowest, in the implementation and performance is not, JS this provides interface of the script can be compared, from the CSS3 animation and JS Animation comparison between the two, will be clearer, and with the use of the front-end framework, page animation will be more and more applications CSS3

"Other uses of CSS3"

In addition to the animation, there is the realization of a variety of interactions, but also embodies the strong CSS, more is the use of CSS3 to provide a selector;

Let's take a look at an example: I can better reflect the deep understanding of CSS

<style>body{background: #f4f4f4; margin:0;} /*list*/.list__con{}.list__con. Box{background: #fff;p osition: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: "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: ";p osition: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: ";p osition: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> <in Put class= "input" type= "checkbox"/> <label> What's the local waste charge </label> </p></p>

Description

The above includes a lot of interaction, hover interaction, checked interaction;

For the above implementation method is believed, has already had many people to realize, here mainly said I to this sentiment and to the technology vision, to now the work also has nearly four years, in these years, the growth speed knows, but the same point is, a lot of knowledge will use, also know how to use; What is called only know the meaning, do not know its true intention, why!

The above interactive effect, in the previous I have used CSS and JS combination of the way to achieve, also tried to use CSS to achieve interactive effect, but in the exploration of the time complacent led to the present only really realized the original idea;

The benefits of full implementation of CSS improve reusability and maintainability, provide a better way to implement the corresponding components, but also improve performance;

. List__con. Input:checked+label

As with the above usage, we can use the various powerful selectors added by CSS3 to achieve more and better interactive effect; From now on the tragedy of using JS to change DOM, more inclined to CSS