故障闪烁数字时钟特效 CSS+JS html代码

其他资源 8 月前 77

HTML部分

<div class="screen glitch">
    <div class="clock is-off">
        <span data-time="" class="time"></span>
    </div>
</div>

CSS部分

*,*:before,*:after {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	box-sizing:border-box;
	user-select:none;
}
html,body {
	height:100%;
}
body {
	font-family:'Lato',sans-serif;
	font-weight:700;
	background:#111;
	color:#fff;
}
.screen {
	position:relative;
	z-index:1;
	width:100%;
	height:100%;
	overflow:hidden;
}
.clock {
	display:block;
	position:absolute;
	z-index:9;
	width:720px;
	height:128px;
	text-align:center;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
	cursor:default;
}
.clock span {
	display:block;
	position:relative;
	font-size:128px;
	line-height:1;
}
.clock span:before,.clock span:after {
	display:block;
	content:attr(data-time);
	position:absolute;
	top:0;
	color:#fff;
	background:#111;
	overflow:hidden;
	width:720px;
	height:128px;
	clip:rect(0,900px,0,0);
}
.clock span:before {
	left:calc(-2px);
	text-shadow:2px 0 blue;
	animation:c2 1s infinite linear alternate-reverse;
}
.clock span:after {
	left:3px;
	text-shadow:calc(-2px) 0 red;
	animation:c1 2s infinite linear alternate-reverse;
}
.clock.is-off {
	animation:is-off 2s linear infinite !important;
}
.glitch .clock {
	transform:skewX(0deg) scaleY(1);
	animation:clock-bag 4s linear infinite;
}
@keyframes c1 {
	0% {
	clip:rect(25px,9999px,28px,0);
}
5% {
	clip:rect(53px,9999px,73px,0);
}
10% {
	clip:rect(80px,9999px,7px,0);
}
15% {
	clip:rect(87px,9999px,95px,0);
}
20% {
	clip:rect(14px,9999px,10px,0);
}
25% {
	clip:rect(72px,9999px,23px,0);
}
30% {
	clip:rect(10px,9999px,22px,0);
}
35% {
	clip:rect(99px,9999px,48px,0);
}
40% {
	clip:rect(17px,9999px,37px,0);
}
45% {
	clip:rect(17px,9999px,100px,0);
}
50% {
	clip:rect(77px,9999px,33px,0);
}
55% {
	clip:rect(30px,9999px,9px,0);
}
60% {
	clip:rect(74px,9999px,59px,0);
}
65% {
	clip:rect(7px,9999px,72px,0);
}
70% {
	clip:rect(23px,9999px,99px,0);
}
75% {
	clip:rect(70px,9999px,20px,0);
}
80% {
	clip:rect(47px,9999px,72px,0);
}
85% {
	clip:rect(73px,9999px,17px,0);
}
90% {
	clip:rect(63px,9999px,2px,0);
}
95% {
	clip:rect(78px,9999px,63px,0);
}
100% {
	clip:rect(71px,9999px,91px,0);
}
}@keyframes c2 {
	0% {
	clip:rect(47px,9999px,9px,0);
}
5% {
	clip:rect(36px,9999px,23px,0);
}
10% {
	clip:rect(1px,9999px,4px,0);
}
15% {
	clip:rect(74px,9999px,68px,0);
}
20% {
	clip:rect(71px,9999px,84px,0);
}
25% {
	clip:rect(69px,9999px,25px,0);
}
30% {
	clip:rect(43px,9999px,10px,0);
}
35% {
	clip:rect(18px,9999px,72px,0);
}
40% {
	clip:rect(67px,9999px,65px,0);
}
45% {
	clip:rect(40px,9999px,6px,0);
}
50% {
	clip:rect(77px,9999px,50px,0);
}
55% {
	clip:rect(97px,9999px,92px,0);
}
60% {
	clip:rect(14px,9999px,85px,0);
}
65% {
	clip:rect(9px,9999px,34px,0);
}
70% {
	clip:rect(58px,9999px,59px,0);
}
75% {
	clip:rect(81px,9999px,67px,0);
}
80% {
	clip:rect(31px,9999px,2px,0);
}
85% {
	clip:rect(24px,9999px,8px,0);
}
90% {
	clip:rect(43px,9999px,38px,0);
}
95% {
	clip:rect(15px,9999px,18px,0);
}
100% {
	clip:rect(22px,9999px,73px,0);
}
23% {
	transform:scaleX(0.8);
}
}@keyframes clock-bag {
	0% {
	transform:translate(5px,3px);
}
2% {
	transform:translate(4px,4px);
}
4% {
	transform:translate(4px,1px);
}
6% {
	transform:translate(5px,3px);
}
8% {
	transform:translate(2px,3px);
}
10% {
	transform:translate(4px,3px);
}
12% {
	transform:translate(3px,2px);
}
14% {
	transform:translate(2px,5px);
}
16% {
	transform:translate(4px,4px);
}
18% {
	transform:translate(2px,3px);
}
20% {
	transform:translate(2px,4px);
}
22% {
	transform:translate(5px,2px);
}
24% {
	transform:translate(1px,1px);
}
26% {
	transform:translate(4px,1px);
}
28% {
	transform:translate(1px,5px);
}
30% {
	transform:translate(2px,1px);
}
32% {
	transform:translate(4px,2px);
}
34% {
	transform:translate(4px,5px);
}
36% {
	transform:translate(4px,1px);
}
38% {
	transform:translate(2px,4px);
}
40% {
	transform:translate(5px,2px);
}
42% {
	transform:translate(1px,5px);
}
44% {
	transform:translate(2px,3px);
}
46% {
	transform:translate(1px,1px);
}
48% {
	transform:translate(4px,4px);
}
50% {
	transform:translate(2px,1px);
}
52% {
	transform:translate(4px,5px);
}
54% {
	transform:translate(1px,5px);
}
56% {
	transform:translate(2px,1px);
}
58% {
	transform:translate(3px,5px);
}
60% {
	transform:translate(5px,3px);
}
62% {
	transform:translate(1px,2px);
}
64% {
	transform:translate(5px,1px);
}
66% {
	transform:translate(2px,3px);
}
68% {
	transform:translate(4px,2px);
}
70% {
	transform:translate(2px,2px);
}
72% {
	transform:translate(5px,4px);
}
74% {
	transform:translate(2px,4px);
}
76% {
	transform:translate(4px,5px);
}
78% {
	transform:translate(4px,2px);
}
80% {
	transform:translate(2px,5px);
}
82% {
	transform:translate(3px,1px);
}
84% {
	transform:translate(4px,2px);
}
86% {
	transform:translate(1px,5px);
}
88% {
	transform:translate(2px,2px);
}
90% {
	transform:translate(1px,2px);
}
92% {
	transform:translate(1px,1px);
}
94% {
	transform:translate(1px,5px);
}
96% {
	transform:translate(3px,2px);
}
98% {
	transform:translate(3px,4px);
}
100% {
	transform:translate(5px,2px);
}
1% {
	transform:scaleY(1) skewX(0deg);
}
1.5% {
	transform:scaleY(3) skewX(-60deg);
}
51% {
	transform:scaleX(1) scaleY(1) skewX(0deg);
}
52% {
	transform:scaleX(1.5) scaleY(0.2) skewX(80deg);
}
53% {
	transform:scaleX(1) scaleY(1) skewX(0deg);
}
}@keyframes is-off {
	0%,50%,80%,85% {
	opacity:1;
}
56%,57%,81%,84% {
	opacity:0;
}
58% {
	opacity:1;
}
71%,73% {
	transform:scaleY(1) skewX(0deg);
}
72% {
	transform:scaleY(3) skewX(-60deg);
}
91%,93% {
	transform:scaleX(1) scaleY(1) skewX(0deg);
	color:#fff;
}
92% {
	transform:scaleX(1.5) scaleY(0.2) skewX(80deg);
	color:green;
}
}

