1200字范文 > 网页样式——各种炫酷效果持续更新ing...

网页样式——各种炫酷效果持续更新ing...

时间：2022-07-29 19:05:28

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 / -50x.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) * freturn (t > h || t < 0) ? y(p) : t}document.onclick = evanyoudocument.ontouchstart = evanyouevanyou();

View Code

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

使用到的图片：

代码如下:/files/shuai7boy/scroll.gif

//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) {//如果窗体的宽度大于800var 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="">日月君地带</a></h1><p class="typed"><a href="@Url.Action("JianJIe", "Home")" title="">日月君地带</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代码:

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为demo1function 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>

View Code

引入amazeui.min.css样式如下:

链接：/s/1qY1YinU 密码：tjox

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

View Code

Fireworks.js

$(function () {var Fireworks = function () {var self = this;var rand = function (rMi, rMa) { return ~~((Math.random() * (rMa - rMi + 1)) + rMi); }var hitTest = function (x1, y1, w1, h1, x2, y2, w2, h2) { return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1); };window.requestAnimFrame = function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (a) { window.setTimeout(a, 1E3 / 60) } }();self.init = function () {self.canvas = document.createElement('canvas');self.canvas.width = self.cw = $(window).innerWidth();self.canvas.height = self.ch = $(window).innerHeight();self.particles = [];self.partCount = 150;self.fireworks = [];self.mx = self.cw / 2;self.my = self.ch / 2;self.currentHue = 30;self.partSpeed = 5;self.partSpeedVariance = 10;self.partWind = 50;self.partFriction = 5;self.partGravity = 1;self.hueMin = 0;self.hueMax = 360;self.fworkSpeed = 4;self.fworkAccel = 10;self.hueVariance = 30;self.flickerDensity = 25;self.showShockwave = true;self.showTarget = false;self.clearAlpha = 25;$(document.body).append(self.canvas);self.ctx = self.canvas.getContext('2d');self.ctx.lineCap = 'round';self.ctx.lineJoin = 'round';self.lineWidth = 1;self.bindEvents();self.canvasLoop();self.canvas.onselectstart = function () {return false;};};self.createParticles = function (x, y, hue) {var countdown = self.partCount;while (countdown--) {var newParticle = {x: x,y: y,coordLast: [{ x: x, y: y },{ x: x, y: y },{ x: x, y: y }],angle: rand(0, 360),speed: rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance)),friction: 1 - self.partFriction / 100,gravity: self.partGravity / 2,hue: rand(hue - self.hueVariance, hue + self.hueVariance),brightness: rand(50, 80),alpha: rand(40, 100) / 100,decay: rand(10, 50) / 1000,wind: (rand(0, self.partWind) - (self.partWind / 2)) / 25,lineWidth: self.lineWidth};self.particles.push(newParticle);}};self.updateParticles = function () {var i = self.particles.length;while (i--) {var p = self.particles[i];var radians = p.angle * Math.PI / 180;var vx = Math.cos(radians) * p.speed;var vy = Math.sin(radians) * p.speed;p.speed *= p.friction;p.coordLast[2].x = p.coordLast[1].x;p.coordLast[2].y = p.coordLast[1].y;p.coordLast[1].x = p.coordLast[0].x;p.coordLast[1].y = p.coordLast[0].y;p.coordLast[0].x = p.x;p.coordLast[0].y = p.y;p.x += vx;p.y += vy;p.y += p.gravity;p.angle += p.wind;p.alpha -= p.decay;if (!hitTest(0, 0, self.cw, self.ch, p.x - p.radius, p.y - p.radius, p.radius * 2, p.radius * 2) || p.alpha < .05) {self.particles.splice(i, 1);}};};self.drawParticles = function () {var i = self.particles.length;while (i--) {var p = self.particles[i];var coordRand = (rand(1, 3) - 1);self.ctx.beginPath();self.ctx.moveTo(Math.round(p.coordLast[coordRand].x), Math.round(p.coordLast[coordRand].y));self.ctx.lineTo(Math.round(p.x), Math.round(p.y));self.ctx.closePath();self.ctx.strokeStyle = 'hsla(' + p.hue + ', 100%, ' + p.brightness + '%, ' + p.alpha + ')';self.ctx.stroke();if (self.flickerDensity > 0) {var inverseDensity = 50 - self.flickerDensity;if (rand(0, inverseDensity) === inverseDensity) {self.ctx.beginPath();self.ctx.arc(Math.round(p.x), Math.round(p.y), rand(p.lineWidth, p.lineWidth + 3) / 2, 0, Math.PI * 2, false)self.ctx.closePath();var randAlpha = rand(50, 100) / 100;self.ctx.fillStyle = 'hsla(' + p.hue + ', 100%, ' + p.brightness + '%, ' + randAlpha + ')';self.ctx.fill();}}};};self.createFireworks = function (startX, startY, targetX, targetY) {var newFirework = {x: startX,y: startY,startX: startX,startY: startY,hitX: false,hitY: false,coordLast: [{ x: startX, y: startY },{ x: startX, y: startY },{ x: startX, y: startY }],targetX: targetX,targetY: targetY,speed: self.fworkSpeed,angle: Math.atan2(targetY - startY, targetX - startX),shockwaveAngle: Math.atan2(targetY - startY, targetX - startX) + (90 * (Math.PI / 180)),acceleration: self.fworkAccel / 100,hue: self.currentHue,brightness: rand(50, 80),alpha: rand(50, 100) / 100,lineWidth: self.lineWidth};self.fireworks.push(newFirework);};self.updateFireworks = function () {var i = self.fireworks.length;while (i--) {var f = self.fireworks[i];self.ctx.lineWidth = f.lineWidth;vx = Math.cos(f.angle) * f.speed,vy = Math.sin(f.angle) * f.speed;f.speed *= 1 + f.acceleration;f.coordLast[2].x = f.coordLast[1].x;f.coordLast[2].y = f.coordLast[1].y;f.coordLast[1].x = f.coordLast[0].x;f.coordLast[1].y = f.coordLast[0].y;f.coordLast[0].x = f.x;f.coordLast[0].y = f.y;if (f.startX >= f.targetX) {if (f.x + vx <= f.targetX) {f.x = f.targetX;f.hitX = true;} else {f.x += vx;}} else {if (f.x + vx >= f.targetX) {f.x = f.targetX;f.hitX = true;} else {f.x += vx;}}if (f.startY >= f.targetY) {if (f.y + vy <= f.targetY) {f.y = f.targetY;f.hitY = true;} else {f.y += vy;}} else {if (f.y + vy >= f.targetY) {f.y = f.targetY;f.hitY = true;} else {f.y += vy;}}if (f.hitX && f.hitY) {self.createParticles(f.targetX, f.targetY, f.hue);self.fireworks.splice(i, 1);}};};self.drawFireworks = function () {var i = self.fireworks.length;self.ctx.globalCompositeOperation = 'lighter';while (i--) {var f = self.fireworks[i];self.ctx.lineWidth = f.lineWidth;var coordRand = (rand(1, 3) - 1);self.ctx.beginPath();self.ctx.moveTo(Math.round(f.coordLast[coordRand].x), Math.round(f.coordLast[coordRand].y));self.ctx.lineTo(Math.round(f.x), Math.round(f.y));self.ctx.closePath();self.ctx.strokeStyle = 'hsla(' + f.hue + ', 100%, ' + f.brightness + '%, ' + f.alpha + ')';self.ctx.stroke();if (self.showTarget) {self.ctx.save();self.ctx.beginPath();self.ctx.arc(Math.round(f.targetX), Math.round(f.targetY), rand(1, 8), 0, Math.PI * 2, false)self.ctx.closePath();self.ctx.lineWidth = 1;self.ctx.stroke();self.ctx.restore();}if (self.showShockwave) {self.ctx.save();self.ctx.translate(Math.round(f.x), Math.round(f.y));self.ctx.rotate(f.shockwaveAngle);self.ctx.beginPath();self.ctx.arc(0, 0, 1 * (f.speed / 5), 0, Math.PI, true);self.ctx.strokeStyle = 'hsla(' + f.hue + ', 100%, ' + f.brightness + '%, ' + rand(25, 60) / 100 + ')';self.ctx.lineWidth = f.lineWidth;self.ctx.stroke();self.ctx.restore();}};};self.bindEvents = function () {$(window).on('resize', function () {clearTimeout(self.timeout);self.timeout = setTimeout(function () {self.canvas.width = self.cw = $(window).innerWidth();self.canvas.height = self.ch = $(window).innerHeight();self.ctx.lineCap = 'round';self.ctx.lineJoin = 'round';}, 100);});$(self.canvas).on('mousedown', function (e) {self.mx = e.pageX - self.canvas.offsetLeft;self.my = e.pageY - self.canvas.offsetTop;self.currentHue = rand(self.hueMin, self.hueMax);self.createFireworks(self.cw / 2, self.ch, self.mx, self.my);$(self.canvas).on('mousemove.fireworks', function (e) {self.mx = e.pageX - self.canvas.offsetLeft;self.my = e.pageY - self.canvas.offsetTop;self.currentHue = rand(self.hueMin, self.hueMax);self.createFireworks(self.cw / 2, self.ch, self.mx, self.my);});});$(self.canvas).on('mouseup', function (e) {$(self.canvas).off('mousemove.fireworks');});}self.clear = function () {self.particles = [];self.fireworks = [];self.ctx.clearRect(0, 0, self.cw, self.ch);};self.canvasLoop = function () {requestAnimFrame(self.canvasLoop, self.canvas);self.ctx.globalCompositeOperation = 'destination-out';self.ctx.fillStyle = 'rgba(0,0,0,' + self.clearAlpha / 100 + ')';self.ctx.fillRect(0, 0, self.cw, self.ch);self.updateFireworks();self.updateParticles();self.drawFireworks();self.drawParticles();};self.init();}var fworks = new Fireworks();});

View Code

10.音乐播放组件-APlayer

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

//Html代码<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="///aplayer/1.4.8/APlayer.min.css" rel="stylesheet"><script src="///aplayer/1.4.8/APlayer.min.js"></script>

View Code

11.点击弹出指定的内容

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>

View Code

layer.js引入链接：/s/1geTeA8F 密码：uabe

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

实现代码：

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

View Code

12.天天飞鸟

上面这是个网页小游戏，在网页中引入简单的图片JS即可开始啦~

实现如下：

链接：/s/1o7V85oI 密码：qvu3

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论