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

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) * freturn(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) {//如果窗体的宽度大于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>

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,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 = 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.offsetHeightelse {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("当然确定了~");
});

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

网页样式——各种炫酷效果持续更新ing...
1.evanyou效果-彩带的实现,效果如下注:这个主要用的是Canvas画布实现的,点击背景绘制新的图形,代码如下: /*Html代码:*/ <canvas id="evanyou ...
html border阴影效果_一篇文章教会你使用html+css3制作炫酷效果
[一.项目背景] 在浏览一些网站的时候,经常会看到很多的炫酷的效果去装饰页面,使它看起来更高端大气一些.比如,艺龙就采用了图片上加载文字,点击图片使把对应的图片放大,使用户清晰,直观的看到内容.这种效 ...
wordpress字体样式——css炫酷的字体样式实现
demo1:css实现颜色变化效果如图所示实现代码如下 <!DOCTYPE html> <html lang="en"> <head>< ...
Android炫酷效果集锦
安卓开发中非常炫的效果集合这几天开发的时候,想做一些好看而且酷炫的特效,于是又开始从网上收集各种特效资源.下面给大家一些我喜欢的把,附代码,喜欢的看源代码,然后加到自己项目去把!! 一个开源项目网站 ...
android炫酷效果集合
这几天开发的时候,想做一些好看而且酷炫的特效,于是又开始从网上收集各种特效资源.下面给大家一些我喜欢的把,附代码,喜欢的看源代码,然后加到自己项目去把!! 一个开源项目网站有很多炫酷效果 http: ...
黑客帝国中代码雨如何实现？用 canvas 轻松实现代码雨炫酷效果！
目录 1 效果 2 用到的知识点 2.1 什么是 canvas标签? 2.1.1 创建一个画布(Canvas) 2.1.2 使用 JavaScript 来绘制图像 2.1.3 Canvas 坐标 2 ...
仿网易/QQ空间视频列表滚动连播炫酷效果
代码地址如下: http://www.demodashi.com/demo/11201.html 一.准备工作 AndroidStudio 开发环境需要下载七牛的开源播放器SDK 本例子实现了仿网易 ...
第七章实现炫酷效果—图像和动画（1）
第七章实现炫酷效果图像和动画 1 Android的几种常用图像类型 2 图片的基础Bitmap位图 21如何获取位图资源 22如果获取位图的信息 23 位图的显示与变换第七章实现炫酷效果-图像和动画 ...
人形时钟代码php,[精品]炫酷的人形时钟代码
分享一款:[精品]炫酷的人形时钟代码你浪费的每一分每一秒的同时,别人在不停息的努力. 知识拓展: 如今我们只需瞧一下钟就能说出具体时间,我们把这看成是很自然的事.但在长达几千年的时间里,根本就没有任 ...

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

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

最新文章

热门文章