JS部分

$(document).ready(function() {

    function second_passed() {
        $('.clock').removeClass('is-off');
    }
    setTimeout(second_passed, 2000)

    $('.switcher').on('click', function(e) {
        e.preventDefault();
        $('.screen').toggleClass('glitch');
    });


    var newDate = new Date();
    newDate.setDate(newDate.getDate());

    setInterval(function() {

        var hours = new Date().getHours();
        var seconds = new Date().getSeconds();
        var minutes = new Date().getMinutes();

        var realTime = (hours < 10 ? '0' : '') + hours + ' : ' + (minutes < 10 ? '0' : '') + minutes + ' : ' + (seconds < 10 ? '0' : '') + seconds

        $('.time').html(realTime);
        $('.time').attr('data-time', realTime);

    }, 1000);

});

搭建环境/教程默认解压密码为：langren.info

源码数据库文件默认放置在www目录中

声明：
1.本文部分内容转载自其它媒体，但并不代表本站赞同其观点和对其真实性负责。
2.若您需要商业运营或用于其他商业活动，请您购买正版授权并合法使用。
3.如果本站有侵犯、不妥之处的资源，请在网站右边客服联系我们。将会第一时间解决！
4.本站所有内容均由互联网收集整理、网友上传，仅供大家参考、学习，不存在任何商业目的与商业用途。
5.本站提供的所有资源仅供参考学习使用，版权归原著所有，禁止下载本站资源参与商业和非法行为，请在24小时之内自行删除！

html源码浪人源码网琅仁软件工作室

故障闪烁数字时钟特效 CSS+JS html代码

源码分类

By:#浪人

友情链接

相关文章

By:#浪人