本文共 4686 字，大约阅读时间需要 15 分钟。
通过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/