本篇文章给大家带来的内容是关于如何使用css和d3实现用文字组成的心形动画效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
效果预览
源代码下载
https://github.com/comehope/front-end-daily-challenges
立即学习“前端免费学习笔记（深入）”；
代码解读
定义 dom，容器中包含 3 个子元素，每个子元素中有一个单词：
aaa bbb ccc
登录后复制
居中显示：
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 库：
登录后复制
声明一个数组，包含若干单词：
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;}
登录后复制
相关推荐：
如何使用CSS和D3实现黑白交叠的动画效果
如何使用CSS和D3实现黑白交叠的动画效果
如何使用CSS和D3实现黑白交叠的动画效果
以上就是如何使用CSS和D3实现用文字组成的心形动画效果（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2893726.html
