精华内容
下载资源
问答
  • 自制网页页面加载动画:效果一与效果二(含有HTML字符实体+CSS动画animation+js事件onbeforeunload、onload实现)
  • 我们做web app的时候,可以做一个页面加载广告,在你网页加载的时候,先出现一段gif动图或者是海报。 下面是实现页面加载动画的代码 首先js代码的实现 (function($){ $(window).load(function(){ $('#begin')....

    我们做web app的时候,可以做一个页面加载广告,在你网页加载的时候,先出现一段gif动图或者是海报。
    下面是实现页面加载动画的代码
    首先js代码的实现

    (function($){
        $(window).load(function(){
            $('#begin').fadeOut();
            $('#loading').delay(200).fadeOut('slow');
        });
     
    	$(document).ready(function(){
    	//code
    	})
     
    })(jQuery);
    

    HTML加载层

     <!--加载动画层-->
      <div id="loading">
        <div id="begin"></div>
      </div>

    CSS代码实现

    
    #loading{
        background:#ffffff;
        bottom:0;
        left:0;
        position: fixed;
        right:0;
        top:0;
        z-index:500;
    }
     
    #begin{
        background: url(../images/loading.gif)center center no-repeat; //这里可以替换掉你需要加载的图片
        height:200px;  //控制大小
        width:200px;   //控制大小
        left:50%;          //控制位置,可去掉
        top:50%;            //控制位置,可去掉
        margin: -100px 0 0 -100px;
        position: absolute;
    }
    

    引用入自己的网页文件,就能实现页面预加载广告界面了。

    如:www.studiosworks.cn

    展开全文
  • 该资源是关于网页页面 loading加载gif动画素材,共有63款,款款经典,是非常实用的gif动画素材,可以让你的页面增加不少光彩,大家赶快来下载吧!^_^
  • 里面总共有13种不同的页面加载效果,里面总共有13种不同的页面加载效果。
  • AOS网页滚动动画

    2019-08-10 01:30:02
    当你滚动网页时可以让页面上的元素产生动画
  • HTML5 SVG打开页面动画特效是一款卷帘式的渐变过渡效果的网页SVG路径在当前页上打开动画。
  • DynamicWebpage:具有Gsap动画页面过渡的动态网页
  • 今天小编就为大家分享一篇vue实现设置载入动画和初始化页面动画效果,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 简单窗帘拉开效果网页开场动画代码基于jquery-1.8.2.js制作,模拟窗帘左右拉开动画效果,适用于网站首页或登录页面使用。
  • 简单实现网页加载动画

    千次阅读 2019-03-26 16:02:51
    进入网页时先出现加载动画,加载完毕后显示网页 实现原理: 在html上方放一个div,用来显示加载动画,js判断加载完毕事件,将div隐藏即可。 知识点整理: 伪元素实现垂直居中、awesome字体动画、js判断HTML...

    今天自己实现了这个功能,记录一下

    效果:

    进入网页时先出现加载动画,加载完毕后显示网页
    在这里插入图片描述

    实现原理:

    在html上方放一个div,用来显示加载动画,js判断加载完毕事件,将div隐藏即可。

    知识点整理:

    伪元素实现垂直居中、awesome字体动画、js判断HTML加载是否完成

    代码:

    css:

        body {
          width: 100%;
          height: 100%;
          overflow: hidden;
        }
        .loading-div {
          width: 1800px;
          height: 720px;
          background-color: #fff;
          display: table-cell;
          vertical-align: middle;
          color: #555;
          overflow: hidden;
          text-align: center;
        }
        .loading-div::before {
          display: inline-block;
          vertical-align: middle;
        } 
    

    html:

    <div class="loading-div">
          <i class="fa fa-spinner fa-pulse fa-3x fa-fw "></i>
          <span class="sr-only">Loading...</span>
      </div>
      <div class="main">
        这里是网页内容
      </div>
    

    js:

    //注释部分是设置2秒的定时延迟,timeout结束后加载网页
          //setTimeout(() => {
            // $(".loading-div").hide();
            //$('body').css('overflow-y','scroll');
         // }, 2000);
    //这是根据js判断,页面加载完毕就显示
    document.onreadystatechange = function () {
        if (document.readyState == "complete") {    
            $(".loading-div").hide();
            $('body').css('overflow','scroll');
        }
      }
    
    在线引用文件:
    <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" >
    
    Github下载demo:

    https://github.com/huxinxue/demo/blob/master/简单网页加载动画demo.rar

    展开全文
  • 使用HTML5实现的网页切换动画特效,此为演示页面,演示了网页中的滑动切换/下滑菜单,网页左右滑动切换,页面翻转切换,菜单渐变渐出,网页淡入淡出,网页变暗等功能,可以说是一个集合了众多HTML5特效的网页展示。
  • HTML5 SVG打开页面动画特效
  • 16.1 制作网页页面;16.1 制作网页页面;图像的颜色 制作网页应当使用正确的颜色模式印刷使用CMYK颜色模式而网页显示应当使用RGB颜色模式在CorelDRAW中提供了网页制作专用的Web-safe色调色板使用该调色板中的颜色制作...
  • 简单窗帘拉开效果网页开场动画代码基于jquery-1.8.2.js制作,模拟窗帘左右拉开动画效果,适用于网站首页或登录页面使用。
  • vue设置载入动画、初始化页面动画

    万次阅读 2018-09-07 17:09:04
    移动端页面载入时过长的白屏等待,总是让人心烦气躁 不如,加个小动画吧 原理很简单 在index.html页面的body插入一个div css里写入动画 在app.vue里 created的时候 将这个div移除就ok了   index.html ...

    移动端页面载入时过长的白屏等待,总是让人心烦气躁

    不如,加个小动画吧

    原理很简单

    在index.html页面的body插入一个div

    css里写入动画

    在app.vue里 created的时候 将这个div移除就ok了

     

    index.html

    CSS 

    app.vue

    最终效果

     

    展开全文
  • 滚滚屏 动画 鼠标滚动 页面显示

    现在滚滚屏的效果几乎到处可见,下面我也来记录一组简单的滚滚屏效果,页面中,我只简单的添加了一个小动画。

    页面结构:

    <div class="container" id="container">
        <div id="box">
            <div class="con" id="one" style="z-index: 3">
                <div class="test">
    
                </div>
            </div>
            <div class="con" id="two">
                <div class="test">
    
                </div>
            </div>
            <div class="con" id="three">
                <div class="test">
    
                </div>
            </div>
        </div>
        <ol id="list" class="list">
    
        </ol>
    </div>

    样式 :

    <style>
            * {
                margin: 0px;;
                padding: 0px;
                list-style: none;
            }
    
            html, body {
                width: 100%;
                height: 100%;
                background-color: purple;
            }
    
            .container {
                width: 100%;
                height: 100%;
                position: relative;
                left: 0px;
                top: 0px;
                left: 0px;
                top: 0px;
            }
    
            .con {
                width: 100%;
                height: 100%;
                position: absolute;
    
            }
    
            .con .test {
                width: 100px;
                height: 100px;
                background-color: deeppink;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-top: -50px;
                margin-left: -50px;
            }
    
            .con.active {
                transition: all 2s;
            }
    
            .con.active .test {
                animation: anim 2s;
            }
    
            @-webkit-keyframes anim {
                0% {
                    -webkit-transform: translateX(50px) scale(1.2));
                    -moz-transform: translateX(50px) scale(1.2);
                    -ms-transform: translateX(50px) scale(1.2);
                    -o-transform: translateX(50px) scale(1.2);
                    transform: translateX(50px) scale(1.2);
                }
                50% {
                    -webkit-transform: translateX(0px) scale(.8);
                    -moz-transform: translateX(0px) scale(.8);
                    -ms-transform: translateX(0px) scale(.8);
                    -o-transform: translateX(0px) scale(.8);
                    transform: translateX(0px) scale(.8);
                }
                100% {
                    -webkit-transform: translateX(-50px);
                    -moz-transform: translateX(-50px);
                    -ms-transform: translateX(-50px);
                    -o-transform: translateX(-50px);
                    transform: translateX(-50px);
                }
            }
    
            @keyframes anim {
                0% {
                    -webkit-transform: translateX(50px) scale(1.2));
                    -moz-transform: translateX(50px) scale(1.2);
                    -ms-transform: translateX(50px) scale(1.2);
                    -o-transform: translateX(50px) scale(1.2);
                    transform: translateX(50px) scale(1.2);
                }
                50% {
                    -webkit-transform: translateX(0px) scale(.8);
                    -moz-transform: translateX(0px) scale(.8);
                    -ms-transform: translateX(0px) scale(.8);
                    -o-transform: translateX(0px) scale(.8);
                    transform: translateX(0px) scale(.8);
                }
                100% {
                    -webkit-transform: translateX(-50px);
                    -moz-transform: translateX(-50px);
                    -ms-transform: translateX(-50px);
                    -o-transform: translateX(-50px);
                    transform: translateX(-50px);
                }
            }
    
            .container .list {
                position: absolute;
                right: 10px;
                top: 45%;
                z-index: 20;
            }
    
            .container .list li {
                width: 20px;
                height: 20px;
                border: 3px solid transparent;
                background-color: #fff;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                margin-bottom: 10px;
                opacity: 0.5;
                z-index: 20;
            }
    
            .container .list li.current {
                border: 3px solid #fff;
                background-color: #1c1c1c;
                opacity: 1;
                animation: point 1s 0.2s;
            }
    
            @keyframes point {
                0% {
                    transform: scale(.8);
                }
                50% {
                    transform: scale(1.2);
                }
                100% {
                    transform: scale(1);
                }
            }
    
        </style>

    js :

    <script>
        var container = document.getElementById("container");
        var list = document.getElementById("list");
        var box = document.getElementById("box");
        var cons = box.children;
        console.log(cons.length);
        var zIdx = 10;
        var nn = 0;
        var currentPosition = 0;
        //添加小圆点
        var arr = ["red", "blue", "yellow"];
        for (var i = 0; i < cons.length; i++) {
            cons[i].style.backgroundColor = arr[i];
            var li = document.createElement("li");
            list.appendChild(li);
        }
    
        list.children[0].className = "current";
    
        //e.wheelDelta > 0滚轮向下滚动,e.wheelDelta < 0表示滚轮向上滚动
    
        window.onmousewheel = function (e) {
    
            if (e.wheelDelta > 0) {
                currentPosition++;
    
                if (currentPosition > cons.length - 1) {
                    currentPosition = 0;
                }
    
                for (var i = 0; i < cons.length; i++) {
                    cons[i].style.zIndex = 1;
                    list.children[i].className = "";
                    cons[i].className = "con";
                }
    
                console.log(currentPosition);
                cons[currentPosition].style.zIndex = zIdx;
                cons[currentPosition].className = "con active";
                list.children[currentPosition].className = "current";
            } else {
                currentPosition--;
    
                if (currentPosition < 0) {
                    currentPosition = cons.length - 1;
                }
    
                for (var i = 0; i < cons.length; i++) {
                    cons[i].style.zIndex = 1;
                    list.children[i].className = "";
                    cons[i].className = "con";
                }
    
                console.log(currentPosition);
                cons[Math.abs(currentPosition)].style.zIndex = zIdx;
                cons[currentPosition].className = "con active";
                list.children[Math.abs(currentPosition)].className = "current";
    
            }
    
        }
    
    
    </script>

    更多精彩请关注一下微信公众账号:

    这里写图片描述

    展开全文
  • 50多少个 网页加载动画效果(Loading效果),加载中,SVG,加载动画
  • 主要介绍了js实现横向百叶窗效果网页切换动画效果的方法,实例分析了javascript实现百叶窗效果的技巧,需要的朋友可以参考下
  • 本文实例讲述了JS实现超炫网页烟花动画效果的方法。分享给大家供大家参考。具体分析如下: 非常炫的使用JS实现的一个网页烟花燃放动画效果,能适应JS做出这样的动画来 代码如下:<!DOCTYPE html PUBLIC “-//W3C/...
  • 是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效插件。该页面切换特效使用AJAX来动态加载链接内容,在页面加载的时候,使用CSS3来制作非常酷的页面过渡动画效果。插件中使用pushState方法来管理...
  • HTML5 SVG打开页面动画特效是一款卷帘式的渐变过渡效果的网页SVG路径在当前页上打开动画。
  • gear_scrolling 这是用于滚动网页动画。 滚动页面时,页面两侧的齿轮都旋转,似乎正在移动内容。
  • CSS3网页滚动图片元素动画特效是一款WOW.js基于css3动画库属性制作页面在向下滚动的时候,有些元素会产生细小的动画效果。
  • 主要为大家详细介绍了vue实现页面加载动画效果,vue页面出现正在加载的初始页面与实现动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • HTML5网页离子动画效果跟随鼠标移动
  • jQuery+CSS3网页弹性动画过渡全屏翻页特效是一款可以通过点击导航按钮来全屏切换页面,在页面切换时,整个页面以弹性变形的方式过渡到下一个页面
  • 简单窗帘拉开效果网页开场动画代码基于jquery-1.8.2.js制作,模拟窗帘左右拉开动画效果,适用于网站首页或登录页面使用。
  • jQuery仿左右窗帘拉开页面动画特效
  • Bootstrap网页loading加载图标动画特效,一组基于css3属性绘制的加载动画特效,共有12种动画效果。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 72,644
精华内容 29,057
关键字:

网页页面动画