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

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

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

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

<canvas id="evanyou" width="1920" height="934"></canvas> /*CSS代码:*/<style type="text/css">  #evanyou {    position: fixed;    width: 100%;    height: 100%;    left: 0;    top: 0;  }</style><script>  var c = document.getElementById('evanyou'),    x = c.getContext('2d'),    pr = window.devicePixelRatio || 1,    w = window.innerWidth,    h = window.innerHeight,    f = 90,    q, m = Math,    r = 0,    u = m.PI * 2,    v = m.cos,    z = m.random;  c.width = w * pr;  c.height = h * pr;  x.scale(pr, pr);  x.globalAlpha = 0.6;  function evanyou() {    x.clearRect(0, 0, w, h) q = [{      x: 0,      y: h * .7 + f    }, {      x: 0,      y: h * .7 - f    }]    while(q[1].x <      w + f) d(q[0], q[1])  }  function d(i, j) {    x.beginPath() x.moveTo(i.x, i.y) x.lineTo(j.x, j.y) var k = j.x + (z() * 2 - 0.25) * f,      n = y(j.y) x.lineTo(k, n) x.closePath() r -= u / -50 x.fillStyle = '#' + (v(r) * 127 + 128 << 16 | v(r + u / 3) * 127 + 128 << 8 | v(r + u / 3 * 2) * 127 + 128).toString(16) x.fill() q[0] = q[1] q[1] = {        x: k,        y: n      }  }  function y(p) {    var t = p + (z() * 2 - 1.1) * f    return(t > h || t <      0) ? y(p) : t  }  document.onclick = e vanyou document.ontouchstart = e vanyou evanyou();</script>

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

代码如下：

//Html代码: body><!--回到顶部--><div id="back-to-top" class="red" data-scroll="body" style="top:-46px;color:red;">回到顶部 </div><!--撑开网页代码--><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><!--以上是撑开网页代码-->//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部分:<script src="~/Scripts/jquery-1.8.2.min.js"></script><script type="text/javascript">  window.onload = function() {    // 利用 data-scroll 属性，滚动到任意 dom 元素               $.scrollto = function(scrolldom, scrolltime) {      $(scrolldom).click(function() {        var scrolltodom = $(this).attr("data-scroll");        $(this).addClass("active").siblings().removeClass("active");        $('html, body').animate({          scrollTop: $(scrolltodom).offset().top        }, scrolltime);        return false;      });    };    //判断位置控制 返回顶部的显隐    if($(window).width() > 800) {      //如果窗体的宽度大于800      var backTo = $("#back-to-top");      //获取back-to-top对象      var backHeight = $(window).height() - 980 + 'px';      //让window高度减980      $(window).scroll(function() {        if($(window).scrollTop() > 700 && backTo.css('top') === '-900px') {          backTo.css('top', backHeight);        } else if($(window).scrollTop() <= 700 && backTo.css('top') !== '-900px') {          backTo.css('top', '-900px');        }      });    }    //启用                $.scrollto("#back-to-top", 800);  }</script>

3、左下角探头效果
 
 
PS：这个图片在网页的左下角，鼠标移动上去探头效果，代码如下
<div class="xm"> <img src="/Content/Images/xiaomai.png" /> </div> //CSS代码<style>  .xm {    position: fixed;    bottom: 0;    left: 0;    z-index: 1;    font-size: 0;    transition: all .3s ease-in-out;    transform: translateY(3px);  }    .xm:hover {    -webkit-transform: translateY(0);    -ms-transform: translateY(0);  }    .xm img {    width: 50px;  }</style>
4、文字翻转效果（点击翻转，一开始加载页面也翻转）
 
