当前位置：主页 > 资料库 > 前端教程 > 制作html5 svg页面预加载效果

制作html5 svg页面预加载效果

11-06 次
标签 svg 页面加载

查看演示 下载地址

本教程将给大家展示一种简单的页面预加载效果。我们将使用到CSS animations, SVG和JavaScript。对于一个网站来说，页面加载时的等待效果是非常重要的，创建一种动画效果来过渡页面加载将会使用户得到更好的体验。这个效果的灵感来自于Fontface Ninja。

本教程里我们将制作类似的页面加载效果。页面中的Logo和圆形进度条将使用svg制作。我们还要使用到javascript来控制圆形进度条的进度。

注意：不是每一个浏览器都支持 CSS animations和CSS 3D transforms，最好是使用Chrome或Firefox浏览器观看。

HTML结构:

我们使用一个div作为主要容器包住两个部分：header和main。为了控制动画和样式，我们给包裹div添加一个class和id为ip-container。

<div id="ip-container" class="ip-container">

    <!-- initial header -->
    <header class="ip-header">

        <h1 class="ip-logo">
            <svg class="ip-inner" width="100%" height="100%" viewBox="0 0 300 160" preserveAspectRatio="xMidYMin meet" aria-labelledby="logo_title">
                <title id="logo_title">Delightful Demonstrations by Codrops</title>
                <path d="...our super-long path..." />
            </svg>
        </h1>

        <div class="ip-loader">
            <svg class="ip-inner" width="60px" height="60px" viewBox="0 0 80 80">
                <path class="ip-loader-circlebg" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
                <path id="ip-loader-circle" class="ip-loader-circle" d="M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71 S10,57.351,10,40.5S23.649,10,40.5,10z"/>
            </svg>
        </div>

    </header>

    <!-- main content -->
    <div class="ip-main">

        <h2>Make yourself at home.</h2>

        <div class="browser clearfix">
            <div class="box">
                <span class="icon-bell"></span>
                <p>...</p>
            </div>
            <div class="box">
                <span class="icon-heart"></span>
                <p>...</p>
            </div>
            <div class="box">
                <span class="icon-cog"></span>
                <p>...</p>
            </div>
        </div>
        
    </div>
</div><!-- /container -->

CSS样式：

在css样式中我们使用了一些字体图标，例子中使用的图标是Feather icon set和Icomoon App。

@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'Blokk';
    src: url('../fonts/blokk/BLOKKRegular.eot');
    src: url('../fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/blokk/BLOKKRegular.woff') format('woff'),
         url('../fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg');
}

@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'feather';
    src:url('../fonts/feather/feather.eot?-9jv4cc');
    src:url('../fonts/feather/feather.eot?#iefix-9jv4cc') format('embedded-opentype'),
        url('../fonts/feather/feather.woff?-9jv4cc') format('woff'),
        url('../fonts/feather/feather.ttf?-9jv4cc') format('truetype'),
        url('../fonts/feather/feather.svg?-9jv4cc#feather') format('svg');
}

我们希望最开始的时候header占满整个屏幕，所以给它100%的宽度和高度，并设置为fixed定位。

.ip-header {
    position: fixed;
    top: 0;
    z-index: 100;
    min-height: 480px;
    width: 100%;
    height: 100%;
    background: #f1f1f1;
}

将logo处的margin设置为0。

.ip-header h1 {
    margin: 0;
}

logo和圆形进度条都需要绝对定位，并且宽度为100%。

.ip-logo,
.ip-loader {
    position: absolute;
    left: 0;
    width: 100%;
    opacity: 0;
    cursor: default;
    pointer-events: none;
}

将Logo放置在屏幕中间的位置，我们需要logo是响应式的，但是我们并不知道Logo的大小，为了将它放到屏幕的中间位置，需要设置它的高度为100%，然后将它translate到25%的位置。 

.ip-logo {
    top: 0;
    height: 100%;
    transform: translate3d(0,25%,0);
}

将圆形进度条放在屏幕的下方。

.ip-loader {
    bottom: 20%;
}

ip-inner div将其显示为block并居中。

.ip-header .ip-inner {
    display: block;
    margin: 0 auto;
}

logo svg要使响应式的，尺寸不能太大也不能太小。我们给它设置最大宽度和最小宽度。

.ip-header .ip-logo svg {
    min-width: 320px;
    max-width: 480px;
    width: 25%;
}

给logo svg填充一些颜色。

.ip-header .ip-logo svg path {
    fill: #ef6e7e;
}

给圆形进度条也进行同样的操作。

.ip-header .ip-loader svg path {
    fill: none;
    stroke-width: 6;
}

圆形进度条的第一条路径填充为灰色。

.ip-header .ip-loader svg path.ip-loader-circlebg {
    stroke: #ddd;
}

第二条路径用来显示进度，我们将用js来控制它，这里定义它的transition为stroke-dashoffset。

