【视觉控】3D时钟
心心念念的新年过完了~却没念到年会，更没念到年终奖~哎，以任何理由不发年终奖的公司都是臭流氓~然，我们公司没有理由，压根儿就没提这事，哇卡卡卡卡！！！
======================== 华丽丽的跳水线===========================
年后第一天，公司人不多，闲来逛逛各个论坛，发现一个小特效，拿出来共享一下，顺便请大拿帮忙看看一个奇葩的BUG~
来人~上代码！
喳~
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Countdown Clock</title>
<style>
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
/* Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
} a {
cursor: pointer;
text-decoration: none;
color: #ccc;
} a:hover {
color: #fff;
} ul {
list-style: none
} .clearfix:before,
.clearfix:after {
content: " ";
display: table;
} .clearfix:after {
clear: both;
} .clearfix {
*zoom: 1;
} /* Main */ html, body {
min-height: 100%;
} body {
font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
user-select: none;
color: #888;
text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
background: rgb(150, 150, 150);
background: -moz-radial-gradient(center, ellipse cover, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(150, 150, 150, 1)), color-stop(100%, rgba(89, 89, 89, 1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%);
background: radial-gradient(ellipse at center, rgba(150, 150, 150, 1) 0%, rgba(89, 89, 89, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#969696', endColorstr = '#595959', GradientType = 1); } .container {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
width: 140px;
height: 90px;
margin: -45px 0 0 -70px;
} #social {
text-align: center;
position: absolute;
bottom: 14%;
width: 100%;
}
#social p{
margin-bottom: 10px;
} #social ul,
#social li {
display: inline-block;
} /* Skeleton */ ul.flip {
position: relative;
float: left;
margin: 5px;
width: 60px;
height: 90px;
font-size: 80px;
font-weight: bold;
line-height: 87px;
border-radius: 6px;
box-shadow: 0 2px 5px rgba(0, 0, 0, .7);
} ul.flip li {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%; } ul.flip li:first-child {
z-index: 2;
} ul.flip li a {
display: block;
height: 100%;
perspective: 200px;
} ul.flip li a div {
z-index: 1;
position: absolute;
left: 0;
width: 100%;
height: 50%;
overflow: hidden;
} ul.flip li a div .shadow {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
} ul.flip li a div.up {
transform-origin: 50% 100%;
top: 0;
} ul.flip li a div.up:after {
content: "";
position:absolute;
top:44px;
left:0;
z-index: 5;
width: 100%;
height: 3px;
background-color: rgba(0,0,0,.4);
} ul.flip li a div.down {
transform-origin: 50% 0%;
bottom: 0;
} ul.flip li a div div.inn {
position: absolute;
left: 0;
z-index: 1;
width: 100%;
height: 200%;
color: #ccc;
text-shadow: 0 1px 2px #000;
text-align: center;
background-color: #333;
border-radius: 6px;
} ul.flip li a div.up div.inn {
top: 0; } ul.flip li a div.down div.inn {
bottom: 0;
} /* PLAY */ body.play ul li.before {
z-index: 3;
} body.play ul li.active {
animation: asd .5s .5s linear both;
z-index: 2;
} @keyframes asd {
0% {
z-index: 2;
}
5% {
z-index: 4;
}
100% {
z-index: 4;
}
} body.play ul li.active .down {
z-index: 2;
animation: turn .5s .5s linear both;
} @keyframes turn {
0% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
} body.play ul li.before .up {
z-index: 2;
animation: turn2 .5s linear both;
} @keyframes turn2 {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-90deg);
}
} /* SHADOW */ body.play ul li.before .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
animation: show .5s linear both;
} body.play ul li.active .up .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, .1)), color-stop(100%, rgba(0, 0, 0, 1)));
background: linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 1) 100%);
animation: hide .5s .3s linear both;
} /*DOWN*/ body.play ul li.before .down .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
animation: show .5s linear both;
} body.play ul li.active .down .shadow {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(100%, rgba(0, 0, 0, .1)));
background: linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .1) 100%);
animation: hide .5s .3s linear both;
} @keyframes show {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
} @keyframes hide {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head> <body> <div class="container">
<ul class="flip minutePlay">
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">4</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">4</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">5</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">5</div>
</div>
</a>
</li>
</ul>
<ul class="flip secondPlay">
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">0</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">1</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">2</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">3</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">4</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">4</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">5</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">5</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">6</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">6</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">7</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">7</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">8</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">8</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="up">
<div class="shadow"></div>
<div class="inn">9</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">9</div>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">
setInterval(function () {
secondPlay()
}, 1000); setInterval(function () {
minutePlay()
}, 10000); function secondPlay() {
$("body").removeClass("play");
var aa = $("ul.secondPlay li.active"); if (aa.html() == undefined) {
aa = $("ul.secondPlay li").eq(0);
aa.addClass("before")
.removeClass("active")
.next("li")
.addClass("active")
.closest("body")
.addClass("play"); }
else if (aa.is(":last-child")) {
$("ul.secondPlay li").removeClass("before");
aa.addClass("before").removeClass("active");
aa = $("ul.secondPlay li").eq(0);
aa.addClass("active")
.closest("body")
.addClass("play");
}
else {
$("ul.secondPlay li").removeClass("before");
aa.addClass("before")
.removeClass("active")
.next("li")
.addClass("active")
.closest("body")
.addClass("play");
} } function minutePlay() {
$("body").removeClass("play");
var aa = $("ul.minutePlay li.active"); if (aa.html() == undefined) {
aa = $("ul.minutePlay li").eq(0);
aa.addClass("before")
.removeClass("active")
.next("li")
.addClass("active")
.closest("body")
.addClass("play"); }
else if (aa.is(":last-child")) {
$("ul.minutePlay li").removeClass("before");
aa.addClass("before").removeClass("active");
aa = $("ul.minutePlay li").eq(0);
aa.addClass("active")
.closest("body")
.addClass("play");
}
else {
$("ul.minutePlay li").removeClass("before");
aa.addClass("before")
.removeClass("active")
.next("li")
.addClass("active")
.closest("body")
.addClass("play");
} }
</script>
以上源代码经测，在chrome和Firefox下均可正常运行，显示结果如下：
可是在Safari下，显示如下：
IE没有，暂时未测。
===========================================================
自我分析感觉问题出在了一些css3样式上，所以将所以需要添加前缀的属性都添加了-webkit-,-o-,-ms-,-moz-等前缀（测试代码有加，上边附的代码保留的源码），依旧不起作用。
话说，chrome没有问题的话，Safari不应该是同样正常显示的吗？
求赐教~~~~
============================================================
解决方案：
prefixfree.min.js
【视觉控】3D时钟的更多相关文章
- 巧用模糊实现视觉的 3D 效果
本文较短,将介绍巧用模糊实现视觉 3D 效果的技巧. 我们都知道,在正常的视觉效果中,离我们越近的通常我们会看的越清晰,而离我们较远则相对没那么清晰~ 我们可以利用清晰与模糊两种状态来构建视差效果.像 ...
- 60.自己定义View练习（五）高仿小米时钟 - 使用Camera和Matrix实现3D效果
*本篇文章已授权微信公众号 guolin_blog (郭霖)独家公布 本文出自:猴菇先生的博客 http://blog.csdn.net/qq_31715429/article/details/546 ...
- EdgeFormer: 向视觉 Transformer 学习，构建一个比 MobileViT 更好更快的卷积网络
前言 本文主要探究了轻量模型的设计.通过使用 Vision Transformer 的优势来改进卷积网络,从而获得更好的性能. 欢迎关注公众号CV技术指南,专注于计算机视觉的技术总结.最新技术跟 ...
- paper 98：图像视觉各个领域文献目录
当前图像视觉各个领域文献资料的索引,包含计算机视觉.图像处理.文本(图像)分析.视频分析.模式识别等主题.如果对哪个方向比较感兴趣,可以查看这个方向的比较重要的Paper,每一个大的目录后面都对应一些 ...
- 14款超时尚的HTML5时钟动画
时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟.3D时钟.个性化时钟等 ...
- 系统时钟和UART的设置
系统时钟: 在开发版上,不同的器件运行在不同的时钟频率上,如CPU可能运行在400Mhz的频率上.SDRAM.DM9000等内存存储运行在100Mhz~133MHz上. 串口i2c等运行在50Mhz上 ...
- 梦想CAD控件COM接口光栅图处理
在CAD操作过程中,我们在设计绘图时,光栅图像也就是我们常说的图片,应用非常广泛,在CAD中可以直接插入光栅图像,并且可以对光栅图像进行裁剪.透明度调整等一些操作,在网页可以快速实现我们所需功能. 一 ...
- 14款形态各异的超时尚HTML5时钟动画
14款超时尚的HTML5时钟动画(附源码) 时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5 ...
- WPF关于控件 父级控件，子级控件，控件模板中的控件，等之间的相互访问
原文:WPF关于控件 父级控件,子级控件,控件模板中的控件,等之间的相互访问 1,在菜单中访问 弹出菜单的控件 var mi = sender as MenuItem;//菜单条目 MenuItem ...
随机推荐
- .Net Core Linux部署之进程守护 Supervisor 安装配置
1.Supervisor 安装 //安装easy_install yum install python-setuptools //安装Supervisor easy_install superviso ...
- python print和strip
在使用这两个模块时犯过错误,总结如下: 1.print print在打印时会自动加上换行,例如: >>> for i in xrange(1,5): ... print i ... ...
- 关于Vue的component制作dialog组件
其实原理很简单,兴个粟子, 点击按钮出现 dialog 弹出杠, 将dialog做成一个组件,components/dialog.vue 就是在components里面新建一个vue.将这个vue做为 ...
- 【Python】学习笔记之函数
Python函数 在Python中,一切皆为对象,函数也可以赋给一个变量,就是指向一个函数对象的引用,相当于给这个函数起了一个“别名”: >>> a = max >>&g ...
- (转)浅谈SQL Server 对于内存的管理
简介 理解SQL Server对于内存的管理是对于SQL Server问题处理和性能调优的基本,本篇文章讲述SQL Server对于内存管理的内存原理. 二级存储(secondary storage) ...
- keras运行gan的几个bug解决
http://blog.csdn.net/u012317000/article/details/79211274 https://www.jianshu.com/p/5b1f7004144d
- Bootstrap 与 IE 兼容模式 关系讲解
IE 兼容模式 Bootstrap 不支持 IE 古老的兼容模式.为了让 IE 浏览器运行最新的渲染模式下,建议将此 <meta> 标签加入到你的页面中:Copy <meta htt ...
- ResultSet 结果集
转自:http://blog.csdn.net/z93971401/article/details/7469503 这篇文章并没有给出如何使用ResultSet的具体例子,只是从ResultSet的功 ...
- 三十 Python分布式爬虫打造搜索引擎Scrapy精讲—将selenium操作谷歌浏览器集成到scrapy中
1.爬虫文件 dispatcher.connect()信号分发器,第一个参数信号触发函数,第二个参数是触发信号,signals.spider_closed是爬虫结束信号 # -*- coding: u ...
- 使用IScroll5实现滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...