css3qq企鹅

CSS3在网页设计中越来越广泛地应用，其中，QQ企鹅也在网页设计中扮演着越来越重要的角色。CSS3可以为QQ企鹅添加很多有趣的效果，为网站增添了不少趣味性。

下面我们就针对QQ企鹅的几个方面来介绍CSS3的具体使用方法。

/*改变颜色*/
.qq-img{
filter: hue-rotate(180deg); /*颜色倒置，变为相反色*/
}
/*旋转动画*/
.qq-img{
transition: transform 1s ease;
}
.qq-img:hover{
transform: rotate(360deg);
}
/*边框生成*/
.qq-img{
border-radius: 50%;
box-shadow: inset 0 0 0 10px #FFF, inset 0 0 0 15px #777;
}
/*阴影生成*/
.qq-img{
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
/*圆角阴影*/
.qq-img{
border-radius: 50%;
box-shadow: 0 10px 50px -10px rgba(0, 0, 0, 0.5), 
0px 1px 0 #444444, 0px 0px 2px rgba(255, 255, 255, 0.25) inset;
}
/*移动*/
.qq-img{
transition: transform 2s ease-in-out;
}
.qq-img:hover{
transform: translate(200px, 0);/*以当前位置为基础平移200px*/
}

以上就是使用CSS3为QQ企鹅添加效果的具体做法，读完这篇文章，相信你已经有了一定的了解，可以在网站设计中灵活使用这些方法，为网站增添趣味性。

查看更多关于css3qq企鹅的详细内容...