之前《网页特效 - 点击按钮实现白天黑夜切换效果》分享了，给你的网站加上一个炫酷的昼夜切换模式，一款挺好看的网页特效，好多的个人博客、个人网站都在用，就是用jQuery点击网页实现浅色、深色、黑夜、白天模式切换特效。
最近呐，小千听网友说，有一款特效挺好看的，好多的博客网站都有，有的叫开灯、关灯，有的叫白天、黑夜，有的叫日夜、昼夜、明暗、背景、场景、黑白等等，好多叫法，反正就是，网页页面切换的各种变换效果，被搞得有几十种叫法。
源码下载
哎，小千整出来之后，觉得挺新鲜的，然后就马上给自己的网站先换上，先整了一个，下面是源码。
说白了，就是想给网站加一个白天、黑夜的模式切换特效呗，就是用jQuery点击网页实现浅色、深色、黑夜、白天模式切换特效嘛。
代码演示
<!DOCTYPE HTML> <html> <!--STATUS OK--> <head> <meta name="renderer" content="webkit"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1,maximum-scale=1"/> <meta name="referrer" content="strict-origin-when-cross-origin"/> <!-- saved from url=(0013)about:internet --> <title>日夜切换模式</title> <link rel="stylesheet" id="github-light" href="css/github-light.css"> <link rel="stylesheet" id="github-dark" href="css/github-dark.css"> <link rel="stylesheet" id="github-dark-orange" href="css/github-dark-orange.css"> <link rel="stylesheet" id="dark-blue" href="css/dark-blue.css"> <link rel="stylesheet" id="icy-dark" href="css/icy-dark.css"> <link rel="stylesheet" id="photon-dark" href="css/photon-dark.css"> </head> <body class="home"> <span id="modeTag" onClick="mode()" style="cursor:pointer;"></span> <script type="text/javascript" src="js/mode.js"></script> </body> </html>
对的，没错，代码就是这么简单。下面，小千就把代码免费分享出来，免费分享出来了，让那些喜欢这个特效的小伙伴，自己加吧，给你的网站也加上一个炫酷的昼夜切换模式。
觉得好看的，就下载特效，给自己的博客整一个吧。还有小伙伴会问，小千你为什么不给你这个网站也换一个啊。其实吧，有一个网站有就好啦，没有必要每个网站都换上这种切换特效，其实，更多的原因是，小千变懒了，懒得再写样式了，这种虚伪的特效，还占用宽带，有时间再说吧。
这个是一个非常简单的CSS切换效果，好看就行，推荐切换的CSS弄到最精简、最精简、最精简，反正就是，切换的CSS能弄多小，就弄多小，至于，为什么，不想解释。
本文结束
评论专区
上一篇
发表评论
评论列表（无评论）