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

朴灿烈づ我的快乐病毒、 2022-05-26 01:48 205阅读 0赞

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

![format_png][]

注：这个主要用的是 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. 返回顶部特效（滚动条上移或者点击会自动隐藏和显示），效果如下:

![format_png 1][]

代码如下：

//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. 左下角探头效果

![format_png 2][]

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. 文字翻转效果（点击翻转，一开始加载页面也翻转）

![format_png 3][]

代码如下：

<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. 在离开网页时，触发事件（这里以改变标题为例）

![format_png 4][]

注:这里鼠标移开时，同时改变网页 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. 移入网页时改变鼠标的样式

![format_png 5][]

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：鼠标悬停停止滚动）

![format_png 6][]

代码如下：

<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. 鼠标移入效果

![format_png 7][]

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

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

![format_png 8][]

实现代码:

<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

10.音乐播放组件

![format_png 9][]

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. 点击弹出指定的内容

![format_png 10][]

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 选择效果

![format_png 11][]

实现代码：

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

[format_png]: /images/20220526/1a6d4527f6b04fcfbb0b3e9b71f7daee.png
[format_png 1]: /images/20220526/8ae4bcc243c842dbba6b8b0347d80e18.png
[format_png 2]: /images/20220526/31f3188bba394541bc66b2361cd14640.png
[format_png 3]: /images/20220526/a1c6846a2a4e409cb451f43ba0628477.png
[format_png 4]: /images/20220526/31b41565ccec497892d9c24b38205bcf.png
[format_png 5]: /images/20220526/3683040083c24e89b10f66d01caab393.png
[format_png 6]: /images/20220526/37c15f387e5d4ea59e9c94dcc6823591.png
[format_png 7]: /images/20220526/616bb78513ff46d287b97224eccafad2.png
[format_png 8]: /images/20220526/2608f541d8f54909adcb9c179f6e80d9.png
[format_png 9]: /images/20220526/a3912171a3964909a5c8e2b70b29b83e.png
[format_png 10]: /images/20220526/5aedbd4dd4814e79979f84e74cbbea53.png
[format_png 11]: /images/20220526/8f26d7be6a264d3098b1ea74e752632c.png