如何使用CSS和D3实现用文字组成的心形动画效果(附代码)
Aug 18, 2018 am 11:10 AM本篇文章给大家带来的内容是关于如何使用CSS和D3实现用文字组成的心形动画效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
效果预览
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含 3 个子元素,每个子元素中有一个单词:
<div class="love"> <span>aaa</span> <span>bbb</span> <span>ccc</span> </div>
居中显示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: black; }
定义容器尺寸:
.love { width: 450px; height: 450px; }
设置文本样式:
.love { position: relative; } .love span { position: absolute; left: 0; color: goldenrod; font-size: 20px; font-family: sans-serif; text-shadow: 0 0 1em white; }
定义文本左右往复移动的动画:
.love span { animation: x-move 10s ease-in-out infinite alternate; } @keyframes x-move { to { left: 450px; } }
定义子元素的下标变量,设置动画延时,使各单词依次入场:
.love { --particles: 3; } .love span { animation-delay: calc(20s / var(--particles) * var(--n) * -1); } .love span:nth-child(1) { --n: 1; } .love span:nth-child(2) { --n: 2; } .love span:nth-child(3) { --n: 3; }
增加文本沿心形运动的动画效果:
.love span { animation: x-move 10s ease-in-out infinite alternate, y-move 20s linear infinite; } @keyframes y-move { 0% { transform: translateY(180px); } 10% { transform: translateY(45px); } 15% { transform: translateY(5px); } 18% { transform: translateY(0); } 20% { transform: translateY(5px); } 22% { transform: translateY(35px); } 24% { transform: translateY(65px); } 25% { transform: translateY(110px); } 26% { transform: translateY(65px); } 28% { transform: translateY(35px); } 30% { transform: translateY(5px); } 32% { transform: translateY(0); } 35% { transform: translateY(5px); } 40% { transform: translateY(45px); } 50% { transform: translateY(180px); } 71% { transform: translateY(430px); } 72.5% { transform: translateY(440px); } 75% { transform: translateY(450px); } 77.5% { transform: translateY(440px); } 79% { transform: translateY(430px); } 100% { transform: translateY(180px); } }
接下来用 d3 批量处理 dom 元素和 css 变量。
引入 d3 库:
<script src="https://d3js.org/d3.v5.min.js"></script>
声明一个数组,包含若干单词:
const words = ['aaa', 'bbb', 'ccc'];
用 d3 创建 dom 元素:
d3.select('.love') .selectAll('span') .data(words) .enter() .append('span') .text((d) => d);
用 d3 为 css 变量赋值:
d3.select('.love') .style('--particles', words.length) .selectAll('span') .data(words) .enter() .append('span') .style('--n', (d, i) => i + 1) .text((d) => d);
删除 html 文件中相关的 dom 元素和 css 文件中相关的 css 变量。
把数组元素改为“爱”在各种语言的单词:
const words = [ '愛', 'Love', 'Amour', 'Liebe', 'Amore', 'Amor', 'Любовь', 'الحب', 'प्यार', 'Cinta', 'Αγάπη', '사랑', 'Liefde', 'Dashuri', 'Каханне', 'Ljubav', 'Láska', 'Armastus', 'Mahal', 'אהבה', 'Szerelem', 'Grá', 'Mīlestība', 'Meilė', 'Любов', 'Љубовта', 'Cinta', 'عشق', 'Dragoste', 'Láska', 'Renmen', 'ፍቅር', 'munaña', 'Sevgi', 'Љубав', 'karout', 'amà', 'amôr', 'kærleiki', 'mborayhu', 'Upendo', 'sòòyayyàà', 'ljubav', 'Սեր', 'сүю', 'сүйүү', 'tia', 'aroha', 'KHAIR', 'प्रेम', 'kjærlighet', 'munay', 'jecel', 'Kärlek', 'soymek', 'Mahal', 'ярату', 'محبت', 'sopp', 'uthando', 'ความรัก', 'Aşk', 'Tình yêu', 'ליבע'];
最后,为第 1 个单词设置特殊的文字样式:
.love span:first-child { color: orangered; font-size: 3em; text-shadow: 0 0 0.1em black, 0 0 1em white; z-index: 1; }
相关推荐:
Atas ialah kandungan terperinci 如何使用CSS和D3实现用文字组成的心形动画效果(附代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
