<!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>
分享到：
相关推荐
在本资源"超酷jQuery CSS3翻页时钟动画.zip"中，我们探索了一个创新的数字时钟设计，它结合了jQuery和CSS3的技术，创造出一种动态且视觉吸引力极强的用户体验。这款时钟的独特之处在于，其时间的更新不是传统的方式...
超酷CSS3图片3D旋转效果 超酷CSS3图片3D旋转效果 超酷CSS3图片3D旋转效果
本教程将深入探讨如何使用CSS3和jQuery创建一个“超酷响应式css3+jquery多级导航菜单效果”。这个菜单不仅外观时尚，而且具备良好的用户体验，尤其适用于有限的屏幕空间。 首先，让我们了解一下CSS3。CSS3是层叠...
**CSS3超酷图片glitch闪烁效果详解** 在现代网页设计中，为了吸引用户的注意力和提升用户体验，设计师们经常采用各种动态效果。其中，CSS3的glitch闪烁效果是一种非常独特且引人注目的视觉表现手法。这个效果通过...
"超酷的CSS3图片镜像效果网页特效"是一种利用CSS3的transform属性来创建图片的镜像效果，这种效果可以是水平的，也可以是垂直的，甚至可以是任意角度的旋转。通过设置transform: scale(-1, 1)或者transform: rotateY...
本文将深入探讨“超酷的实用CSS产品导航”这一主题，分享一系列关于如何创建吸引眼球、高效的产品导航的知识点。 1. **CSS布局**：产品导航通常需要在有限的空间内展示多个链接或按钮。利用CSS的布局技术，如...
本示例“css3打造的超酷三维动画效果的导航菜单”就是一个很好的体现，利用CSS3的新特性，我们可以创建出极具视觉吸引力的导航菜单，提升用户体验。 首先，我们要理解CSS3中的3D转换。3D转换是CSS3引入的一个重要...
本教程将深入讲解如何利用CSS3实现超酷的鼠标悬停效果，让您的网站在用户眼中更具吸引力。 首先，我们了解CSS3中的:hover伪类选择器，这是实现鼠标悬停效果的基础。`:hover`伪类允许我们在鼠标指针浮动在元素上方时...
【CSS3超酷粒子效果进度条】是一款基于HTML5和CSS3技术的创新性进度条插件，它在展示进度的同时融入了独特的粒子动画效果，为网页增添了一份动态美感和互动体验。这款插件适用于网站的加载指示、数据处理显示等场景...
在本项目"超酷jQuery+CSS3翻页时钟动画.zip"中，我们可以探索一系列前沿的前端技术，包括HTML5、jQuery、JavaScript以及CSS3。这个项目的核心是创建一个动态且引人注目的翻页时钟，它利用了这些技术的强大力量，将...
接下来，我们用CSS来实现超酷的效果。可以使用伪类选择器如`:hover`、`:active`来添加动态效果，以及`transition`属性来实现平滑过渡。以下是一个基本的例子： ```css .pagination { list-style-type: none; ...
在前端开发领域，CSS3（层叠样式表第三版）为网页设计师提供了丰富的动画效果和样式控制，使得创建出各种动态、美观的元素成为可能。本主题“超酷的CSS3样式图片上传加载（Loading）动画图标”正是利用了CSS3的这一...
综上所述，"JS超酷图片翻动展示效果"是JavaScript与CSS3结合的产物，它利用现代Web技术创造出令人印象深刻的用户体验。开发者需要掌握JavaScript事件处理、CSS3变换和过渡效果，以及优化技巧，才能实现这种高质量的...
本文将深入探讨“纯css3超酷tab选项卡效果”这一主题，介绍如何利用CSS3特性实现一个既实用又具有视觉冲击力的选项卡组件。 选项卡是一种常见的网页交互元素，用于展示有限的、分组的内容。在这个案例中，我们使用...
超酷CSS3图片3D旋转效果，鼠标悬停后，图片会3d旋转到另外一面。兼容chrome、firefox浏览器。 使用方法： 1、head区域引用文件 component.css, demo.css, normalize.css 2、在文件中加入<!-- 代码 开始 -->...
综上所述，“超酷3D照片展示效果”是一个结合了JavaScript、CSS3、HTML5以及可能的WebGL技术的项目，旨在创造引人入胜的用户体验，同时兼顾性能优化和无障碍访问。这样的技术应用对于提升网站的专业性和用户体验具有...
本教程将深入探讨如何利用CSS3来制作超酷的鼠标悬停效果。 一、CSS3选择器与伪类 CSS3引入了更精确的选择器和伪类，使得鼠标悬停效果的实现更加灵活。例如，`:hover`伪类用于定义元素在鼠标指针悬停时的样式。通过...
【标题】"纯CSS3实现超酷幻灯片图文切换效果"主要涉及到现代网页开发中的动态展示技术，尤其是使用CSS3来实现交互式用户体验。在本文中，我们将深入探讨如何利用CSS3的特性来创建一个无需JavaScript插件的炫酷幻灯片...
在本文中，我们将深入探讨如何使用CSS3来创建一款超酷的文章卡片UI设计效果。CSS3，即层叠样式表第三版，是Web设计中一个强大的工具，它为开发者提供了更多的控制力，使得网页设计更加动态、交互性更强。这款纯CSS3...
在IT行业中，CSS3是一种强大的样式表语言，用于定义网页的布局、颜色、字体等视觉效果。本案例中，我们关注的是"css3超酷3D旋转导航菜单特效"，这是一个利用CSS3 3D Transforms技术实现的创新性交互设计。这个特效...