5个很常用的CSS3网页小实例

由于最近比较忙，自己也没有很充裕的时间可以去做比较丰富的案例。我挤出时间来制作这几个很常用的CSS3网页小效果。

最近写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;  }

结语

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

推荐↓↓↓ Web前端营