【视觉控】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 ...
随机推荐
- Linux基础知识点
1.目录结构 bin 存放二进制可执行文件(ls,cat,mkdir等) boot 存放用于系统引导时使用的各种文件 dev 用于存放设备文件 etc 存放系统配置文件 home 存放所有用户文件的根 ...
- 二进制转化 - bitset
2017-08-28 10:55:17 writer:pprp 在之前写了一个关于bitset用法的贴之后,这是第一次运用,不得不说如果不用的话还是一头雾水 以后写代码要标记开始时间,和结束时间了,我 ...
- Berkeley parser使用方法
1. 简介 Berkeley Parser 是加州大学伯克利分校 NLP 实验室开发的一种基于概率上下文无关文法(PCFG)的成分句法分析器,支持英语,汉语,德语等多个语种,它具有较高的句法分析性能 ...
- 全文检索引擎Solr系列——整合中文分词组件mmseg4j
默认Solr提供的分词组件对中文的支持是不友好的,比如:“VIM比作是编辑器之神”这个句子在索引的的时候,选择FieldType为”text_general”作为分词依据时,分词效果是: 它把每一个词 ...
- TIME_WAIT和CLOSE_WAIT
先看下三次握手四次挥手的状态变化: 通常会遇到下面两种情况: 服务器保持了大量TIME_WAIT状态 服务器保持了大量CLOSE_WAIT状态 因为linux分配给一个用户的文件句柄是有限的,而TIM ...
- java代码实现递归
think in java 书中使用递归分析 代码如下: public class Snake implements Cloneable { private Snake next; private c ...
- Hive 导入、导出数据
<------ 导入 ------> 从本地目录文件导入Hive表 语法:LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABL ...
- 初学Selenium遇到的那些坑
一.遇到一个下拉选择框,可以点击继续选择: 所以click两次就可以了: 二.国际话问题 bdId.selectByIndex(index);//index位下拉框内容的下标,从0开始, 数组形式[ ...
- HTTP Methods: GET vs. POST
Two commonly used methods for a request-response between a client and server are: GET and POST. GET ...
- ubuntu 安装包过程中遇到的一个错误解决办法
错误提示如下: 将会安装下列额外的软件包: libdigest-hmac-perl libqt5test5下列[新]软件包将被安装: libdigest-hmac-perl下列软件包将被升级: lib ...