常用CSS3网页小效果有哪些-创新互联
这篇文章主要介绍常用CSS3网页小效果有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联公司-专业网站定制、快速模板网站建设、高性价比南芬网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式南芬网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖南芬地区。费用合理售后完善，10年实体公司更值得信赖。
第一种效果：
由于录制gif图片会掉帧，所以看起来不流畅，很卡，但其实实际效果还是不错的，有弹性一些。
html代码：
弹
css代码:
.shake{
width:40px;
height:40px;
display:block;
background:lightgreen;
border-radius:50%;
margin:5px;
color:#fff;
font-size:24px;
text-align:center;
line-height:40px;
cursor:pointer;
-webkit-transition:all 0.25s;
}
.shake:hover{
-webkit-animation:shake 0.25s;
background: lightblue;
}
@-webkit-keyframes shake{
0%,10%,55%,90%,94%,98%,100%{
-webkit-transform:scale(1,1);
}
30%{
-webkit-transform:scale(1.14,0.86);
}
75%{
-webkit-transform:scale(0.92,1.08);
}
92%{
-webkit-transform:scale(1.04,0.96);
}
96%{
-webkit-transform:scale(1.02,0.98);
}
99%{
-webkit-transform:scale(1.01,0.99);
}
}昨晚看到某人的个人博客网站的回到顶部按钮悬浮效果就是这样子的，还是比较有趣的，不过人家的效果可能比我的好一些，大家不妨试一下。
第二种效果：
这种效果其实目前线上很多网站都在用了，不管是使用CSS3，还是jQuery，都是可以实现的。那这里我只是简单地使用CSS3来实现。
html代码：
CSS代码：
.search{
width:80px;
height:40px;
border-radius:40px;
border:2px solid lightblue;
position: absolute;
right:200px;
outline:none;
text-indent:12px;
color:#666;
font-size:16px;
padding:0;
-webkit-transition:width 0.5s;
}
.search:focus{
width:200px;
}一般旁边都会有一个按钮，这里我就不做了。
第三种效果：
这种效果也是很常用，比较多还是个人网站偏多。
html代码：
博
这是我的个人博客
css代码:
.banner{
width:234px;
height:34px;
border-radius:34px;
position:absolute;
top:400px;
left:200px;
}
.banner a{
display:inline-block;
width:30px;
height:30px;
line-height:30px;
border-radius:50%;
border:2px solid lightblue;
position:absolute;
left:0px;top:0px;
background:lightgreen;
color:#fff;
text-align:center;
text-decoration:none;
cursor:pointer;
z-index:2;
}
.banner a:hover + span{
-webkit-transform:rotate(360deg);
opacity:1;
}
.banner span{
display:inline-block;
width:auto;
padding:0 20px;
height:34px;
line-height:34px;
background:lightblue;
border-radius:34px;
text-align: center;
position:absolute;
color:#fff;
text-indent:25px;
opacity:0;
-webkit-transform-origin:8% center;
-webkit-transition:all 1s;
}第四种效果：
这种提示效果就更常用了，很多网站都用。
html代码：
博
这是我的个人博客
