1.关于背景色透明时候里面的文字不透明的写法
<div>透明背景</div>
div{
background:rgba(0,0,0,0.5);
}
上面代码就是透明度为0.5的黑色背景，rgba可能调整透明度且不会让里面的文字变透明
2.当遇到悬浮的时候最外层的边框要加一个不同颜色的边框的时候最好在原来的基础上加一个看不见的透明的边框，不然悬浮的时候会产生抖动的现象不好看。
3.关于纯css3动画的一些
用纯css3来写动画会有一点问题，我添加了几个按钮但是这些按钮离开的时候动画又从第一张开始进行了，而不是从当前张进行往下面轮播，好像用纯css3不能做到比较完美的轮播。
html：
<div class="clfb">
<a href="" class="num" id="a1">1</a>
<a href="" class="num" id="a2">2</a>
<a href="" class="num" id="a3">3</a>
<div class="lunbo">
<ul>
<li><img src="img/050213a01e4da3696f91a9fca5.jpg" alt="" /></li>
<li><img src="img/8c54d8f3830e0f09cd3f060809.jpg" alt="" /></li>
<li><img src="img/94cd92692289c78770403648b5.jpg"/></li>
</ul>
</div>
<div class="gg">
广告
</div>
</div>
css：
.clfb{
width: 945px;
height: 288px;
margin-top:25px;
position: relative;
overflow: hidden;
cursor: pointer;
}
.clfb img{
display: block;
}
.clfb li{
float: left;
}
.lunbo{
width: 2835px;
height:288px;
animation:lunbo 10s infinite;
}
@keyframes lunbo{
0%{margin-left: 0;}
50%{margin-left: -945px;}
100%{margin-left: -1890px;}
}
.clfb a{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
line-height: 20px;
background: #ccc;
text-align: center;
position: absolute;
}
#a1{
bottom:50px;
left:370px;
}
#a2{
bottom:50px;
left:470px;
}
#a3{
bottom:50px;
left:570px;
}
@keyframes n1{
0%{margin-left: 0;}
100%{margin-left: 0;}
}
@keyframes n2{
0%{margin-left: -945px;}
100%{margin-left:-945px;}
}
@keyframes n3{
0%{margin-left:-1890px;}
100%{margin-left:-1890px;}
}
.num:hover{
background: red;
color: #fff;
}
.num:hover ~ .lunbo{
animation-play-state: paused;
}
#a1:hover ~ .lunbo{
animation: n1 5s;
}
#a2:hover ~ .lunbo{
animation: n2 5s;
}
#a3:hover ~ .lunbo{
animation: n3 5s;
}
如果大家能有更好的解决方法欢迎大神来解决