在平常开发中,若是css运用得当,咱们能够减小使用js,提升开发效率。下面介绍一些css开发中经常使用技巧
animation
能够让咱们完成一些常见的动画,好比等待loading,还有一些弹窗过渡动画等等,好比下面实现的轮播图//pug语法 div.content div.boxcontent div div div
//stylus语法 .content position:relative; width:200px; height:200px; overflow:hidden; .boxcontent position:absolute; width:600px; height:200px; overflow:hidden; animation: move 5s infinite; colors=red blue #ffe100 for col , j in colors div:nth-child({j+1}) width:200px; height:200px; background:col; float:left @keyframes move 0% left:0 50% left:-200px; 100% left:-400px;
效果:css
这个库animate.css运用的大量animation动画效果html
input类选择器
改变默认的选中框。<label> <input type="checkbox"> <span>开心</span> </label> <label> <input type="checkbox"> <span>愉快</span> </label> <label> <input type="checkbox" disabled> <span>不开心</span> </label>
input{ opacity:0 } span{ position:relative; } span:before{ position:absolute; width:15px; height:15px; border:1px solid #ddd; content:''; left:-20px; top:3px; line-height:15px; text-align:center; color:green; } input:checked+span:before{ content:'√'; } input:disabled+span{ text-decoration:line-through; } input:disabled+span:before{ content:"×" }
效果:git
before
,after
在平常开发中使用的也比较多;好比画步骤条:github
<li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li>
li{ position:relative; list-style:none; float:left; margin-left:30px; border:1px solid #d500ff; padding:5px; text-align:center; border-radius:50%; width:30px; height:30px; line-height:30px; } li:after{ position:absolute; top:19px; left:40px; width:30px; height:2px; content:''; background:#d500ff; } li:before{ position: absolute; width: 10px; height: 10px; content: '>'; top: 3px; left: 61px; font-size:18px; color: #d500ff; } li:last-child:before,li:last-child:after{ display:none; }
效果:动画
css权重
来改变原有的样式。参考css的优先级和权重spa
:hover
,:active
在按钮上或者跳转连接上也使用比较的频繁,hover经常使用于鼠标移上按钮时按钮背景颜色发生改变,active经常使用于点击按钮效果。