这是一款效果非常炫酷的纯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动画的制作手法基本类似,具体请参考下载文件。