Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So verwenden Sie CSS und D3, um eine Reihe von Laternen zu implementieren (mit Code)

不言
Freigeben: 2018-08-25 17:45:06
Original
2362 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS und D3 zur Implementierung einer Reihe von Laternen (mit Code). Ich hoffe, dass er für Freunde in Not hilfreich ist dir geholfen.

Effektvorschau

So verwenden Sie CSS und D3, um eine Reihe von Laternen zu implementieren (mit Code)

Quellcode-Download

https://github.com/comehope /front-end-daily-challenges

Codeinterpretation

Dom definieren, der Container enthält 9 Elemente, die 9 Zahlen darstellen:

<div>
    <span>3</span>
    <span>1</span>
    <span>4</span>
    <span>1</span>
    <span>5</span>
    <span>9</span>
    <span>2</span>
    <span>6</span>
    <span>5</span>
</div>
Nach dem Login kopieren

Zentrierte Anzeige:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}
Nach dem Login kopieren

Definieren Sie die Containergröße:

.pi {
    width: 30em;
    height: 30em;
    font-size: 12px;
}
Nach dem Login kopieren

Legen Sie 9 Zahlen in ein 3 * 3-Raster:

.pi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.2em;
}

.pi span {
    color: white;
    font-size: 3em;
    background-color: hsl(0, 40%, 40%);
    font-family: sans-serif;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
Nach dem Login kopieren

Definieren Sie eine CSS-Variable im Dom, und der Variablenwert ist gleich der dargestellten Zahl durch das Element:

<p>
    <span>3</span>
    <span>1</span>
    <span>4</span>
    <span>1</span>
    <span>5</span>
    <span>9</span>
    <span>2</span>
    <span>6</span>
    <span>5</span>
</p>
Nach dem Login kopieren

Verschiedene Hintergrundfarben für verschiedene Zahlen festlegen:

.pi span {
    --c: hsl(calc(var(--d) * 36), 40%, 40%);
    background-color: var(--c);
}
Nach dem Login kopieren

Stellen Sie sicher, dass die Zahlen die gleiche Farbe wie der Hintergrund haben, Höhe der aktuellen Zahl beim Mouseover:

.pi span {
    color: var(--c);
    transition: 0.3s;
}

.pi span:hover {
    background-color: white;
    color: black;
    box-shadow: 0 0 1em yellow;
}
Nach dem Login kopieren

An diesem Punkt ist das visuelle Effektdesign abgeschlossen. Verwenden Sie als Nächstes d3, um Dom-Elemente und CSS-Variablen stapelweise zu verarbeiten.
Stellen Sie die d3-Bibliothek vor:

<script></script>
Nach dem Login kopieren

Löschen Sie das dom-Element, das die Zahl in der HTML-Datei darstellt, verwenden Sie d3, um das dom-Element zu erstellen, das die Zahl darstellt, und legen Sie die CSS-Variable fest:

const PI = '314159265';

d3.select('.pi')
    .selectAll('span')
    .data(PI)
    .enter()
    .append('span')
    .style('--d', (d) => d)
    .text((d) => d);
Nach dem Login kopieren

Geben Sie PI auf 100 Ziffern um:

const PI = '3141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067';
Nach dem Login kopieren

Ändern Sie gleichzeitig das Raster in ein 10 * 10-Layout:

.pi {
    grid-template-columns: repeat(10, 1fr);
}

.pi span {
    font-size: 1.3em;
}
Nach dem Login kopieren

Erstellen Sie als Nächstes einen Schleifenbeleuchtungseffekt.

CSS-Klassen für jedes Zahlenelement hinzufügen. Der Klassenname von Nummer 0 ist d0, der Klassenname von Nummer 1 ist d2 und so weiter:

d3.select('.pi')
    .selectAll('span')
    .data(PI)
    .enter()
    .append('span')
    .attr('class', (d) => `d${d}`)
    .style('--d', (d) => d)
    .text((d) => d);
Nach dem Login kopieren

Schleifenvariable definieren number, das bei 1 beginnt und schrittweise ansteigt:

let number = 1;
Nach dem Login kopieren

Definieren Sie eine Funktion, um eine Reihe von Elementen mit einer bestimmten Zahl zum Leuchten zu bringen:

function show() {
    d3.selectAll(`.pi span.d${number % 10}`)
        .classed('show', true);
    d3.selectAll(`.pi span.d${(number-1) % 10}`)
        .classed('show', false);
    number++;
}
Nach dem Login kopieren

Stellen Sie abschließend ein Intervall ein und rufen Sie das oben Gesagte auf wiederholt die Funktion, um jede Zahlengruppe nacheinander aufleuchten zu lassen:

setInterval(show, 500);
Nach dem Login kopieren

Du bist fertig!

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um den Effekt von Regenbogenstreifentext zu erzielen (mit Code)

Verwendung reines CSS, um gestreiften Text zu erzielen. Animationseffekt metallischer dreidimensionaler Schaltflächen (mit Quellcode)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS und D3, um eine Reihe von Laternen zu implementieren (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage