博客
关于我
5个很常用的CSS3网页小实例
阅读量:492 次
发布时间:2019-03-07

本文共 4686 字,大约阅读时间需要 15 分钟。

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/

你可能感兴趣的文章
mysql以服务方式运行
查看>>
mysql优化--索引原理
查看>>
MySQL优化之BTree索引使用规则
查看>>
MySQL优化之推荐使用规范
查看>>
Webpack Critical CSS 提取与内联教程
查看>>
mysql优化概述(范式.索引.定位慢查询)
查看>>
MySQL优化的一些需要注意的地方
查看>>
mysql优化相关
查看>>
MySql优化系列-优化版造数据(存储过程+函数+修改存储引擎)-2
查看>>
MySql优化系列-进阶版造数据(load data statment)-3
查看>>
MySql优化系列-造数据(存储过程+函数)-1
查看>>
MySQL优化配置详解
查看>>
Mysql优化高级篇(全)
查看>>
mysql会员求积分_MySql-统计所有会员的最高前10次的积分和
查看>>
mysql会对联合索性排序优化_MySQL索引优化实战
查看>>
MySQL作为服务端的配置过程与实际案例
查看>>
Mysql使用命令行备份数据
查看>>
MySQL保姆级教程(SQL语法基础篇)从小白到高手的进阶指南,收藏这一篇就够了
查看>>