给自己的网页添加动态效果实例

最新推荐文章于 2022-11-10 14:56:53 发布
最新推荐文章于 2022-11-10 14:56:53 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： 网络||工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39813400/article/details/105265705
版权

源代码抄录：


<!-- 加载css样式 -->
<link type="text/css" rel="stylesheet" href="https://www.cnblogs.com/longronglang/custom.css?v=Jy7A6zAuJcmzoU4H2Uq964G/awM=" />


<!-- 鼠标点击特效 -->
 <style type="text/css">      
        * {
            cursor: url('https://www.cnblogs.com/images/cnblogs_com/longronglang/1061549/o_5997836b66d58.png'), auto;
        }
    </style>
<script src="https://blog-static.cnblogs.com/files/longronglang/cursor-effects.js" defer></script>
<!-- 鼠标点击特效end -->




<!--添加立方体-->
<a name="top"></a>
<!--PageBeginHtml Block Begin-->
<!-- 正方体中包含html代码 无法上传文件时，直接写代码-->
<!--旋转正方体 start-->
<div class="wrap">
    <!--包裹所有元素的容器-->
    <div class="cube">
        <!--前面图片 -->
        <div class="out_front">
            <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_c5.jpg" class="pic">
        </div>
        <!--后面图片 -->
        <div class="out_back">
            <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_0.jpg" class="pic">
        </div>
        <!--左面图片 -->
        <div class="out_left">
            <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_3.jpg" class="pic">
        </div>
        <!--右面图片 -->
        <div class="out_right">
            <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_11.jpg" class="pic">
        </div>
        <!--上面图片 -->
        <div class="out_top">
            <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_4.jpg" class="pic">
        </div>
        <!--下面图片 -->
        <div class="out_bottom">
            <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1266753/t_s6.jpg" class="pic">
        </div>

        <!--小正方体 -->
        <span class="in_front">
                <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_01.jpg" class="in_pic">
            </span>
        <span class="in_back">
                 <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_02.jpg" class="in_pic">
            </span>
        <span class="in_left">
                <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_03.jpg" class="in_pic">
            </span>
        <span class="in_right">
                <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_04.jpg" class="in_pic">
            </span>
        <span class="in_top">
                <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_05.jpg" class="in_pic">
            </span>
        <span class="in_bottom">
                <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_06.jpg" class="in_pic">
            </span>
    </div>
</div>

<style>
    /*最外层容器样式*/
    .wrap {
        z-index:9999;/*置于最上层*/
        position: absolute;
        right: 200px;
        top: 100px;
        width: 100px;
        height: 100px;

    }

    /*包裹所有容器样式*/
    .cube {
        width: 50px;
        height: 50px;
        margin: 0 auto;
        transform-style: preserve-3d;
        transform: rotateX(-30deg) rotateY(-80deg);
        animation: rotate linear 20s infinite;
    }

    @-webkit-keyframes rotate {
        from {
            transform: rotateX(0deg) rotateY(0deg);
        }
        to {
            transform: rotateX(360deg) rotateY(360deg);
        }
    }

    .cube div {
        position: absolute;
        width: 200px;
        height: 200px;
        opacity: 0.8;
        transition: all .4s;
    }

    /*定义所有图片样式*/
    .pic {
        width: 200px;
        height: 200px;
    }

    .cube .out_front {
        transform: rotateY(0deg) translateZ(100px);
    }

    .cube .out_back {
        transform: translateZ(-100px) rotateY(180deg);
    }

    .cube .out_left {
        transform: rotateY(-90deg) translateZ(100px);
    }

    .cube .out_right {
        transform: rotateY(90deg) translateZ(100px);
    }

    .cube .out_top {
        transform: rotateX(90deg) translateZ(100px);
    }

    .cube .out_bottom {
        transform: rotateX(-90deg) translateZ(100px);
    }

    /*定义小正方体样式*/
    .cube span {
        display: block;
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 50px;
    }

    .cube .in_pic {
        width: 100px;
        height: 100px;
    }

    .cube .in_front {
        transform: rotateY(0deg) translateZ(50px);
    }

    .cube .in_back {
        transform: translateZ(-50px) rotateY(180deg);
    }

    .cube .in_left {
        transform: rotateY(-90deg) translateZ(50px);
    }

    .cube .in_right {
        transform: rotateY(90deg) translateZ(50px);
    }

    .cube .in_top {
        transform: rotateX(90deg) translateZ(50px);
    }

    .cube .in_bottom {
        transform: rotateX(-90deg) translateZ(50px);
    }

    /*鼠标移入后样式*/
    .cube:hover .out_front {
        transform: rotateY(0deg) translateZ(200px);
    }

    .cube:hover .out_back {
        transform: translateZ(-200px) rotateY(180deg);
    }

    .cube:hover .out_left {
        transform: rotateY(-90deg) translateZ(200px);
    }

    .cube:hover .out_right {
        transform: rotateY(90deg) translateZ(200px);
    }

    .cube:hover .out_top {
        transform: rotateX(90deg) translateZ(200px);
    }

    .cube:hover .out_bottom {
        transform: rotateX(-90deg) translateZ(200px);
    }
