<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>2023年元旦倒计时网页动画效果</title>
<style>
/* latin */
@font-face {
font-family: 'Major Mono Display';
font-style: normal;
font-weight: 400;
src: url(font/RWmVoLyb5fEqtsfBX9PDZIGr2tFubRh7DXeR.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.holder {
position: absolute;
background-color: #ffffff;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
}
.new-year {
font-family: 'Major Mono Display', monospace;
color: #333333;
font-size: 20px;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
}
.year {
position: relative;
left: 50%;
display: table;
font-size: 6em;
transform: translateX(-50%);
}
.year2 {
transform: translateX(-50%) rotateX(180deg);
opacity: 0.2;
}
.digit {
display: inline-block;
margin: 0px;
padding: 0px;
position: relative;
opacity: 0;
}
.controls {
margin-top: 30px;
}
.control {
display: inline-block;
padding-left: 20px;
padding-right: 20px;
font-size: 0.8em;
border-left: 1px solid #333333;
opacity: 0;
position: relative;
top: 100px;
}
.control:first-child {
border-left: none;
}
.triangles {
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
opacity: 0;
}
.triangle {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #333333;
position: absolute;
opacity: 0;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no" >
<div class="holder">
<div class="new-year">
</div>
</div>
<script src="js/style.js"></script>
<script src='js/TweenMax.min.js'></script>
<script id="rendered-js" >
/* Timelines could have been written in a better way, I am sorry if I wrote them in a hurry. :D */
(function () {
var animation = {
newYear: document.querySelector(".new-year"),
range: function (min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
},
get period() {
var dateFuture = new Date(new Date().getFullYear() + 1, 0, 1);
var dateNow = new Date();
var seconds = Math.floor((dateFuture - dateNow) / 1000);
var minutes = Math.floor(seconds / 60);
var hours = Math.floor(minutes / 60);
var days = Math.floor(hours / 24);
hours = hours - days * 24;
minutes = minutes - days * 24 * 60 - hours * 60;
seconds = seconds - days * 24 * 60 * 60 - hours * 60 * 60 - minutes * 60;
return {
year: new Date().getFullYear() + 1,
days: days,
hours: hours,
minutes: minutes,
seconds: seconds };
},
element: function (parent, type, className, html) {
var element = document.createElement(type);
element.className = className;
if (typeof html !== "undefined") element.innerHTML = html;
parent.appendChild(element);
return element;
},
year: function (className) {
var timeline = new TimelineMax();
var year = animation.element(animation.newYear, "div", className);
for (var i = 0; i <= String(animation.period.year).length - 1; i++) {
var digit = animation.element(year, "div", "digit", String(animation.period.year).substr(i, 1));
digit.style.top = 0 - digit.clientHeight * 2 + "px";
timeline.
to(digit, 0.5, { top: 0, opacity: 1, ease: Bounce.easeOut });
}
return year;
},
animate: function () {
var year1 = animation.year("year year1");
var year2 = animation.year("year year2");
var controls = animation.element(animation.newYear, "div", "controls");
var days = animation.element(controls, "div", "control days");
var hours = animation.element(controls, "div", "control hours");
var minutes = animation.element(controls, "div", "control minutes");
var seconds = animation.element(controls, "div", "control seconds");
animation.controls = {
controls: controls,
days: days,
hours: hours,
minutes: minutes,
seconds: seconds };
animation.render();
var triangles = animation.element(year1, "div", "triangles");
var fullTimeline = new TimelineMax();
var triangleStorage = [];
for (var i = 0; i <= 50 - 1; i++) {
var timeline = new TimelineMax({ repeat: -1 });
var triangle = animation.element(triangles, "div", "triangle");
triangle.style.top = -50 + "px";
var time = animation.range(0, 100) / 100;
var duration = 1;
var direction = animation.range(1, 2) == 1 ? -1 : 1;
timeline.
set(triangle, { scale: animation.range(10, 20) / 10 }, time).
to(triangle, duration * 0.5, { opacity: 1 }, time).
to(triangle, duration, { top: "200%", rotationZ: animation.range(180, 360) * direction, rotationX: animation.range(180, 360) * direction }, time).
to(triangle, duration * 0.5, { opacity: 0 }, time + duration * 0.5);
fullTimeline.add(timeline, 0);
triangleStorage.push(triangle);
}
var previousWidth = 0;
var checkWidth = function () {
if (Math.abs(previousWidth - year1.clientWidth) > 1) {
for (var i = 0; i <= triangleStorage.length - 1; i++) {
triangleStorage[i].style.left = -5 + animation.range(0, year1.clientWidth) + "px";
}
previousWidth = year1.clientWidth;
}
setTimeout(checkWidth, 100);
};
checkWidth();
return new TimelineMax().
to(days, 0.5, { top: 0, opacity: 1 }, 0).
to(hours, 0.5, { top: 0, opacity: 1 }, 0.25).
to(minutes, 0.5, { top: 0, opacity: 1 }, 0.5).
2023年元旦倒计时网页动画效果.zip （4个子文件） 
2023年元旦倒计时网页动画效果 font 
RWmVoLyb5fEqtsfBX9PDZIGr2tFubRh7DXeR.woff2 17KB js style.js 5KB TweenMax.min.js 113KB
index.html 9KB资源评论
老鸟人生
- 粉丝: 0
- 资源: 6
