争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

如何使用CSS与D3完成用文字组成的心形动画效果(附代码)

时间:2024/3/16作者:未知来源:争怎路由网人气:

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于如何使用CSS和D3实现用文字组成的心形动画效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

效果预览

2843848771-5b76a23457efe_articlex.gif

源代码下载

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;
}

相关推荐:

如何使用CSS和D3实现黑白交叠的动画效果

如何使用纯CSS 实现一个没有DOM元素的动画效果

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

以上就是如何使用CSS和D3实现用文字组成的心形动画效果(附代码)的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:如何运用CSS与D3完成用文字组成的心形动画效果(附代码)




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版