gpt4 book ai didi

css - 使用 CSS 降低 live type 的 Arc 效果

转载 作者:太空宇宙 更新时间:2023-11-03 18:58:40 25 4
gpt4 key购买 nike

我想知道这种效果 (http://igdaloff.com/mission.jpg) 是否可以通过 CSS 实现。我知道你可以弧形整个字母,但很好奇是否有可能保持单词的顶部平坦而只在底部弧形。 Illustrator/Photoshop 中的效果称为上弧或下弧。

http://igdaloff.com/mission.jpg

非常感谢任何指导。

最佳答案

不是真的,我唯一能想到的就是像下面的例子一样在每个字母上放一个类,但这不是最好的,但它起到了一半的作用。目前没有办法只使用 css 来 flex 文本,它是严格的矩形,因此您实际上只能解决文本的矩形属性。

<html>
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
.level1 {margin-top:0px !important; position:absolute;}
.level2 {margin-top:-2px; margin-left:10px; position:absolute;}
.level3 {margin-top:-4px; margin-left:20px; position:absolute;}
.level4 {margin-top:-3px; margin-left:30px; position:absolute;}
.level5 {margin-top:-2px; margin-left:40px; position:absolute;}
.level6 {margin-top:0px; margin-left:50px; position:absolute;}
</style>
</head>
<body>
<p><b class="level1">T</b><b class="level2">h</b><b class="level3">e</b>
<b class="level4">e</b><b class="level5">n</b><b class="level6">d.</b></p>
</body>
</html>

jsFiddle Version

关于css - 使用 CSS 降低 live type 的 Arc 效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12791148/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com