您正在使用陈旧(Internet Explorer 6)浏览网页,如果您升级到. Internet Explorer 8 转换到另一个浏览器,本站 将能为您提供更好的服务。了解如何更新您的浏览器.
X
Articles

模仿Apple苹果CSS 3D金属登录效果教程(下)

微播音乐设计网

模仿Apple苹果CSS 3D金属登录效果教程(下)
CSS将处理一切从提交的表格和表单元素,动画效果和过渡。我们先从形式容器样式。

assets/css/tvcd.css

01 #formContainer{
02     width:288px;
03     height:321px;
04     margin:0 auto;
05     position:relative;
06
07     -moz-perspective: 800px;
08     -webkit-perspective: 800px;
09     perspective: 800px;
10 }

以及宽度,高度,保证金和定位,我们还设置元素的角度来看。此属性提供了深入的阶段。没有它的动画会出现扁平的(尝试禁用它,明白我的意思)。该值越大,越远的消失点。

下一步,我们将苹果CSS 3D金属登录效果

01 #formContainer form{
02     width:100%;
03     height:100%;
04     position:absolute;
05     top:0;
06     left:0;
07
08     /* Enabling 3d space for the transforms */
09     -moz-transform-style: preserve-3d;
10     -webkit-transform-style: preserve-3d;
11     transform-style: preserve-3d;
12
13     /* When the forms are flipped, they will be hidden */
14     -moz-backface-visibilityhidden;
15     -webkit-backface-visibilityhidden;
16     backface-visibilityhidden;
17
18     /* Enabling a smooth animated transition */
19     -moz-transition:0.8s;
20     -webkit-transition:0.8s;
21     transition:0.8s;
22
23     /* Configure a keyframe animation for Firefox */
24     -moz-animation: pulse 2s infinite;
25
26     /* Configure it for Chrome and Safari */
27     -webkit-animation: pulse 2s infinite;
28 }
29
30 #login{
31     background:url('../img/login_form_bg.jpg'no-repeat;
32     z-index:100;
33 }
34
35 #recover{
36     background:url('../img/recover_form_bg.jpg'no-repeat;
37     z-index:1;
38     opacity:0;
39
40     /* Rotating the recover password form by default */
41     -moz-transform:rotateY(180deg);
42     -webkit-transform:rotateY(180deg);
43     transform:rotateY(180deg);
44 }
我们首先描述两种形式之间的共同风格。在此之后,我们将加区分他们的独特风格。
背面属性是重要的,因为它指示浏览器隐藏表格的背面。否则,我们将结束与镜像的恢复形式,而不是显示登录的版本。(180度)改造,实现翻页效果。从右到左旋转元素。和我已经宣布了一个过渡属性,每一个旋转将是顺利的动画。
请注意在关键字的形式部分底部的声明。这定义重复无限关键字声明的关键帧动画,它不依赖于用户交互。 CSS动画描述如下:
01 /* Firefox Keyframe Animation */
02 @-moz-keyframes pulse{
03     0%{     box-shadow:0 0 1px #008aff;}
04     50%{    box-shadow:0 0 8px #008aff;}
05     100%{   box-shadow:0 0 1px #008aff;}
06 }
07
08 /* Webkit keyframe animation */
09 @-webkit-keyframes pulse{
10     0%{     box-shadow:0 0 1px #008aff;}
11     50%{    box-shadow:0 0 10px #008aff;}
12     100%{   box-shadow:0 0 1px #008aff;}
13 }
每个对应的百分比组在动画的时间点。由于它是重复的框阴影会出现作为软脉动光。
现在让我们看看会发生什么情况,一旦我们点击链接,翻转类添加到
01 #formContainer.flipped #login{
02
03     opacity:0;
04
05     /**
06      * Rotating the login form when the
07      * flipped class is added to the container
08      */
09
10     -moz-transform:rotateY(-180deg);
11     -webkit-transform:rotateY(-180deg);
12     transform:rotateY(-180deg);
13 }
14
15 #formContainer.flipped #recover{
16
17     opacity:1;
18
19     /* Rotating the recover div into view */
20     -moz-transform:rotateY(0deg);
21     -webkit-transform:rotateY(0deg);
22     transform:rotateY(0deg);
23 }
翻转类导致#登录#恢复div至180度旋转。这使得#登录表单消失。但由于#恢复一个已经被我们面临的背面,它被显示,而不是隐藏的。
这里不透明度的声明只有在Android浏览器,它忽略背面属性和显示的形式,而不是隐藏它们翻转的版本的错误修复。与此修复程序,动画甚至在除了桌面浏览器适用于Android和iOS
完成了!
CSS3D变换各种有趣的效果,一次只保留重型闪光灯网页打开大门。现在,我们可以有重量轻,抓取和语义网站,既好看欠佳浏览器,并提供适当的回退。-TVCD微播设计Flash

发表看法  

姓名 (必填)*

电子邮件 (不会被公开) (必填)*

网站

提交看法