Heim

JS-Spezialeffekte

CSS3-Spezialeffekte

CSS3+js einfacher Digitaluhrcode

Jetzt downloaden Vorschau

JS-Code

<script>
'use strict';

var size = 86;
var columns = Array.from(document.getElementsByClassName('column'));
var d = undefined,
    c = undefined;
var classList = ['visible', 'close', 'far', 'far', 'distant', 'distant'];
var use24HourClock = true;

function padClock(p, n) {
	return p + ('0' + n).slice(-2);
}

function getClock() {
	d = new Date();
	return [use24HourClock ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(padClock, '');
}

function getClass(n, i2) {
	return classList.find(function (class_, classIndex) {
		return i2 - classIndex === n || i2 + classIndex === n;
	}) || '';
}

var loop = setInterval(function () {
	c = getClock();

	columns.forEach(function (ele, i) {
		var n = +c[i];
		var offset = -n * size;
		ele.style.transform = 'translateY(calc(50vh + ' + offset + 'px - ' + size / 2 + 'px))';
		Array.from(ele.children).forEach(function (ele2, i2) {
			ele2.className = 'num ' + getClass(n, i2);
		});
	});
}, 200 + Math.E * 10);
</script>

Dies ist ein einfacher CSS3 JS-Digitaluhrcode, der automatisch die Ortszeit abruft und nach oben und unten scrollt, um Stunden, Minuten und Sekunden zu animieren, um die Uhreffekte der Webseite zu wechseln.

Haftungsausschluss

Alle Ressourcen auf dieser Website werden von Internetnutzern bereitgestellt oder von großen Download-Sites nachgedruckt. Bitte überprüfen Sie selbst die Integrität der Software! Alle Ressourcen auf dieser Website dienen nur als Referenz zum Lernen. Bitte nutzen Sie diese nicht für kommerzielle Zwecke. Andernfalls sind Sie für alle Folgen verantwortlich! Wenn ein Verstoß vorliegt, kontaktieren Sie uns bitte, um ihn zu löschen. Kontaktinformationen: admin@php.cn

Verwandter Artikel

Einfacher Vergleich: Was ist der Unterschied zwischen CSS3 und CSS?

13 Apr 2023

CSS ist eine Technologie zur Steuerung des Site-Stils, die im Allgemeinen in der Webentwicklung verwendet wird. CSS3 ist die dritte Version von CSS und eine aktualisierte Version von CSS2, die leistungsfähigere Stile und Spezialeffekte enthält. Was sind die Unterschiede zwischen CSS3 und CSS? Schauen wir genauer hin. 1. Verbesserungen von CSS3 gegenüber CSS2 Als aktualisierte Version von CSS2 wurde CSS3 in den folgenden Aspekten verbessert: 1. Selektoren: CSS3 fügt weitere Selektoren hinzu, wie z. B. Attributselektoren, Pseudoelementselektoren usw., was Entwicklern die Arbeit erleichtert Wählen Sie je nach Bedarf

Einfacher CSS3-Dropdown-Menüeffekt mit Unterstreichungs-Folgeeffekt

20 Mar 2017

Dies ist ein Dropdown-Menüeffekt mit folgendem Unterstreichungseffekt, der mit reinem CSS3 erstellt wurde. Das Dropdown-Menü verwendet CSS3-Transformation und -Übergang, um Unterstreichungs-Folgeeffekte und Dropdown-Menüeffekte zu erstellen.

CSS3 implementiert die Schaltflächennavigation mit einfacher Animation

24 Nov 2016

CSS3 implementiert die Schaltflächennavigation mit einfacher Animation

Detaillierte Erläuterung der Implementierung der Beichtfunktion zum chinesischen Valentinstag in HTML5+CSS3+JS

02 Sep 2017

Denn heute, am 28. August, ist Chinas Valentinstag, der chinesische Valentinstag. Als Programmierer bin ich nicht weit davon entfernt und habe immer noch das Herz, Single zu sein. Im Folgenden werde ich einen chinesischen Valentinstag erstellen +css3+js. Spezialeffekte und spezifischer Beispielcode finden Sie in diesem Artikel

Einfacher Flash-Effekt von CSS3-Elementen (HTML5-JQuery)

24 Nov 2016

Einfacher Flash-Effekt von CSS3-Elementen (HTML5-JQuery)

Einfacher Beispielcode zum Erstellen eines Fortschrittsbalkens mit CSS3

26 May 2017

In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung von CSS3 zum Erstellen eines einfachen Fortschrittsbalkens (Demo) vorgestellt.

Einfacher und stilvoller reiner CSS3-Tabs-Tab-Effekt

24 Mar 2017

Dies ist ein Tabs-Tab-Effekt, der mit reinem CSS3 erstellt wurde. Die Registerkarte „Tabs“ ist einfach und elegant und die folgende Unterstreichungsanimation wird beim Wechseln zwischen Tabs verwendet. Der Gesamteffekt ist sehr gut.

Implementierung von visuellen CSS3-Effekten

22 Mar 2018

Dieses Mal werde ich Ihnen die Implementierung visueller CSS3-Spezialeffekte vorstellen. Was sind die Vorsichtsmaßnahmen für die Realisierung visueller CSS3-Spezialeffekte? Das Folgende ist ein praktischer Fall.

So erzielen Sie mit CSS3 stereoskopische 3D-Effekte

14 Mar 2018

Dieses Mal zeige ich Ihnen, wie Sie mit CSS3 dreidimensionale 3D-Spezialeffekte erzielen. Was sind die Vorsichtsmaßnahmen für die Verwendung von CSS3, um dreidimensionale 3D-Spezialeffekte zu erzielen? Das Folgende ist ein praktischer Fall.

See all articles