纯css3 transforms 3D文字翻开翻转3D开放式效果
在本教程中,将基于CSS3创建的一个实现一个有趣的3D开放式效果。教程的目的是展示我们如何能带来一些生活上使用CSS3 。
css:
via:http://www.j--d.com/html/187.html
在线预览 立即下载AnimatedOpeningType.zip
html:
- <ul class="grid">
- <li class="ot-letter-left"><span data-letter="C">C</span></li>
- <li class="ot-letter-top"><span data-letter="J">J</span></li>
- <li class="ot-letter-right"><span data-letter="8">8</span></li>
- <li class="ot-letter-bottom"><span data-letter="A">A</span></li>
- </ul>
css:
- .grid li span {
- display: inline-block;
- font-weight: 900;
- line-height: 1;
- position: relative;
- color: hsla(0, 0%, 0%, 0.6);
- transform-style: preserve-3d;
- perspective: 550px;
- z-index: 1;
- }
- .grid li span:before,
- .grid li span:after {
- position: absolute;
- content: attr(data-letter);
- line-height: inherit;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 2;
- transition: all 0.3s;
- }
- .grid li span:before {
- text-shadow: none;
- color: hsla(0, 0%, 0%, 0.12);
- }
- .ot-letter-left span:before,
- .ot-letter-left span:after {
- transform-origin: 0 50%;
- }
- .ot-letter-left span:before {
- transform: scale(1.08, 1) skew(0deg, 1deg);
- }
- .ot-letter-left span:after {
- text-shadow:
- -1px 0px 0px hsla(360, 100%, 100%, 0.1),
- 3px 0px 1px hsla(0, 0%, 0%, 0.4);
- transform: rotateY(-15deg);
- }
- .ot-letter-left:hover span:before {
- transform: scale(0.85,1) skew(0deg,20deg);
- }
- .ot-letter-left:hover span:after {
- transform: rotateY(-40deg);
- }
- .ot-letter-left {
- background: #e74d3c;
- }
- .ot-letter-left span {
- text-shadow:
- 1px 4px 6px #e74d3c,
- 0 0 0 hsla(0, 0%, 0%, 0.3),
- 1px 4px 6px #e74d3c;
- }
- .ot-letter-left span:after {
- color: #e74d3c;
- }
- .ot-letter-left:hover span:after {
- color: #ea6253;
- }
- .ot-letter-left {
- background: #e74d3c;
- }
- .ot-letter-left span {
- text-shadow:
- 1px 4px 6px #e74d3c,
- 0 0 0 hsla(0, 0%, 0%, 0.3),
- 1px 4px 6px #e74d3c;
- }
- .ot-letter-left span:after {
- color: #e74d3c;
- }
- .ot-letter-left:hover span:after {
- color: #ea6253;
- }
- .ot-letter-bottom span:before,
- .ot-letter-bottom span:after {
- transform-origin: 50% 0;
- }
- .ot-letter-bottom span:before {
- transform: scale(1,1.05) skew(4deg,0deg);
- }
- .ot-letter-bottom span:after {
- text-shadow:
- 0px -1px 0px hsla(360, 100%, 100%, 0.1),
- 0px 3px 1px hsla(0, 0%, 0%, 0.4);
- transform: rotateX(15deg);
- }
- .ot-letter-bottom:hover span:before {
- transform: translateY(-0.035em) scale(1,1.2) skew(10deg,0deg);
- }
- .ot-letter-bottom:hover span:after {
- transform: translateY(0.045em) rotateX(40deg);
- }
via:http://www.j--d.com/html/187.html
【纯css3 transforms 3D文字翻开翻转3D开放式效果】相关文章
1. 纯css3 transforms 3D文字翻开翻转3D开放式效果
2. CSS3 Transitions, Transforms和Animation使用简介与应用展
6. Formula.js – 实现 MS Excel 公式的 JavaScript 工具库
10. 手机版百度首页推情人节特效,HTML5+CSS3 实现网页3D翻转
本文来源:https://www.51html5.com/a1089.html
上一篇:CSS 3中弹性盒布局的最新版
下一篇:你真的理解z-index吗?
﹝纯css3 transforms 3D文字翻开翻转3D开放式效果﹞相关内容
- CSS Transition (CSS过渡效果)入门
- 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果
- CSS3 transition实现超酷图片墙动画效果
- CSS3 transition实现超酷图片墙动画效果
- CSS3 3D镂空文字特效
- Metro Login Form
- Form Follows Function:绚丽HTML5互动体验网站
- Pure CSS3 Search Form
- 一款非常棒的纯CSS3 3D菜单演示及制作教程
- 用纯CSS3实现图片幻灯片切换效果