1. Introduction
I have written more than a dozen articles in my column, all related to JS. I haven’t written about CSS3 yet. Css3, in my opinion, is not difficult, but hard to play with. Today, with CSS3 to achieve three special effects, I hope these three special can let you be inspired, use CSS3 to make better, more dazzling animation effects, and contrast the three effects and JS effects, I hope to help you learn some knowledge of CSS3. Today these three cases can be said to be a preview or warm up, the future will also write about CSS3 better works or articles, recently I am also writing a CSS3 animation library!
These examples, taken from my own common practice projects, are already mentioned on Github (CSS3-demos). Welcome to Star.
2. Understanding of transition and animation concepts
CSS 3 transition
In the jargon of novice tutorials, a CSS3 transition is the effect of elements gradually changing from one style to another. To do this, you must specify two things: 1. Specify the CSS properties to which you want to add the effect. 2. Specify the duration of the effect.
CSS 3 animation
In the jargon of the novice tutorial, CSS3 animation is specified according to the @KeyFrames rule within a CSS style and the animation will gradually change from the current style to the new style. Specify that at least two CSS3 animation properties are bound to one selector: 1. Specify the name of the animation. 2. Specify the duration of the animation.
3. Transition case – Cool down
3-1 Principle analysis
1. The first is a navigation dropdown, is the mouse put up a drop-down list 2. And then it turns out that on the lower Larry side, each of the choices is 3 from two different directions. The way it appears is that the odd entries come in from the left, the even entries come in from the right, and the entry is by sliding in.
3-2 Implementation process
1. First of all, the layout of the page, this should be known to everyone, the menu is nothing more than a list of ul-Li, the drop-down list is an ul-Li below li.
Reset.css (Style resettable and personal style encapsulation)
*{margin:0; padding:0}h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:400}ol,ul{list-style:none}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal; font-weight:400}fieldset,img{border:0}textarea{resize:none}a{color:# 000; text-decoration:none}.fontsize24,h1{font-size:24px}.fontsize20,h2{font-size:20px}.fontsize18,h3{font-size:18px}.fontsize 16,h4{font-size:16px}.fontsize14,h5{font-size:14px}.fontsize12,h6{font-size:12px}.bold{font-weight:700}.fllil li{float:left}.fllir li{float:right}.fl{float:left}.fr{float:right}.radius{border-radius:100%}.positionCenterLeft{left:0; right:0; margin:auto}.positionCenterTop{top:0; bottom:0; margin:auto}.positionCenter{top:0; bottom:0; left:0; right:0; margin:auto}.distable{display:table}.distablecell{display:table-cell; vertical-align:middle}.textels{overflow:hidden; white-space:nowrap; text-overflow:ellipsis}.marginCenter{margin:0 auto}.t_l{text-align:left}.t_c{text-align:center}.t_r{text-align:right}.unLine{text-decoration:underline}.fiexd{position :fixed}.absolute{position:absolute}.relative{position:relative}.wrapper{clear:both; overflow:hidden}.o-hidden{overflow:hidden}.hidden{display:none}.block{display:block}.lblock{display:inline-block}.clear{ clear:both}.pointer{cursor:pointer}img{border:0; vertical-align:middle}
Copy the codeThe HTML code looks like this
<div class="demo-nav"> <! --.fllil,.clear is written in the style reset.css,.fllil li{fload:left; }.clear{clear:both; }--> <ul class="menu fllil">
<li>HTML5
<ul class="sub-menu">
<li>article</li>
<li>section</li>
<li>menu</li>
<li>nav</li>
</ul>
</li>
<li>CSS3
<ul class="sub-menu"Animation > < li > < / li > < li > transitional < / li > < li > round < / li > < li > border < / li > < / ul > < / li > < li > Javascript < ul class ="sub-menu"> < li > string < / li > < li > array < / li > < li > object < / li > < li >, < / li > < / ul > < / li > < li > Jquery < ul class ="sub-menu"Animation > < li > < / li > < li > effects < / li > < li > AJAX < / li > < / ul > < / li > < li > VUE < / li > < / ul > < div class ="clear"></div>
</div>
Copy the codeThe CSS code is as follows
.demo-nav {
width: 500px;
margin: 0 auto;
}
.demo-nav li {
line-height: 40px;
padding: 0 10px;
background: #09f;
color: #fff;
position: relative;
}
.demo-nav li ul {
position: absolute;
left: 0;
top: 40px;
height: 0;
overflow: hidden;
}
.demo-nav li ul li {
float: none; /* transition: all.3s; background:#f90;opacity: 0; */. Demo-nav li ul Li :nth-of-type(1n) {transform: translate3D (100%, 0, 0); */. Demo-nav li ul Li: translate3d(-100%, 0, 0) {transform: translate3D (-100%, 0, 0); } .demo-nav li:hover ul { overflow: visible; */. Demo-nav li:hover ul li {opacity: 1; transform: translate3d(0, 0, 0); }Copy the codeDemo-nav li ul{display:none; display:none; }. Demo-nav li ul{height: 0; overflow:hidden; Demo-nav li:hover ul{display:block; },.demo-nav li:hover ul{overflow: visible; } because if ul is hidden at first, when you mouse over the parent li, the submenu ul will be displayed, and you will see the animation of li under ul.
Demo-nav li ul{height: 0; overflow:hidden; -nav li:hover ul{overflow: visible; }. This step should not be omitted, or there will be problems. If you do not add, in fact, the submenu ul, and the li under the submenu ul will always be on the page, if you move the mouse over the submenu ul, and the li under the submenu ul. The parent Li’s hover is actually triggered as well.
Contrast with JS implementation
This effect js is also able to achieve, the implementation is not difficult, nothing more than the call timer problem. But it will definitely write more than CSS3, and the logic will be more complex than CSS3. 1. First, the parent li must be bound to a mouseout and mousein event, and also a property must be defined to record the timer (different parent Li cannot share the same timer, otherwise it will be disturbed, each parent LI must have a property to record the timer). obj.timer=setInterval(function(){},100) 2. If you use JS, you’re actually operating on class or CSS. So the performance of CSS3 is better than JS! 3. For this animation, CSS3 is also better than JS control.
Complete code
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8"> <title>ec-css navigation bar </title> <link rel="stylesheet" href="reset.css">
<style>
.demo-nav {
width: 500px;
margin: 0 auto;
}
.demo-nav li {
line-height: 40px;
padding: 0 10px;
background: #09f;
color: #fff;
position: relative;
}
.demo-nav li ul {
position: absolute;
left: 0;
top: 40px;
height: 0;
overflow: hidden;
}
.demo-nav li ul li {
float: none;
transition: all .3s;
background: #f90;opacity: 0; } .demo-nav li ul li:nth-of-type(1n) { transform: translate3d(100%, 0, 0); } .demo-nav li ul li:nth-of-type(2n) { transform: translate3d(-100%, 0, 0); } .demo-nav li:hover ul { overflow: visible; } .demo-nav li:hover ul li { opacity: 1; transform: translate3d(0, 0, 0); } /*.demo-nav li ul li:nth-of-type(2) {transition-delay:.1s; /*.demo-nav li ul li:nth-of-type(2) {transition-delay:.1s; } .demo-nav li ul li:nth-of-type(3) { transition-delay: .2s; } .demo-nav li ul li:nth-of-type(4) { transition-delay: .3s; } .demo-nav li ul li:nth-of-type(5) { transition-delay: .4s; } .demo-nav li ul li:nth-of-type(6) { transition-delay: .5s; } .demo-nav li ul li:nth-of-type(7) { transition-delay: .6s; } .demo-nav li ul li:nth-of-type(8) { transition-delay: .7s; } .demo-nav li ul li:nth-of-type(9) { transition-delay: .8s; } .demo-nav li ul li:nth-of-type(10) { transition-delay: .9s; } </style> </head> <body> <div class="demo-nav">
<ul class="menu fllil">
<li>HTML5
<ul class="sub-menu">
<li>article</li>
<li>section</li>
<li>menu</li>
<li>nav</li>
</ul>
</li>
<li>CSS3
<ul class="sub-menu"Animation > < li > < / li > < li > transitional < / li > < li > round < / li > < li > border < / li > < / ul > < / li > < li > Javascript < ul class ="sub-menu"> < li > string < / li > < li > array < / li > < li > object < / li > < li >, < / li > < / ul > < / li > < li > Jquery < ul class ="sub-menu"Animation > < li > < / li > < li > effects < / li > < li > AJAX < / li > < / ul > < / li > < li > VUE < / li > < / ul > < div class ="clear"></div>
</div>
</body>
</html>
Copy the code4. Transition case – accordion
4-1 Principle analysis
This is not difficult to look at, is also an ul-Li, mouse into li, li below the title color, background color, arrow change, li below div height change!
4-2 Implementation process
1. First, set ul-Li to a header (h3 for this one) and a content (div).
HTML is as follows
<div class="demo-slide-tab">
<ul>
<li>
<h3>title 1</h3>
<div>content1</div>
</li>
<li>
<h3>title 2</h3>
<div>content2conte nt2content2content2content2conten t2content2content2content2content2conte nt2content2content2content2conte nt2content2content2content2 content2content2content 2content2content2content2content2conten t2content2c ontent2content2content2</div>
</li>
<li>
<h3>title 3</h3>
<div>content3</div>
</li>
<li>
<h3>title 4</h3>
<div>content4.</div>
</li>
</ul>
</div>
Copy the codeThe CSS code is as follows
<style>
.demo-slide-tab {
width: 500px;
margin: 0 auto;
}
.demo-slide-tab ul {
width: 100%;
margin: 0;
padding: 0;
}
.demo-slide-tab li {
list-style: none outside none;
display: block;
margin: 0;
padding: 0;
height: 40px;
width: 100%;
overflow: hidden;
background: #f0f0f0;The transition: height 0.3 s ease - in-out; } .demo-slide-tab h3 { margin: 0; padding: 10px; height: 19px; border-top: 1px solid#f0f0f0;
color: # 000;
background: #ccc;
background: linear-gradient(#0099ff, #71d1fd);
custor: pointer;
position: relative;
}
.demo-slide-tab h3:before {
content: "";
border-width: 5px;
border-color: transparent transparent transparent # 000;position: absolute; right: 10px; top: 15px; width: 0; height: 0; } .demo-slide-tab div { margin: 0; voerflow: auto; padding: 10px; max-height: 220px; } // hover {height: 280px; // hover {height: 280px; // hover {height: 280px; } // hover h3 {color: hover h3 {color: hover h3}#fff;
background: # 000;
background: linear-gradient(#faa305, #fcc054);< span style = "box-width: border-box; color: RGB (74, 74, 74); font-family: arial, helvetica, helvetica, sans-serif#fff;
transform: rotate(90deg);
}
</style>
Copy the codeBecause of this, the div in li has the padding on it. So what I suggested was to change Li to set overflow: hidden; height:40px; /* The height is equal to the height of the title. Because if you mouse over Li, you’re manipulating div. There will be a small problem! Like chestnuts!
Change some of the code to the following
.demo-slide-tab li {
display: block;
margin: 0;
padding: 0;
width: 100%;
background: #f0f0f0;} .demo-slide-tab div { margin: 0; height: 0; overflow: hidden; The transition: height 0.3 s ease - in-out; } .demo-slide-tab li:hover div { padding: 10px; height: 220px; }Copy the code
As you can see, the moment the mouse moves out, the content inside the div is also attached to the edge! That’s what I did to avoid thisliHeight to controldivThe height of the!
4-3 Comparison with JS implementation
1. This animation, I feel that although the performance of CSS3 is better than JS. After all, JS also controls CSS or class to achieve! 2. Flexibility, this is worse than JS, such as div display and hide, I do not want to move the mouse in and out of the way to control, if I want to click the way to control div display and hide? For the js method, this is the triggered event is ok, for the plug-in, maybe just change a plug-in! For the CSS3 implementation, this will change not only the CSS style, but also the HTML structure! Here, my advice is that the best way to animate this animation is to use JS and CSS3 results, and the results are the best. For less flexible needs, cSS3 can be used only.
4-4 Complete code
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8"> <title>ec-css accordion </title> <link rel="stylesheet" href="reset.css">
<style>
.demo-slide-tab {
width: 500px;
margin: 0 auto;
}
.demo-slide-tab ul {
width: 100%;
margin: 0;
padding: 0;
}
.demo-slide-tab li {
list-style: none outside none;
display: block;
margin: 0;
padding: 0;
height: 40px;
width: 100%;
overflow: hidden;
background: #f0f0f0;The transition: height 0.3 s ease - in-out; } .demo-slide-tab h3 { margin: 0; padding: 10px; height: 19px; border-top: 1px solid#f0f0f0;
color: # 000;
background: #ccc;
background: linear-gradient(#0099ff, #71d1fd);
custor: pointer;
position: relative;
}
.demo-slide-tab h3:before {
content: "";
border-width: 5px;
border-color: transparent transparent transparent # 000;
position: absolute;
right: 10px;
top: 15px;
width: 0;
height: 0;
}
.demo-slide-tab div {
margin: 0;
voerflow: auto;
padding: 10px;
max-height: 220px;
}
.demo-slide-tab li:hover {
height: 280px;
}
.demo-slide-tab li:hover h3 {
color: #fff;
background: # 000;
background: linear-gradient(#faa305, #fcc054);
}
.demo-slide-tab li:hover h3:before{
border-color: transparent transparent transparent #fff;
transform: rotate(90deg);
}
</style>
</head>
<body>
<div class="demo-slide-tab">
<ul>
<li>
<h3>title 1</h3>
<div>content1</div>
</li>
<li>
<h3>title 2</h3>
<div>content2conte nt2content2content2content2conten t2content2content2content2content2conte nt2content2content2content2conte nt2content2content2content2 content2content2content 2content2content2content2content2conten t2content2c ontent2content2content2</div>
</li>
<li>
<h3>title 3</h3>
<div>content3</div>
</li>
<li>
<h3>title 4</h3>
<div>content4.</div>
</li>
</ul>
</div>
</body>
</html>
Copy the code5. Animated case – Seamless scrolling
As you can see above, seamless scrolling is also known as running through the lights, which is something and then moving to the left. When the mouse goes up, the animation stops! Interaction is like this, let’s see the implementation process!
5-1 Principle analysis
1. First, the initial state is as shown below, and then slowly move to the right (the black box is the visible area).
2. But when you get to the end of the scroll, there will be a problem! The following figure
3. So the correct posture should be, so you need to copy the scroll once!
4. But you can’t avoid the problem of step 2
5. Here’s the step you need to do, just as you scroll to the first page of the next round. As shown in the figure below (in this case, not including the 4 li copies, there are 4 li copies, each 200px, so when the square UL rolls 800px)
6. When you scroll here, pull back, return to the original position, and then scroll (when ul rolls 800px, pull back to the original position, which means it has not started rolling)
5-2 Implementation process
1. First layout, the black box is a div, the orange 1234 is ul-Li layout! Look at the following code comments, combined with the above principle, everyone is very easy to understand!
The HTML code looks like this
<div class="demo-marquee">
<ul class="fllil">
<li><img src="image/1.jpg"/>
</li>
<li><img src="image/2.jpg"/>
</li>
<li><img src="image/3.jpg"/>
</li>
<li><img src="image/4.jpg"/> </li> <! <img SRC = <img SRC = <img SRC = <img SRC ="image/1.jpg"/>
</li>
<li><img src="image/2.jpg"/>
</li>
<li><img src="image/3.jpg"/>
</li>
<li><img src="image/4.jpg"/>
</li>
</ul>
<div class="clear"></div>
</div>
Copy the codeCSS code
<style> .demo-marquee { width: 400px; margin: 20px auto; overflow: hidden; }.marquee ul {/* this example ul width should be li number *li width */ width: 1600px; /* Animation: ec-marquee-move 6s infinite linear; }.animation -marquee ul:hover {/* animation-play-state: paused; } / / @keyframes ec-marquee-move {0% {transform: translateX(0px); / / @keyframes ec-marquee-move {0% {transform: translateX(0px); } 100% { transform: translateX(-800px); } } </style>Copy the code5-3 Comparison with JS implementation
1. The performance of this animation is of course better in CSS3, and the flexibility is certainly better. For example, make the following picture look like this. Click the left and right arrow to switch directions!
Another is that, for example, in the above case, the number of Li is changing, so ul width is also to use JS calculation, and ul content to copy, in the programmer’s thinking, should also use JS, rather than manually copy!
2. Therefore, in this animation, it is recommended to use JS and CSS3 in combination, so that the best results, performance and flexibility are compromise, cost-effective is undoubtedly the best!
5-4 Complete code
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8"> <title>ec-css seamless scrolling </title> <link rel="stylesheet" href="reset.css">
<style>
.demo-marquee {
width: 400px;
margin: 20px auto;
overflow: hidden;
}
.demo-marquee ul {
width: 1600px;
animation: ec-marquee-move 6s infinite linear;
}
.demo-marquee ul:hover {
animation-play-state: paused;
}
@keyframes ec-marquee-move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-800px);
}
}
</style>
</head>
<body>
<div class="demo-marquee">
<ul class="fllil">
<li><img src="image/1.jpg"/>
</li>
<li><img src="image/2.jpg"/>
</li>
<li><img src="image/3.jpg"/>
</li>
<li><img src="image/4.jpg"/>
</li>
<li><img src="image/1.jpg"/>
</li>
<li><img src="image/2.jpg"/>
</li>
<li><img src="image/3.jpg"/>
</li>
<li><img src="image/4.jpg"/>
</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
Copy the code5. To summarize
About CSS3, my development small principle is can use CSS3 to solve, I can’t write JS, but if you want to write JS, I will not be stingy to do not write JS, only cSS3 write the desired effect! Css3 with JS collocation, can make a lot of unexpected shock effect, this must see everyone imagination has how big! Ok, today through three cases to bring you a preliminary understanding of CSS3 transition and animation. I hope to give you a warm up role, or you see these three cases, know how to develop other cases, divergent thinking! But this is just the tip of the iceberg cSS3 transition and animation, CSS3 even if there are no other new features, say transition and animation, charm is big enough, you can also search the case of CSS3 on the Internet! Know the charm of CSS3! I will continue to write about the new features in CSS3 in the future. Finally, or that old saying, if I feel where to write bad, write wrong, welcome to give directions! Let’s learn from each other and help each other!
— — — — — — — — — — — — — — — — — — — — — — — — — gorgeous line — — — — — — — — — — — — — — — — — — — — want to know more, pay attention to focus on my WeChat public number: waiting for book cabinet
