网页样式——各种炫酷效果及实现代码

点击上方“程序人生”,选择“置顶公众号”

第一时间关注程序猿(媛)身边的故事


1.evanyou 效果-彩带的实现,效果如下


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

/*Html代码:*/
<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>

/*JS代码:*/
// evanyou效果
       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 = evanyou
       document.ontouchstart = evanyou
       evanyou();


View Code

 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>


View Code

3. 左下角探头效果



PS:这个图片在网页的左下角,鼠标移动上去探头效果,代码如下

//Html代码
<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>


View Code

4. 文字翻转效果(点击翻转,一开始加载页面也翻转)


代码如下:

//Html代码
<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:自定义的,下面会贴出来)


View Code

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);


View Code

5. 在离开网页时,触发事件(这里以改变标题为例)

注:这里鼠标移开时,同时改变网页 title 和 icon 图标,代码如下

//Head部分
<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>


View Code

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, section, 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>


View Code

7. 文字向上滚动效果(PS:鼠标悬停停止滚动)

代码如下:

//HTML代码
<div align="center" id="demo">
           <div id="demo1">
           我是滚动内容<br/>
           你来抓我啊<br/>
           嗖嗖嗖<br/>
           2333333333333333333333333
           </div>
           <div id="demo2"></div>
       </div>    
//CSS代码:
#demo{
           overflow:hidden;
           height:200px;
           width:250px;
           border:1px solid #6699cc;
           font-size:14px;
           color:#336699;
           line-height:22px;
           text-align:left;
           padding:10px;
       }
//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 = demo1.innerHTML    //克隆demo2为demo1
function Marquee(){
   if(demo2.offsetTop-demo.scrollTop<=0)    //当滚动至demo1与demo2交界时
       demo.scrollTop-=demo1.offsetHeight    //demo跳到最顶端
   else{
       demo.scrollTop++     //如果是横向的 将 所有的 height top 改成 width left
   }
}
var MyMar = setInterval(Marquee,speed);        //设置定时器
demo.onmouseover = function(){clearInterval(MyMar)}    //鼠标经过时清除定时器达到滚动停止的目的
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}    //鼠标移开时重设定时器


View Code

8. 鼠标移入效果

PS:鼠标移入,使区域旋转变色

//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. 旋转星空,点击放烟花效果 


实现代码:

//Html代码
<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><!--点击放烟花-->


View Code

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:点击弹出显示内容,过一会自动消失, 说白了也就是一个弹出内容插件,比 alert 好看些,代码如下

//Html代码
<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("当然确定了~");
                   
               });


点击图片get往期内容

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