如何使用CSS和D3实现用文字组成的心形动画效果(code)

web前端|css教程如何使用CSS和D3实现用文字组成的心形动画效果(code)

transform,d3,css,html5,前端

web前端-css教程

本篇文章给大家带来的内容是关于如何使用CSS和D3实现用文字组成的心形动画效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

论坛道具源码,vscode重复发送,ubuntu-7.10,tomcat切换自己的,爬虫创业,mvc php 分页,孝感谷歌seo营销公司,jquery 购物网站模板下载,phpdisk模板下载lzw

效果预览

唯美静态首页源码下载,vscode运行vue代码,ubuntu 改成英文,tomcat全局使用,sqlite执行脚本文件,常用的网页爬虫系统是哪个,php中奖概率,阳江seo公司报价优惠,担保公司网站模板,搭建网页游戏,婚纱摄影dede模板lzw

评论asp源码,Vscode显示所有符号,ubuntu idea开发,tomcat安装教程环境,sqlite3关闭数据库失败,爬虫朝鲜,PHP购物车提示,如何实现seo优化排名,怎么写网站源码,动态网页设计模板化妆品lzw

源代码下载

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 实现一个没有DOM元素的动画效果

如何使用纯CSS实现一只移动的小白兔动画效果

transform