代码如下：
<header class="header-description">  <div id="site-header">    <h1>                <a href="@Url.Action("JianJIe", "Home")" title="Anneke.cn">日月君地带</a>            </h1>    <p class="typed">      <a href="@Url.Action(" JianJIe ", "Home ")" title="Anneke.cn">日月君地带</a><span class="typed-cursor">|</span></p>  </div></header> //CSS代码<style type="text/css">  #site-header {    font-size: 40px !important;    font-weight: 700;    z-index: 1;    text-align: center;    position: relative;    top: 180px;    font-family: kilsonburg, "Avenir Next", Helvetica, Arial, "Lantinghei SC", "Microsoft YaHei", sans-serif;    font-size: 34px;    text-shadow: 0 1px 1px #47456d;    margin-bottom: 130px;    animation: show-site-title 1s ease-out;    -o-animation: show-site-title 1s ease-out;    -moz-animation: show-site-title 1s ease-out;    -webkit-animation: show-site-title 1s ease-out;  }    #site-header h1 {    display: none;  }    #site-header a {    color: #fff;    font-weight: 400;  }    body {    background-color: #0094ff;  }</style><script>  $(document).ready(function($) {    $(".typed a").typed({      strings: ["这里是地狱之门", "日月君地带"],      typeSpeed: 30,      backSpeed: 30,      backDelay: 700    });  });  //PS：需要引入两个文件：一个是jquery-1.8.2.min.js文件，一个是 typed.min.js文件（PS：自定义的，下面会贴出来）</script>
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('<span class="typed-cursor">' + this.cursorChar + "</span>"), 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('<span id="' + s + '"/>'), 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 图标，代码如下：
<head>  <meta name="viewport" content="width=device-width" />  <title>IT发烧友，一个真正的技术交流群</title>  <link rel="shortcut icon" href="/Content/Images/icon.png"> </head> //JS部分<script src="~/Scripts/jquery-1.8.2.min.js"></script><script>  window.onload = function() {    var OriginTitile = document.title;    var titleTime;    document.addEventListener('visibilitychange', function() {      if(document.hidden) {        $('[rel="shortcut icon"]').attr('href', "/Content/Images/fail.ico");        document.title = '(●—●)喔哟，崩溃啦！';        clearTimeout(titleTime);      } else {        $('[rel="shortcut icon"]').attr('href', "/Content/Images/icon.png");        document.title = '(/≧▽≦/)咦！又好了！' + OriginTitile;        titleTime = setTimeout(function() {          document.title = OriginTitile;        }, 2000);      }    });  }</script>
6、移入网页时改变鼠标的样式
 
PS:这个只要在样式里面设置即可，也就是移入时显示一张图片，代码如下：
//css如下所示<style>  abbr,  acronym,  address,  applet,  article,  aside,  audio,  b,  big,  blockquote,  body,  canvas,  caption,  center,  cite,  code,  dd,  del,  details,  dfn,  dl,  dt,  em,  embed,  fieldset,  figcaption,  figure,  footer,  form,  h1,  h2,  h3,  h4,  h5,  h6,  header,  html,  iframe,  img,  ins,  kbd,  label,  legend,  li,  mark,  menu,  nav,  object,  ol,  output,  p,  pre,  q,  ruby,  s,  samp,  p,  small,  span,  strike,  strong,  sub,  summary,  sup,  table,  tbody,  td,  tfoot,  th,  thead,  time,  tr,  tt,  u,  ul,  var,  video {    margin: 0;    padding: 0;    cursor: url('/Content/Image/cursor.ico'), auto;  }</style>
7、文字向上滚动效果（PS：鼠标悬停停止滚动）
 
 
 
代码如下:
 