.ip-header .ip-loader svg path.ip-loader-circle {
    transition: stroke-dashoffset 0.2s;
    stroke: #ef6e7e;
}

现在，我们给div ip-main一些样式：

.ip-main {
    overflow: hidden;
    margin: 0 auto;
    padding: 160px 0 10em 0;
    max-width: 1100px;
    width: 90%;
}

ip-main下的h2标题行的字体大小使用vw为单位，以使其具有相应性。

.ip-main h2 {
    margin: 0;
    padding: 0.5em 0 1em;
    color: #be4856;
    text-align: center;
    font-size: 4.25em;
    font-size: 4vw;
    line-height: 1;
}

为browser div添加样式：

.browser {
    margin: 0 auto;
    padding-top: 8%;
    min-height: 400px;
    max-width: 1000px;
    width: 100%;
    border-radius: 8px;
    background: #fff url(../img/browser.png) no-repeat 50% 0;
    background-size: 100%;
    color: #d3d3d3;
}

添加一些虚拟的文本块：

.box {
    float: left;
    padding: 3.5em;
    width: 33.3%;
    font-size: 0.7em;
    line-height: 1.5;
}
.box p {
    font-family: 'Blokk', Arial, sans-serif;
}

每一个文本块添加一个图标：

[class^="icon-"]::before, 
[class*=" icon-"]::before {
    display: block;
    margin-bottom: 0.5em;
    padding: 0.5em;
    border-radius: 5px;
    background: #dfdfdf;
    color: #fff;
    text-align: center;
    text-transform: none;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-size: 5em;
    font-family: 'feather';
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-bell:before {
    content: "\e006";
}

.icon-cog:before {
    content: "\e023";
}

.icon-heart:before {
    content: "\e024";
}

现在来添加一些动画样式。刚开始的时候，logo和进度条要从页面底部向上升起。

.loading .ip-logo,
.loading .ip-loader {
    opacity: 1;
    animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
}

.loading .ip-loader {
    animation-delay: 0.2s;
}

@keyframes animInitialHeader {
    from { 
        opacity: 0; 
        transform: translate3d(0,800px,0); 
    }
}

现在请注意，我们用js来控制圆形进度条，当进度条的进度到达100%的时候，需要将整个容器的“状态”改变为loaded，在这里定义loaded的动画样式。

.loaded .ip-logo,
.loaded .ip-loader {
    opacity: 1;
}

.loaded .ip-logo {
    transform-origin: 50% 0;
    animation: animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes animLoadedLogo {
    to { 
        transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); 
    }
}

.loaded .ip-logo svg path {
    transition: all 0.5s ease 0.3s;
    fill: #fff;
}

.loaded .ip-loader {
    animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes animLoadedLoader {
    to { 
        opacity: 0; 
        transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); 
    }
}
.loaded .ip-header {
    animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes animLoadedHeader {
    to { transform: translate3d(0,-100%,0); }
}

现在来看看内容页面，你可以根据你的需要制作各种不同的效果，这里我们制作一种页面淡入淡出升起的效果。

/* Content animations */
.loaded .ip-main h2,
.loaded .ip-main .browser,
.loaded .ip-main .browser .box,
.loaded .codrops-demos {
    animation: animLoadedContent 1s cubic-bezier(0.7,0,0.3,1) both;
}

.loaded .ip-main .browser,
.loaded .ip-main .browser .box:first-child {
    animation-delay: 0.1s;
}

.loaded .ip-main .browser .box:nth-child(2) {
    animation-delay: 0.15s;
}

.loaded .ip-main .browser .box:nth-child(3) {
    animation-delay: 0.2s;
}

@keyframes animLoadedContent {
    from { 
        opacity: 0; 
        transform: translate3d(0,200px,0); 
    }
}

给browser div一些轻微的延时，效果将更好。

为了避免滚动也页面底部空白的问题，我们需要将头部的定位从fix转换为absolute。

.layout-switch .ip-header {
    position: absolute;
}

最后添加媒体查询来适应不同的屏幕。

@media screen and (max-width: 45em) {

    .ip-main h2 {
        font-size: 2.25em;
        font-size: 10vw;
    }

    .box {
        width: 100%%;
    }

}

本次教程就到这里，希望对你有所帮助。

查看演示 下载地址

Previous:
上一篇：使用jQuery制作3d画廊房间
Next:
下一篇：html5制作焦点图左右导航箭头样式

相关文章

loaders.css-纯CSS3超酷Loading加载指示器特效

loaders.css-纯CSS3超酷Loading加载指示器特效

HTML5系列教程目录

HTML5系列教程目录

HTML5教程 | HTML5 History API

HTML5教程 | HTML5 History API

HTML5教程 | HTML5 File API

HTML5教程 | HTML5 File API

返回顶部