CSS3小例子。这次由于时间有限，就做了几个相对比较简单的例子。我们一起来看一下。
第一种效果：
由于录制gif图片会掉帧，所以看起来不流畅，很卡，但其实实际效果还是不错的，有弹性一些。html代码：
<span class="shake">弹</span>CSS代码:
.shake{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代码：
<input class="search" type="text" placeholder="搜索...">CSS代码：
.search{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{200px;}
一般旁边都会有一个按钮，这里我就不做了。
第三种效果：
这种效果也是很常用，比较多还是个人网站偏多。html代码：
<div class="banner"><a href="javascript:;">博</a><span>这是我的个人博客</span></div>
CSS代码:
.banner{234px;height:34px;border-radius:34px;position:absolute;top:400px;left:200px;}.banner a{display:inline-block;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;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代码：
<div class="banner1"><a href="javascript:;">博</a><span>这是我的个人博客</span></div>
CSS代码：
.banner1{234px;height:34px;border-radius:40px;position:absolute;top:400px;left:600px;}.banner1 a{display:inline-block;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;}.banner1 a:hover + span{-webkit-transform:translateX(40px);
opacity:1;}.banner1 span{display:inline-block;auto;
padding:0 20px;height:30px;line-height:30px;
background:lightblue;border-radius:30px;
text-align: center;color:#fff;position:absolute;
top:2px;opacity:0;-webkit-transition:all 1s;-webkit-transform:translateX(80px);}
第五种效果：
估计这种就是不常用了，自己做着玩，有兴趣看一下咯：
html结构：
<div class="wrapper">
<div class="round">
<span>东邪</span><span>西毒</span><span>南乞</span><span>北丐</span></div></div>
CSS代码：
.wrapper{
100px;
height:100px;
background:lightblue;
border-radius:50%;
border:2px solid lightgreen;
position: absolute;
top:200px;
left:400px;
cursor:pointer;}.wrapper:after{
content:'你猜';
display:inline-block;
100px;
height:100px;
line-height:100px;
border-radius:50%;
text-align:center;
color:#fff;
font-size:24px;}.wrapper:hover .round{
-webkit-transform:scale(1);
opacity:1;
-webkit-animation:rotating 6s 1.2s linear infinite alternate;}@-webkit-keyframes rotating{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(180deg);}}.round{
240px;
height:240px;
border:2px solid lightgreen;
border-radius:50%;
position: absolute;
top:-70px;
left:-70px;
-webkit-transition:all 1s;
-webkit-transform:scale(0.35);
opacity:0;}.round span{
40px;
height:40px;
line-height:40px;
display:inline-block;
border-radius:50%;
background:lightblue;
border:2px solid lightgreen;
color:#fff;
text-align:center;
position:absolute;}.round span:nth-child(1)
{
right:-22px;
top:50%;
margin-top:-22px;}.round span:nth-child(2)
{
left:-22px;
top:50%;
margin-top:-22px;}.round span:nth-child(3)
{
left:50%;
bottom:-22px;
margin-left:-22px;}.round span:nth-child(4){
left:50%;
top:-22px;
margin-left:-22px;}