【视觉控】3D时钟
2016-02-17 10:41
309 查看
心心念念的新年过完了~却没念到年会，更没念到年终奖~哎，以任何理由不发年终奖的公司都是臭流氓~然，我们公司没有理由，压根儿就没提这事，哇卡卡卡卡！！！
======================== 华丽丽的跳水线===========================
年后第一天，公司人不多，闲来逛逛各个论坛，发现一个小特效，拿出来共享一下，顺便请大拿帮忙看看一个奇葩的BUG~
来人~上代码！
喳~
以上源代码经测，在chrome和Firefox下均可正常运行，显示结果如下：
可是在Safari下，显示如下：
IE没有，暂时未测。
===========================================================
自我分析感觉问题出在了一些css3样式上，所以将所以需要添加前缀的属性都添加了-webkit-,-o-,-ms-,-moz-等前缀（测试代码有加，上边附的代码保留的源码），依旧不起作用。
话说，chrome没有问题的话，Safari不应该是同样正常显示的吗？
求赐教~~~~
============================================================
解决方案：
prefixfree.min.js
======================== 华丽丽的跳水线===========================
年后第一天，公司人不多，闲来逛逛各个论坛，发现一个小特效，拿出来共享一下，顺便请大拿帮忙看看一个奇葩的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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Apache和Nginx比较
- 关于html和jsp乱码问题
- 营销 - 数据
- 状态模式State（对象行为型）
- java中==、equals()、hashCode()
- [bzoj 1251]序列终结者
- 腾讯企业邮箱邮件正文存储型XSS一枚
- 解决SwipeRefreshLayout内嵌套ViewPager，造成的滑动冲突
- css动画和渐变
- 记录几个有关image处理的API
- C#构建多线程应用程序(4) —— 并发问题
- 外层包含div
- Oracle 创建序列
- 钓鱼网站钓取大量QQ帐号密码被泄露钓鱼受害者每天过万（某先前被腾讯忽略的报告）
- Linux备份war包简单脚本
- 201602171037_《Js地理位置（摘）》
- (笔记)电路设计（十）之脉冲电路的应用
- noip1999导弹拦截c++语言
- 正则表达式
- 我回来了！