</style>


<!--雪花效果 -->
</div><!--end: home 自定义的最大容器 -->
    <div id="page_end_html">
        <div class="Snow">
    <canvas id="Snow"></canvas>
</div>
<!-- 雪花-->
<script src="https://files.cnblogs.com/files/longronglang/mystyle.js"></script>

mystyle.js

(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60);
    };
    window.requestAnimationFrame = requestAnimationFrame;
})();

(function() {
    var flakes = [],
        canvas = document.getElementById("Snow"), //画布ID，与上一步创建的画布对应
        ctx = canvas.getContext("2d"),
        flakeCount = 200,  //雪花数量，数值越大雪花数量越多
        mX = -100,
        mY = -100;

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    function snow() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for (var i = 0; i < flakeCount; i++) {
            var flake = flakes[i],
                x = mX,
                y = mY,
                minDist = 150,  //雪花距离鼠标指针的最小值，小于这个距离的雪花将受到鼠标的排斥
                x2 = flake.x,
                y2 = flake.y;

            var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
                dx = x2 - x,
                dy = y2 - y;

            if (dist < minDist) {
                var force = minDist / (dist * dist),
                    xcomp = (x - x2) / dist,
                    ycomp = (y - y2) / dist,
                    deltaV = force / 2;

                flake.velX -= deltaV * xcomp;
                flake.velY -= deltaV * ycomp;

            } else {
                flake.velX *= .98;
                if (flake.velY <= flake.speed) {
                    flake.velY = flake.speed
                }
                flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
            }

            ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")";  //雪花颜色
            flake.y += flake.velY;
            flake.x += flake.velX;

            if (flake.y >= canvas.height || flake.y <= 0) {
                reset(flake);
            }

            if (flake.x >= canvas.width || flake.x <= 0) {
                reset(flake);
            }

            ctx.beginPath();
            ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
            ctx.fill();
        }
        requestAnimationFrame(snow);
    };

    function reset(flake) {
        flake.x = Math.floor(Math.random() * canvas.width);
        flake.y = 0;
        flake.size = (Math.random() * 3) + 2;  //加号后面的值，雪花大小，为基准值，数值越大雪花越大
        flake.speed = (Math.random() * 1) + 0.5;  //加号后面的值，雪花速度，为基准值，数值越大雪花速度越快
        flake.velY = flake.speed;
        flake.velX = 0;
        flake.opacity = (Math.random() * 0.5) + 0.3;  //加号后面的值，为基准值，范围0~1
    }

    function init() {
        for (var i = 0; i < flakeCount; i++) {
            var x = Math.floor(Math.random() * canvas.width),
                y = Math.floor(Math.random() * canvas.height),
                size = (Math.random() * 3) + 2,  //加号后面的值，雪花大小，为基准值，数值越大雪花越大
                speed = (Math.random() * 1) + 0.5,  //加号后面的值，雪花速度，为基准值，数值越大雪花速度越快
                opacity = (Math.random() * 0.5) + 0.3;  //加号后面的值，为基准值，范围0~1

            flakes.push({
                speed: speed,
                velY: speed,
                velX: 0,
                x: x,
                y: y,
                size: size,
                stepSize: (Math.random()) / 30 * 1,  //乘号后面的值，雪花横移幅度，为基准值，数值越大雪花横移幅度越大，0为竖直下落
                step: 0,
                angle: 180,
                opacity: opacity
            });
        }

        snow();
    };

    document.addEventListener("mousemove", function(e) {
        mX = e.clientX,
        mY = e.clientY
    });
    window.addEventListener("resize", function() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    });
    init();
})();

cursor-effects.js:

class Circle {
  constructor({ origin, speed, color, angle, context }) {
    this.origin = origin
    this.position = { ...this.origin }
    this.color = color
    this.speed = speed
    this.angle = angle
    this.context = context
    this.renderCount = 0
  }

  draw() {
    this.context.fillStyle = this.color
    this.context.beginPath()
    this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
    this.context.fill()
  }

  move() {
    this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
    this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
    this.renderCount++
  }
}

class Boom {
  constructor ({ origin, context, circleCount = 10, area }) {
    this.origin = origin
    this.context = context
    this.circleCount = circleCount
    this.area = area
    this.stop = false
    this.circles = []
  }

  randomArray(range) {
    const length = range.length
    const randomIndex = Math.floor(length * Math.random())
    return range[randomIndex]
  }

  randomColor() {
    const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
    return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
  }