<div align="center" id="demo">  <div id="demo1"> 我是滚动内容<br/> 你来抓我啊<br/> 嗖嗖嗖<br/> 2333333333333333333333333 </div>  <div id="demo2"></div></div><style>  #demo {    overflow: hidden;    height: 200px;    width: 250px;    border: 1px solid #6699cc;    font-size: 14px;    color: #336699;    line-height: 22px;    text-align: left;    padding: 10px;  }</style><script>  //JS代码:   var demo = document.getElementById("demo");  var demo1 = document.getElementById("demo1");  var demo2 = document.getElementById("demo2");  var speed = 30;  //滚动速度值,值越大速度越慢  var nnn = 200 / demo1.offsetHeight;  for(i = 0; i < nnn; i++) {    demo1.innerHTML += "<br />" + demo1.innerHTML  }  demo2.innerHTML = d emo1.innerHTML  //克隆demo2为demo1   function Marquee() {    if(demo2.offsetTop - demo.scrollTop <= 0)      //当滚动至demo1与demo2交界时,demo跳到最顶端      demo.scrollTop -= demo1.offsetHeight    else {      demo.scrollTop++ //如果是横向的 将 所有的 height top 改成 width left     }  }  var MyMar = s etInterval(Marquee, speed);  //设置定时器,鼠标经过时清除定时器达到滚动停止的目的   demo.onmouseover = f unction() {    clearInterval(MyMar)  }  //鼠标移开时重设定时器  demo.onmouseout = f unction() {    MyMar = s etInterval(Marquee, speed)  }</script>

8、 鼠标移入效果

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

//Style样式<link href="~/Content/amazeui.min.css" rel="stylesheet" /><style type="text/css">  #XuanZhuan li {    width: 200px;    height: 50px;    background-color: pink;    margin-left: 15px;    position: relative;    float: left;    list-style: none;    margin-top: 15px;  }    div {    width: 470px;  }    #XuanZhuan li:hover {    cursor: pointer;  }</style> //Html标签<div>  <ul id="XuanZhuan">    <li> 11111111111111111 </li>    <li> 222222222222222 </li>    <li> 333333333333333 </li>    <li> 4444444444444444 </li>  </ul></div> //Script<script src="~/Scripts/jquery-1.8.2.min.js"></script><script type="text/javascript">  //在友情链接页面，鼠标放在li上,li旋转效果          $(function() {    $("#XuanZhuan li").hover(function() {      $(this).css("background-color", "yellow");      $(this).attr("class", "am-animation-spin");    }, function() {      $(this).css("background-color", "pink");      $(this).attr("class", "");    });  })</script>

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

实现代码:

<div> <canvas id="canvas"></canvas> <canvas id="snow"></canvas>  <div class="am-g" style="position: fixed; bottom: 0px;">    <div class="am-u-sm-12">      <div style="z-index: 9999" id="player" class="aplayer"> </div>    </div>  </div></div> //CSS代码 canvas { position: fixed; width: 100%; height: 100%; z-index: -1; } //引入JS<script src="~/Content/assets/js/jquery.min.js"></script><script src="~/Scripts/Blog/universe.js"></script><!--旋转背景--><script src="~/Scripts/Blog/Fireworks.js"></script><!--点击放烟花-->

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：此插件由迅雷提供，实现如下:

<div id="player1" class="aplayer">  <pre class="aplayer-lrc-content">[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]白堤柳帘垂泪好几遍</pre></div>//JS部分<script type="text/javascript">  //初始化APlayer音乐播放器插件。  var ap = new APlayer({    element: document.getElementById('player1'),    narrow: false,    autoplay: false, //是否自动播放    showlrc: true, //是否显示歌词    theme: '#66B7FF', //主题颜色    music: {      title: '断桥残雪',      author: '许嵩大人',      url: '/Content/Music/许嵩 - 断桥残雪.mp3',      pic: '/Content/Music/dqcx.jpg',    }  });  ap.init();</script>//引入JS部分<script src="~/Scripts/jquery-1.8.2.min.js"></script><link href="//cdn.bootcss.com/aplayer/1.4.8/APlayer.min.css" rel="stylesheet"><script src="//cdn.bootcss.com/aplayer/1.4.8/APlayer.min.js"></script>

11、点击弹出指定的内容 

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

<input type="button" value="显示获取到的内容" id="btn1" /> //JS代码<script src="~/Scripts/jquery-1.8.2.min.js"></script><script src="~/Scripts/layer/layer.js"></script><script type="text/javascript">  $(function() {    $("#btn1").click(function() {      layer.msg("我是弹出的内容");    });  })</script>

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

实现代码：

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

本文完~