5个常用的CSS3网页小实例

第一种效果：内容震颤效果

通过CSS3的重放和变换，可以实现更流畅的震颤动画效果。虽然gif格式的帧率较低，但实际呈现的效果仍然十分理想，具有良好的弹性感。这个案例展示了一个简单的“弹”字自定义震颤效果。

实现代码：

.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 {    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);    }}

第二种效果：搜索框动态宽度变化

这个效果很常见于现代网站的搜索输入框，实现了焦点时的动态宽度变化。通过设置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;}

第三种效果：动态注释效果

在博客或个人简介中，能够实现“动态注释”效果是现代网页设计中的一个不错的想法。通过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: 0;    top: 0;    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;}

第四种效果：内容翻转效果

通过CSS3的变换和动画，可以实现内容的翻转效果。这一效果尤其适合用于显示更多信息或交互场景。

实现代码：

.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: 0;    top: 0;    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);}

第五种效果：元素绕转翻转

这是一个结合变换和动画的典型示例，演示了多个元素的绕转翻转效果，展现了现代网页设计的趣味性。

实现代码：

.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;}

这些示例展示了CSS3在实现现代网页效果中的强大能力，从简单的交互动画到复杂的多元素动画，CSS3都能轻松应对。

转载地址：http://ojncz.baihongyu.com/

你可能感兴趣的文章