【视觉控】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 ...
随机推荐
- 同余定理简单应用 - poj2769 - hdu 1021 - hdu 2035
同余问题 基本定理: 若a,b,c,d是整数,m是正整数, a = b(mod m), c = d(mod m) a+c = b+c(mod m) ac = bc(mod m) ax+cy = bx+ ...
- 解题报告：poj 3070 - 矩阵快速幂简单应用
2017-09-13 19:22:01 writer:pprp 题意很简单,就是通过矩阵快速幂进行运算,得到斐波那契数列靠后的位数 . 这是原理,实现部分就是矩阵的快速幂,也就是二分来做 矩阵快速幂可 ...
- Yii框架(一)
这里接触了 MVC 设计模式中的控制器和视图部分. 创建了一个操作作为控制器的一部分去处理特定请求. 然后又创建了一个视图去构造响应内容. 在这个小例子中,没有模型调用,唯一涉及到数据的地方是 mes ...
- Vue实例的生命周期created和mounted的区别
生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例 ...
- rsa加解密密钥生成命令
(1)生成原始RSA私钥文件 rsa_private_key.pem(原始私钥) openssl genrsa -out rsa_private_key.pem 2048 (2)将原始RSA私钥转换为 ...
- centos7 配置 NFS mount挂载服务器
1. NFS服务端 安装NFS服务 yum install nfs_utils yum install rpcbind (系统默认已经有了,可查看下) 配置共享文件夹 1. 创建文件夹: mkd ...
- 利用ModSecurity防御暴力破解
利用ModSecurity防御暴力破解 from:http://www.freebuf.com/articles/web/8749.html 2013-04-18 共553248人围观 ,发现 12 ...
- vue中element 的上传功能
element 的上传功能 最近有个需求,需要在上传文件前,可以进行弹窗控制是否上传upload 看完文档后,感觉有两种思路可以实现 基于before-upload :上传文件之前的钩子,参数为上传的 ...
- ie下的bug之button
场景描述: 现在页面设计是都喜欢自定义按钮样式,某日接收到页面发现在ie下有bug,上代码: <div> <button><span><a href=&quo ...
- 033——VUE中安装使用vue-devtools调试工具用于监控数据变化
vue官网:https://cn.vuejs.org/ 下的官方仓库:vue-devtools 安装到火狐或谷歌下都可以,安装成功之后,按F12查看就可以了