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/

你可能感兴趣的文章

Objective-C实现double linear search 双线性搜索算法(附完整源码)