CSS3超炫用户信息页面切换动画特效

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

制作方法

HTML结构

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

<aside class="profile-card">
    <header>
        <a href="#">
            <img src="img/avatar.svg" />
        </a>
        <h1>David Jones</h1>
        <h2>Web Developer</h2>
    </header>
    <div class="profile-bio">
        <p>...</p>
    </div>
    <!-- some social links to show off -->
    <ul class="profile-social-links">
        <li>
            <a href="#">
                <svg viewBox="0 0 24 24">
                    <path fill="#3b5998" d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />
                </svg>
            </a>
        </li>
        ...
    </ul>
</aside>              
              

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动画的制作手法基本类似，具体请参考下载文件。