html5 css3登录页面动画特效,CSS3超炫用户信息页面切换动画特效

这是一款效果非常炫酷的纯CSS3用户信息页面切换动画特效。在特效开始时，一个小球落下到页面顶部，紧接着在小球位置以圆形扩展到整个页面，这时个人信息卡片以动画的形式出现，效果非常的炫。

制作方法

HTML结构

该特效使用HTML5的元素作为包裹元素。里面分为和个人信息描述文字的div.profile-bio元素，以及一组社交网站图标，这些图标都是使用SVG来制作的。

David Jones

Web Developer

...

...

CSS样式

在该特效中，小圆扩展为整个页面的效果是使用body:after元素来制作。它执行了两个CSS3 animate动画，分别是puff和borderRadius。puff动画修改它的高度和位置，borderRadius动画修改它的边框宽度。

body:before {

content: "";

height: 0px;

padding: 0px;

border: 110em solid #313440;

position: absolute;

left: 50%;

top: 100%;

z-index: 2;

display: block;

-webkit-border-radius: 50%;

border-radius: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

-webkit-animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards,

borderRadius 0.2s 2.3s linear forwards;

animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards,

borderRadius 0.2s 2.3s linear forwards;

}

整个信息卡片执行了moveDown，moveUp和materia动画，这些动画不断修改它的top属性，制作一种弹性效果。materia动画则用于背景颜色和圆角大小。

.profile-card {

background: #FFB300;

width: 56px;

height: 56px;

position: absolute;

left: 50%;

top: 50%;

z-index: 2;

overflow: hidden;

opacity: 0;

margin-top: 70px;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

-webkit-border-radius: 50%;

border-radius: 50%;

-webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);

box-shadow: 0px 3px 6px rgba(0 ,0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);

-webkit-animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards,

moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards,

moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,

materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;

animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards,

moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards,

moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,

materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards;

}

其它的一些CSS3动画的制作手法基本类似，具体请参考下载文件。