  randomRange(start, end) {
    return (end - start) * Math.random() + start
  }

  init() {
    for(let i = 0; i < this.circleCount; i++) {
      const circle = new Circle({
        context: this.context,
        origin: this.origin,
        color: this.randomColor(),
        angle: this.randomRange(Math.PI - 1, Math.PI + 1),
        speed: this.randomRange(1, 6)
      })
      this.circles.push(circle)
    }
  }

  move() {
    this.circles.forEach((circle, index) => {
      if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
        return this.circles.splice(index, 1)
      }
      circle.move()
    })
    if (this.circles.length == 0) {
      this.stop = true
    }
  }

  draw() {
    this.circles.forEach(circle => circle.draw())
  }
}

class CursorSpecialEffects {
  constructor() {
    this.computerCanvas = document.createElement('canvas')
    this.renderCanvas = document.createElement('canvas')

    this.computerContext = this.computerCanvas.getContext('2d')
    this.renderContext = this.renderCanvas.getContext('2d')

    this.globalWidth = window.innerWidth
    this.globalHeight = window.innerHeight

    this.booms = []
    this.running = false
  }

  handleMouseDown(e) {
    const boom = new Boom({
      origin: { x: e.clientX, y: e.clientY },
      context: this.computerContext,
      area: {
        width: this.globalWidth,
        height: this.globalHeight
      }
    })
    boom.init()
    this.booms.push(boom)
    this.running || this.run()
  }

  handlePageHide() {
    this.booms = []
    this.running = false
  }

  init() {
    const style = this.renderCanvas.style
    style.position = 'fixed'
    style.top = style.left = 0
    style.zIndex = '999999999999999999999999999999999999999999'
    style.pointerEvents = 'none'

    style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
    style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight

    document.body.append(this.renderCanvas)

    window.addEventListener('mousedown', this.handleMouseDown.bind(this))
    window.addEventListener('pagehide', this.handlePageHide.bind(this))
  }

  run() {
    this.running = true
    if (this.booms.length == 0) {
      return this.running = false
    }

    requestAnimationFrame(this.run.bind(this))

    this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
    this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)

    this.booms.forEach((boom, index) => {
      if (boom.stop) {
        return this.booms.splice(index, 1)
      }
      boom.move()
      boom.draw()
    })
    this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
  }
}

const cursorSpecialEffects = new CursorSpecialEffects()
cursorSpecialEffects.init()

CSS:

#Snow{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(125,137,95,0.1);
    pointer-events: none;
}
.feedbackCon img:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
 
