11个非常炫酷的网页样式特效【附实现代码】

在这之前，我们也跟大家分享很多很多关于网页特效的一些实现源码，今天，我们再跟大家分享一些网页特效源码，希望对大家有帮助。

1、evanyou 效果-彩带的实现，效果如下

注：这个主要用的是 Canvas 画布实现的，点击背景绘制新的图形，代码如下： 

 /*CSS代码:*/

2、返回顶部特效（滚动条上移或者点击会自动隐藏和显示），效果如下:

代码如下：

//Html代码: body>
回到顶部 
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
//CSS样式 #back-to-top { position:fixed; right:50px; z-index:9; width:70px; height:900px; background:url('/Content/Images/scroll.png'); transition:0.5s; cursor:pointer; } //JS部分:

3、左下角探头效果

 
PS：这个图片在网页的左下角，鼠标移动上去探头效果，代码如下
  
 //CSS代码
4、文字翻转效果（点击翻转，一开始加载页面也翻转）

代码如下：
  
    
                日月君地带            
    
      日月君地带|
  
 //CSS代码
typed.min.js 代码:
! function(t) {  "use strict";  var s = function(s, e) {    this.el = t(s), this.options = t.extend({}, t.fn.typed.defaults, e), this.isInput = this.el.is("input"), this.attr = this.options.attr, this.showCursor = this.isInput ? !1 : this.options.showCursor, this.elContent = this.attr ? this.el.attr(this.attr) : this.el.text(), this.contentType = this.options.contentType, this.typeSpeed = this.options.typeSpeed, this.startDelay = this.options.startDelay, this.backSpeed = this.options.backSpeed, this.backDelay = this.options.backDelay, this.stringsElement = this.options.stringsElement, this.strings = this.options.strings, this.strPos = 0, this.arrayPos = 0, this.stopNum = 0, this.loop = this.options.loop, this.loopCount = this.options.loopCount, this.curLoop = 0, this.stop = !1, this.cursorChar = this.options.cursorChar, this.shuffle = this.options.shuffle, this.sequence = [], this.build()  };  s.prototype = {    constructor: s,    init: function() {      var t = this;      t.timeout = setTimeout(function() {        for(var s = 0; s < t.strings.length; ++s) t.sequence[s] = s;        t.shuffle && (t.sequence = t.shuffleArray(t.sequence)), t.typewrite(t.strings[t.sequence[t.arrayPos]], t.strPos)      }, t.startDelay)    },    build: function() {      var s = this;      if(this.showCursor === !0 && (this.cursor = t('' + this.cursorChar + ""), this.el.after(this.cursor)), this.stringsElement) {        s.strings = [], this.stringsElement.hide();        var e = this.stringsElement.find("p");        t.each(e, function(e, i) {          s.strings.push(t(i).html())        })      }      this.init()    },    typewrite: function(t, s) {      if(this.stop !== !0) {        var e = Math.round(70 * Math.random()) + this.typeSpeed,          i = this;        i.timeout = setTimeout(function() {          var e = 0,            r = t.substr(s);          if("^" === r.charAt(0)) {            var o = 1;            /^\^\d+/.test(r) && (r = /\d+/.exec(r)[0], o += r.length, e = parseInt(r)), t = t.substring(0, s) + t.substring(s + o)          }          if("html" === i.contentType) {            var n = t.substr(s).charAt(0);            if("<" === n || "&" === n) {              var a = "",                h = "";              for(h = "<" === n ? ">" : ";"; t.substr(s).charAt(0) !== h;) a += t.substr(s).charAt(0), s++;              s++, a += h            }          }          i.timeout = setTimeout(function() {            if(s === t.length) {              if(i.options.onStringTyped(i.arrayPos), i.arrayPos === i.strings.length - 1 && (i.options.callback(), i.curLoop++, i.loop === !1 || i.curLoop === i.loopCount)) return;              i.timeout = setTimeout(function() {                i.backspace(t, s)              }, i.backDelay)            } else {              0 === s && i.options.preStringTyped(i.arrayPos);              var e = t.substr(0, s + 1);              i.attr ? i.el.attr(i.attr, e) : i.isInput ? i.el.val(e) : "html" === i.contentType ? i.el.html(e) : i.el.text(e), s++, i.typewrite(t, s)            }          }, e)        }, e)      }    },    backspace: function(t, s) {      if(this.stop !== !0) {        var e = Math.round(70 * Math.random()) + this.backSpeed,          i = this;        i.timeout = setTimeout(function() {          if("html" === i.contentType && ">" === t.substr(s).charAt(0)) {            for(var e = "";              "<" !== t.substr(s).charAt(0);) e -= t.substr(s).charAt(0), s--;            s--, e += "<"          }          var r = t.substr(0, s);          i.attr ? i.el.attr(i.attr, r) : i.isInput ? i.el.val(r) : "html" === i.contentType ? i.el.html(r) : i.el.text(r), s > i.stopNum ? (s--, i.backspace(t, s)) : s <= i.stopNum && (i.arrayPos++, i.arrayPos === i.strings.length ? (i.arrayPos = 0, i.shuffle && (i.sequence = i.shuffleArray(i.sequence)), i.init()) : i.typewrite(i.strings[i.sequence[i.arrayPos]], s))        }, e)      }    },    shuffleArray: function(t) {      var s, e, i = t.length;      if(i)        for(; --i;) e = Math.floor(Math.random() * (i + 1)), s = t[e], t[e] = t[i], t[i] = s;      return t    },    reset: function() {      var t = this;      clearInterval(t.timeout);      var s = this.el.attr("id");      this.el.after(''), this.el.remove(), "undefined" != typeof this.cursor && this.cursor.remove(), t.options.resetCallback()    }  }, t.fn.typed = function(e) {    return this.each(function() {      var i = t(this),        r = i.data("typed"),        o = "object" == typeof e && e;      r || i.data("typed", r = new s(this, o)), "string" == typeof e && r[e]()    })  }, t.fn.typed.defaults = {    strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"],    stringsElement: null,    typeSpeed: 0,    startDelay: 0,    backSpeed: 0,    shuffle: !1,    backDelay: 500,    loop: !1,    loopCount: !1,    showCursor: !0,    cursorChar: "|",    attr: null,    contentType: "html",    callback: function() {},    preStringTyped: function() {},    onStringTyped: function() {},    resetCallback: function() {}  }}(window.jQuery);
5、在离开网页时，触发事件（这里以改变标题为例）

注:这里鼠标移开时，同时改变网页 title 和 icon 图标，代码如下：
        //JS部分
6、移入网页时改变鼠标的样式

PS:这个只要在样式里面设置即可，也就是移入时显示一张图片，代码如下：
//css如下所示
7、文字向上滚动效果（PS：鼠标悬停停止滚动）



代码如下:

  
 我是滚动内容
 你来抓我啊
 嗖嗖嗖
 2333333333333333333333333 
  

8、 鼠标移入效果

鼠标移入，使区域旋转变色，代码如下：

//Style样式 //Html标签
  
    
 11111111111111111 
    
 222222222222222 
    
 333333333333333 
    
 4444444444444444 
  
 //Script

9、旋转星空，点击放烟花效果 

实现代码:

    
    
      
 
    
  
 //CSS代码 canvas { position: fixed; width: 100%; height: 100%; z-index: -1; } //引入JS

universe.js

var canvas = document.getElementById('canvas'),  ctx = canvas.getContext('2d'),  w = canvas.width = window.innerWidth,  h = canvas.height = window.innerHeight,  hue = 217,  stars = [],  count = 0,  maxStars = 1300; //星星数量 var canvas2 = document.createElement('canvas'),  ctx2 = canvas2.getContext('2d');canvas2.width = 100;canvas2.height = 100;var half = canvas2.width / 2,  gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);gradient2.addColorStop(0.025, '#CCC');gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');gradient2.addColorStop(1, 'transparent');ctx2.fillStyle = gradient2;ctx2.beginPath();ctx2.arc(half, half, half, 0, Math.PI * 2);ctx2.fill(); // End cache function random(min, max) {  if(arguments.length < 2) {    max = min;    min = 0;  }  if(min > max) {    var hold = max;    max = min;    min = hold;  }  return Math.floor(Math.random() * (max - min + 1)) + min;} function maxOrbit(x, y) {  var max = Math.max(x, y),    diameter = Math.round(Math.sqrt(max * max + max * max));  return diameter / 2; //星星移动范围，值越大范围越小， }var Star = function() {  this.orbitRadius = random(maxOrbit(w, h));  this.radius = random(60, this.orbitRadius) / 8; //星星大小      this.orbitX = w / 2;  this.orbitY = h / 2;  this.timePassed = random(0, maxStars);  this.speed = random(this.orbitRadius) / 50000; //星星移动速度      this.alpha = random(2, 10) / 10;  count++;  stars[count] = this;}Star.prototype.draw = function() {  var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,    y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,    twinkle = random(10);  if(twinkle === 1 && this.alpha > 0) {    this.alpha -= 0.05;  } else if(twinkle === 2 && this.alpha < 1) {    this.alpha += 0.05;  }  ctx.globalAlpha = this.alpha;  ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);  this.timePassed += this.speed;}for(var i = 0; i < maxStars; i++) {  new Star();} function animation() {  ctx.globalCompositeOperation = 'source-over';  ctx.globalAlpha = 0.5; //尾巴      ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';  ctx.fillRect(0, 0, w, h) ctx.globalCompositeOperation = 'lighter';  for(var i = 1, l = stars.length; i < l; i++) {    stars[i].draw();    canvas2.style.cssText = "display:none";  };  window.requestAnimationFrame(animation);}animation();

10、音乐播放组件

   

PS：此插件由迅雷提供，实现如下:

  
[ti:断桥残雪][ar:Vae][al:断桥残雪（EP）][00:01.90]Vae - 断桥残雪[00:05.16]词、曲 编曲：许嵩（Vae）[00:08.16][00:24.99]寻不到花的折翼枯叶蝶[00:30.09]永远也看不见凋谢[00:36.90]江南夜色下的小桥屋檐[00:42.04]读不懂塞北的荒野[00:48.94]梅开时节因寂寞而缠绵[00:54.07]春归后又很快湮灭[01:01.21]独留我赏烟花飞满天[01:06.03]摇曳后就随风飘远[01:13.11]断桥是否下过雪[01:15.83]我望着湖面[01:18.77]水中寒月如雪[01:21.78]指尖轻点融解[01:24.81]断桥是否下过雪[01:27.69]又想起你的脸[01:30.66]若是无缘再见[01:33.75]白堤柳帘垂泪好几遍[02:03.83]寻不到花的折翼枯叶蝶[02:09.12]永远也看不见凋谢[02:15.84]江南夜色下的小桥屋檐[02:21.17]读不懂塞北的荒野[02:28.01]梅开时节因寂寞而缠绵[02:33.09]春归后又很快湮灭[02:39.79]独留我赏烟花飞满天[02:45.19]摇曳后就随风飘远[02:52.06]断桥是否下过雪[02:54.83]我望着湖面[02:57.80]水中寒月如雪[03:00.82]指尖轻点融解[03:03.85]断桥是否下过雪[03:06.83]又想起你的脸[03:09.90]若是无缘再见[03:12.74]白堤柳帘垂泪好几遍
//JS部分//引入JS部分

11、点击弹出指定的内容 

PS:点击弹出显示内容，过一会自动消失, 说白了也就是一个弹出内容插件，比 alert 好看些，代码如下：

 //JS代码

利用上面的插件还可以实现 confirm 选择效果

实现代码：

layer.confirm('确定要删除?', {  icon: 3,  title: '提示'}, function() {  alert("当然确定了~");});

本文完~