最近写JS的时间比例比较多，不过我还是比较钟情于CSS3。所以我还是坚持分享一些实用的CSS3小例子。这次由于时间有限，就做了几个相对比较简单的例子。我们一起来看一下。

第一种效果：

由于录制gif图片会掉帧，所以看起来不流畅，很卡，但其实实际效果还是不错的，有弹性一些。

html代码：

<span class="shake">弹</span>

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代码：

<input class="search" type="text" placeholder="搜索...">

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代码：

<div class="banner">
   <a href="javascript:;">博</a>
<span>这是我的个人博客</span></div>

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代码：

<div class="banner1"> 
   <a href="javascript:;">博</a> 
   <span>这是我的个人博客</span></div>

CSS代码：

.banner1{ 
   width:234px;
   height:34px;
   border-radius:40px;
   position:absolute;
   top:400px;
   left:600px;
}
.banner1 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;
}
.banner1 a:hover + span{ 
   -webkit-transform:translateX(40px);
   opacity:1;
}
.banner1 span{ 
   display:inline-block;
   width: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{    width: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; 
   width: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{    width: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{    width: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;
}

结语

今天这篇文章就分享到这里吧。希望对于有需要的朋友可以参考一下，也希望对大家有所帮助。

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。