.feedbackCon img {
border-radius: 100px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

#back-to-top {
    background-color: #00CD00;
    box-shadow: 0 0 6px #00CD00;
    color: #444444;
    padding: 10px 10px;
    position: fixed;
    right: 50px;
    cursor: pointer;
}
#div_digg{
  position:fixed;
  bottom:0px;
  width:120px;
  margin-right:60px;
  right:60px;
  margin-bottom:1px;
  border:2px solid #085;
  padding:10px;
  background-color:#fff;
  opacity:0.3;
  border-radius:5px 5px 5px 5px !important;
  box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
  transition-duration: 0.5s;
}
#div_digg:hover{
  opacity:1;
}
tester_sz
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 动态网页实例 —— 文档处理
cccloveforever的博客
05-16 1103
Document对象用于控制窗口或框架中的文档。在支持传统对象模型的早期浏览器中，只能对文档进行较少的操作。Document对象的主要属性都与标签相关，如背景、链接、文本颜色等:而在DOM下，则可对文档进行更多的操作。由于Document对象的内容较多，将从本章开始分几章进行介绍。本章主要介绍文档颜色设置、文档修改时间、DOM1中的相关属性、对 HTML元素属性的访问等内容。
JavaScript 动态网页实例 —— 日期时间应用
最新发布
cccloveforever的博客
05-03 1109
日期和时间也是网站设计中不可或缺的重要内容。本章基于JavaScript中Date 对象的基本概念，介绍日期和时间的各种应用。鉴于其他章节已间接涉及部分内容，本章主要介绍各类不同时钟的设计，以及各种不同形式的时间的实现，同时，还涉及日历的设计和倒计时效果的实现。
一个简单的动态网站实例
10-20
提供详细步骤， 一个简单的动态网站实例，ppt课件
Javascript动态网页（实例版）
12-02
java Javascript 网页 光盘代码 Javascript动态网页（实例版）
动态网页实例.rar
06-22
动态网页实例.rar
JavaScript动态网页编程实例版(完整版)
07-15
JavaScript动态网页编程实例版.书中所有源代码
动态网页php例子,新手入门：初学动态网页PHP的18个例子_php
weixin_34792641的博客
03-16 450
本站原创内容,转载请注明出处搞代码网。如何创建我们的第一个php页面呢？非常简单的！选择我们使用的一个最好的设计工具，当然你也可以 只使用记事本。创建之后记得要保存为扩展名为PHP的文件，然后传到我们的服务器上。在编写PHP程序之前通常我们需要配置我们的环境，也就是说服务器要支持PHP才能行啊一、PHP的基本结构：使用Include函数Your page Subject and domain na...
动态网页 —— selenium+案例
qq_46924416的博客
05-18 951
在上一次博客动态网页——selenium基础中我们在最后有提到frame的窗口切换，但是并没有细讲，所以今天就是用selenium来爬取一个qq邮箱，详细讲解selenium库@中frame的运用。 1、使用selenium总是出现定位错误？ 很多人在动态网页爬取的时候使用selenium库的时候会遇到 这种错误，可是反复检查网页源代码，发现元素明明就在那里，用firebug也可以看到 ，但是就是不可以去定位它，这个时候我们就要考虑一下我们的窗口有没有切换了！ 因为webDriver只能在一个页面上对元
一个JQuery插件,为页面的标题添加动态效果
weixin_34090643的博客
06-26 565
1. 功能: 为页面的标题添加滚动或切换效果,类似于WebQQ中来消息后标题栏的效果. 2. 调用示例: jQuery(function($){ $.animateTitle.scroll(300); //$.animateTitle.scroll(300,true,'title2','title3'); ...
Dreamweaver怎么给网站添加一个动态横幅效果?
09-24
Dreamweaver怎么给网站添加一个动态横幅效果？Dreamweaver中想要设计一个动态横幅，该怎么设计呢？下面我们就来看看详细的教程，需要的朋友可以参考下
css3动画文艺青年个人blog博客网页模板
09-14
基于bootstrap的动画文艺青年个人blog博客网页模板，移动端支持友好
为网页添加特效(转)
cqwf95925的博客
07-01 445
制作弹出式窗口有许多网页在打开的时候，会弹出一个较小的窗口，显示广告或一些最新信息。这种弹出式窗口制作很简单，只要在网页代码的〈body〉标签后面插入类似代码即可： window.open(′url′,′窗口名′,′属性列...
动态网页开发基础
yananye的博客
03-08 645
什么是B/S架构 随着internet的普及与大规模应用，受制于C/S架构的应用程序存在很多缺点，B/S（browser Server，浏览器/服务器）架构随之应运而生，基于B/S架构的Web应用程序由于不在受安装客户端的限制，访问极其简便，因此越来越多的企业采用，B/S架构的出现不上对C/S架构的否定，而是对C/S架构的改进。 在B/S架构下，应用系统完全放在了服务器上，并通过应用服务器同数据库服务器进行通信系统界面通过浏览器展现。 对于用户而言，只要能够连接internet。安装完浏览器就可以访问系统了
怎么添加动态html的效果,javascript动态效果
weixin_42522552的博客
06-03 976
javascript如何实现动态效果现在我想要实现当鼠标的小箭头移动到网页导航条中的某个栏目的时候会自JS动态效果，参考如下： 浮动图片var step = 1; // 移动的像素var y = -1; // 垂直移动的方向，-1表示向上，1表示向下var x = 1; // 水平移动的方向，-1表示向左，1表示向右function myFloat(){var img = document.get...
运用js在网页里面加些有意思的小特效（1）//鼠标点击特效
xiaozhedeitzhilu的博客
10-29 1250
话不多说，直接上码. < script type=“text/javascript”> onload = function() { var click_cnt = 0; var $html = document.getElementsByTagName(“html”)[0]; var $body = document.getElementsByTagName(“body”)[0]; $...
怎么让html网页动态效果,从html制作动态网页
weixin_39766014的博客
06-03 2517
要将ajax中的数据转换为另一个标记，您可以执行类似这样的操作var page_request = false;function ajax_request(url){if (window.XMLHttpRequest) // if Mozilla, Safari etcpage_request = new XMLHttpRequest()else if (window.ActiveXObject)...
前端干货 ： 如何为 Web 添加动画效果
Draven
03-22 1372
这干货绝对干！找了好久才找到一本这么好的书本，收藏！ 书名：CSS animation 101 作者：Donovan Hutchinson 时间：2018 简介：如何为 Web 添加动画效果。 网址： https://github.com/cssanimation/css-animation-101 中文版https://github.com/H-Wakanda/css-...
css行内样式动态添加背景图片及样式
weixin_53474595的博客
11-10 2981
有时候需要循环动态添加背景图片，可以采用以下方法，重点是url后面别忘了加'+'
Dreamweaver高级网页制作：行为与动态效果
在网页设计中，“行为”是一个重要的概念，它允许设计师添加和控制对象的各种动态响应，如事件和动作的执行。行为通常涉及到JavaScript脚本，通过这些脚本可以实现用户与网页的互动。在PowerPoint中，可以通过“行为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值