前端每日实战：109# 视频演示如何用 CSS 和 D3 创作一个用文字组成的心形图案

hosition 发布于2019-08-05 18:06 / 2469人阅读

摘要：引入库声明一个数组，包含若干单词用创建元素用为变量赋值删除文件中相关的元素和文件中相关的变量。把数组元素改为爱在各种语言的单词愛最后，为第个单词设置特殊的文字样式大功告成

效果预览

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

https://codepen.io/comehope/pen/xJvERW

可交互视频

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cm94eu6

源代码下载

每日前端实战系列的全部源代码请从 github 下载：

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 php心形图案用c语言搞一个心形如何用云服务器做一个个人网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/60538.html

前端每日实战：109# 视频演示如何用 CSS 和 D3 创作一个用文字组成的心形图案

摘要：引入库声明一个数组，包含若干单词用创建元素用为变量赋值删除文件中相关的元素和文件中相关的变量。把数组元素改为爱在各种语言的单词愛最后，为第个单词设置特殊的文字样式大功告成 showImg(https://segmentfault.com/img/bVbfwGW?w=400&h=303); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://cod...

EdwardUp 2019-08-29 16:25 评论0 收藏0
前端每日实战：109# 视频演示如何用 CSS 和 D3 创作一个用文字组成的心形图案

摘要：引入库声明一个数组，包含若干单词用创建元素用为变量赋值删除文件中相关的元素和文件中相关的变量。把数组元素改为爱在各种语言的单词愛最后，为第个单词设置特殊的文字样式大功告成 showImg(https://segmentfault.com/img/bVbfwGW?w=400&h=303); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://cod...

null1145 2019-08-26 12:14 评论0 收藏0
前端每日实战 167# 视频演示如何用 1 个 dom 元素创作两颗爱心

摘要：每一个阴影属性值就可以绘制出一个圆点，因为可以接收多个属性性，所以就可以用多个圆点来画点阵图了。 showImg(https://segmentfault.com/img/bVbsSVm?w=400&h=348); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/KLvENb 可交互视频此视频...

MkkHou 2019-08-05 17:03 评论0 收藏0
前端每日实战 167# 视频演示如何用 1 个 dom 元素创作两颗爱心

摘要：每一个阴影属性值就可以绘制出一个圆点，因为可以接收多个属性性，所以就可以用多个圆点来画点阵图了。 showImg(https://segmentfault.com/img/bVbsSVm?w=400&h=348); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/KLvENb 可交互视频此视频...

mingde 2019-08-02 15:06 评论0 收藏0
前端每日实战 167# 视频演示如何用 1 个 dom 元素创作两颗爱心

摘要：每一个阴影属性值就可以绘制出一个圆点，因为可以接收多个属性性，所以就可以用多个圆点来画点阵图了。 showImg(https://segmentfault.com/img/bVbsSVm?w=400&h=348); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/KLvENb 可交互视频此视频...

LdhAndroid 2019-08-30 10:56 评论0 收藏0