CSS3制作div依据顺序出入成效的代码是什么
|
这篇文章主要讲解了“CSS3制作div依据顺序出入效果的代码是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3制作div依据顺序出入效果的代码是什么”吧！ 源代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ margin-top: 10px; height: 50px; background-color: #FF0000; opacity: 0.6; } .a{ animation: aa 2s linear 100ms infinite; } .b{ animation: bb 2s linear infinite } .c{ animation: cc 2s linear infinite } .d{ animation:dd 2s linear infinite } @keyframes aa{ 0%{width: 0;} 25%{width:200px;} 50%{width:200px;} 75%{width:200px;} 100%{width:200px;} } @keyframes bb{ 0%{width: 0;} 25%{width:0px;} 50%{width:200px;} 75%{width:200px;} 100%{width:200px;} } @keyframes cc{ 0%{width: 0;} 25%{width:0px;} 50%{width:0px;} 75%{width:200px;} 100%{width:200px;} } @keyframes dd{ 0%{width: 0;} 25%{width:0px;} 50%{width:0px;} 75%{width:0px;} 100%{width:200px;} } </style> </head> <body> <div class="a"> </div> <div class="b"> </div> <div class="c"> </div> <div class="d"> </div> </body> </html> 到此，关于“CSS3制作div依据顺序出入效果的代码是什么”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
