网页制作素材

日期:2020-12-30 类型:微商城

网页制作素材:网页样式——各种炫酷效果及实现代码

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 s t.strings.length; s) t.sequence[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 /^\^\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) ! ) 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] 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 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, 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 

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 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 111111 /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 } 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 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 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( 当然确定了~ });

 

点赞 18 评论 1
上一篇:用凡科抠图制作暖色调风景照片 返回下一篇:没有了