<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script src="jquery-1.11.3.min.js"></script>
<style>
@import url(http://fonts.googleapis.com/css?family=Lato);
#info {
position: absolute;
left: 5%;
}
body {
padding: 0;
margin: 0;
font-family: 'Lato';
text-align: center;
}
.section {
padding-top: 40px;
font-size: 1em;
text-align: center;
background: #f1ede3;
width: 100%;
height: 800px;
color: #555;
-webkit-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
}
.night .section {
background: #080d17;
color: #e9e5d5;
}
.night #intro-text {
color: #e9e5d5;
}
.time-circle {
position: relative;
background: linear-gradient(to bottom, #BE4405, #F6C60C);
width: 400px;
height: 400px;
border-radius: 50%;
border: 4.5px solid #555;
overflow: hidden;
padding: 0px;
margin: 0 auto;
margin-bottom: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
text-align: center;
-webkit-transition: all 1.1s ease-in-out;
transition: all 1.1s ease-in-out;
}
.night .time-circle{
background: linear-gradient(to bottom, #111936, #285A7B);
border-color: #e9e5d5;
}
.sun {
margin-top: 20px;
background: #F2EF88;
box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);
width: 30%;
height: 30%;
border-radius: 50%;
position: relative;
left: 35%;
top: 48%;
-webkit-animation: pulse 5s ease infinite alternate;
animation: pulse 5s ease infinite alternate;
-webkit-transition: all 1.1s 0.4s ease;
transition: all 1.1s 0.4s ease;
}
@keyframes pulse {
0% {box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);}
50% {box-shadow: 0 0 40px rgba(242, 239, 136, 1);}
100% {box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);}
}
@-webkit-keyframes pulse {
0% {box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);}
50% {box-shadow: 0 0 40px rgba(242, 239, 136, 1);}
100% {box-shadow: 0 0 20px rgba(242, 239, 136, 0.4);}
}
.night .sun {
top: 70%;
left: 20%;
-webkit-transition: all 1.1s 0s ease;
transition: all 1.1s 0s ease;
}
.moon {
position: absolute;
margin-top: 20px;
background: #d9d8d0;
box-shadow: inset -10px 2px 0 0px #899098;
width: 22.5%;
height: 22.5%;
border-radius: 100%;
position: relative;
left: 120%;
margin-left: -50px;
top: -50%;
overflow: hidden;
-webkit-transition: all 1.1s 0s ease;
transition: all 1.1s 0s ease;
}
.night .moon {
left: 65%;
top: -10%;
-webkit-transition: all 1.1s 0.4s ease;
transition: all 1.1s 0.4s ease;
}
.moon div:nth-child(n) {
position: relative;
background: #b9b8b0;
border-radius: 50%;
box-shadow: inset 4px -2px 0 0px #535457;
}
.moon div:nth-child(1) {
top: 25%;
left: 12%;
width: 27%;
height: 27%;
}
.moon div:nth-child(2) {
top: -11%;
left: 60%;
width: 16%;
height: 16%;
}
.moon div:nth-child(3) {
top: 25%;
left: 44%;
width: 16%;
height: 16%;
}
.stars {
opacity: 0;
margin-left: 100px;
top: 0;
left: 0;
-webkit-transition: all 0.8s 0s ease;
transition: all 0.8s 0s ease;
z-index: 1000;
}
.night .stars {
opacity: 1;
-webkit-transition: all 3s 0.4s ease;
transition: all 3s 0.4s ease;
}
.stars div:nth-child(n) {
position: absolute;
background: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 255, 255, 1);
overflow: hidden;
width: 0.4%;
height: 0.4%;
margin-left: 20%;
margin-top: -20%;
-webkit-transition: all 1s 0s ease;
transition: all 1s 0s ease;
}
.night .stars div:nth-child(n) {
margin-left: 0;
margin-top: 0;
-webkit-transition: all 1s 0.4s ease-out;
transition: all 1s 0.4s ease-out;
}
.stars div:nth-child(1) {
left: 25%;
top: 30%;
}
.stars div:nth-child(2) {
left: 55%;
top: 20%;
}
.stars div:nth-child(3) {
left: 60%;
top: 60%;
}
.stars div:nth-child(4) {
left: 40%;
top: 45%;
}
.stars div:nth-child(5) {
left: 15%;
top: 55%;
}
.stars div:nth-child(6) {
left: 40%;
top: 10%;
}
.stars div:nth-child(7) {
left: 80%;
top: 55%;
}
.water {
position: absolute;
background: repeating-radial-gradient(ellipse farthest-corner at center -400%, #f5c30e 30%, #518eac 90%) repeat scroll 0 0 #518eac;
width: 100%;
height: 200px;
top: 68%;
-webkit-transition: all 1.1s ease;
transition: all 1.1s ease;
}
.night .water{
background: repeating-radial-gradient(ellipse farthest-corner at center -400%, #7fa1bb 30%, #1d425a 90%) repeat scroll 0 0 #1d425a;
}
#switch,
#circle {
height: 30px;
-webkit-transition: all 0.4s cubic-bezier(0.54, 1.6, 0.5, 1);
transition: all 0.4s cubic-bezier(0.54, 1.6, 0.5, 1);
}
#switch {
width: 60px;
margin: 0 auto;
border: 2px solid #DA8508;
border-radius: 27px;
background: #DA8508;
position: relative;
}
#circle {
margin-top: 5%;
margin-left: 5%;
width: 40%;
height: 80%;
border-radius: 50%;
box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
background: #e9e5d5;
}
.switched {
border-color: #1C3958 !important;
background: #1C3958 !important;
}
.switched #circle {
margin-left: 55%;
background: #e9e5d5;
}
</style>
</head>
<body>
<div id="fullpage">
<div class="section">
<p id="info">Scroll down...</p>
<div class="time-circle">
<div class="sun"></div>
<div class="moon">
<div></div>
<div></div>
<div></div>
</div>
<div class="stars">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="water"></div>
</div>
<div id="intro-text">
<h1 href="#">day night simulation</h1>
<h4>by Szymon Stypa, inspired by pens on Codepen</h4>
</div>
<div id="switch">
<div id="circle"></div>
</div>
</div>
</div>
<script>
$("#switch").click(function () {
if ($("#fullpage").hasClass("night")) {
$("#fullpage").removeClass("night");
$("#switch").removeClass("switched");
}
else {
$("#fullpage").addClass("night");
$("#switch").addClass("switched");
}
});
</script>
</body>
</html>
分享到：
相关推荐
超酷CSS3图片3D旋转效果 超酷CSS3图片3D旋转效果 超酷CSS3图片3D旋转效果
超酷jQuery CSS3翻页时钟动画是一款数字时钟，时间每过一秒，相应的位置就会像翻日历一样翻过去。另外，这款CSS3数字时钟有点立体的效果，非常漂亮。
CSS3制作超酷的鼠标悬停效果 CSS3制作超酷的鼠标悬停效果
css3打造的超酷三维动画效果的导航菜单
这是一款CSS3超酷图片glitch闪烁效果。在该效果中，通过CSS3动画和clip-path属性，为图片制作各种炫酷的glitch闪烁特效。
超酷的实用CSS产品导航，供大家一起共同分享学习。
插件描述：CSS3实现超酷的鼠标悬停效果. 参考示例：http://www.jq22.com/jquery-info4997
超酷jQuery+CSS3翻页时钟动画.zip
超酷loading效果超酷loading效果
超酷CSS3图片3D旋转效果，鼠标悬停后，图片会3d旋转到另外一面。兼容chrome、firefox浏览器。 使用方法： 1、head区域引用文件 component.css, demo.css, normalize.css 2、在文件中加入<!-- 代码 开始 -->...
超酷的CSS3图片镜像效果网页特效是一款可以将任意图片进行镜像，并以幻灯片的方式在同一个页面中切换不同的图片。
CSS3超酷粒子效果进度条是一款很有特色的HTML5 CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果，就像一些小颗粒从进度条上散落下来，是一款别具特色的HTML5进度条插件。
这是一款4种效果非常炫酷的纯CSS3页面切换过渡动画特效。该CSS3页面过渡动画使用CSS keyframes制作而成，所有的动画效果和延时都是使用CSS属性，没有任何的javascript timeout()代码。
超酷的css3样式图片上传加载（Loading）动画图标
超酷3D照片展示效果
JS超酷图片翻动展示效果，根据鼠标进出图片的方向来控制图片进出的方式，效果超炫，兼容主流浏览器！
超酷jscss横向二级菜单超酷jscss横向二级菜单
彩色超酷CSS+DIVWEB标准模板.rar彩色超酷CSS+DIVWEB标准模板.rar彩色超酷CSS+DIVWEB标准模板.rar
一款很酷的响应式的多级导航菜单效果。使用css3和jquery技术打造。最大特点是菜单始终显示在一定范围内，节省屏幕空间。
超酷的分页效果，适合html,asp,jsp,hph,aspx等格式