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

PetitQ 其他代码 2019-1-21 1.52K 0 1

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

HTML 结构

该特效使用 HTML5 的

也想出现在这里？联系我们吧

元素作为包裹元素。里面分为

和个人信息描述文字的 div.profile-bio 元素，以及一组社交网站图标，这些图标都是使用 SVG 来制作的。

            <img src="img/avatar.svg" />

    <!-- some social links to show off -->

                <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" />

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

  -webkit-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 动画则用于背景颜色和圆角大小。

  -webkit-transform: translate(-50%, -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 动画的制作手法基本类似，具体请参考下载文件。

已有 380 人购买