css实现不规则图片文字环绕效果

news2024/11/21 0:36:45

依旧,先上效果图,可以看见,文字环绕这个椭圆形的图片,
在这里插入图片描述
依旧是遵循开源精神,代码就直接放下面了
(点个赞或者给个评论啥的吧,我就发现我的文章全是光看不点赞,不评论的的)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css实现不规则文字环绕效果</title>
  <style>
    img {
      height: 466;
      width: 350px;
      float: left;
      margin-right: 20px;
      shape-outside: ellipse(50% 50% at 50% 50%);
      clip-path: ellipse(50% 50% at 50% 50%);
    }

    h1 {
      font-size: 40px;
      text-align: center;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <img src="./images/7.png" alt="阿狸">
  <h1>这是阿狸</h1>
  <p>被动;击杀小兵或野怪会为阿狸提供一层【魂魄碎片】。在拥有9个碎片后，阿狸会消耗掉它们来治疗自身35-95 (于1-18级) (+20%
    法术强度)生命值。当阿狸参与击杀一名她在3秒内造成过伤害的敌方英雄后，她会享用其魂魄，来治疗自身75-165
    (于1-18级) (+30% 法术强度)生命值。</p>
  <p>q:阿狸投出然后收回她的宝珠，在放出时会沿途对敌人造成40/65/90/115/140 (+45% 法术强度)魔法伤害，在收回时则会沿途对敌人造成40/65/90/115/140 (+45% 法术强度)真实伤害。</p>
  <p>w:阿狸释放出3团狐火来追踪附近的敌人们并造成50/75/100/125/150 (+30%
    法术强度)魔法伤害，第一团之后的狐火降低至12/19.5/27/34.5/42（+9％*AP）伤害。她还会获得在2秒里持续衰减的40%移动速度。狐火持续时间2.5秒。狐火的优先度顺序为:被魅惑妖术命中的英雄、被阿狸攻击过的敌人、然后是其他英雄。20%生命值以下的小兵会受到200%伤害。
  </p>
  <p>e:阿狸献出红唇热吻，魅惑命中的首个敌人80/110/140/170/200 (+60% 法术强度)魔法伤害。 这个技能会中止任何进行中的移动技能。</p>
  <p>r:阿狸灵活地突进，并对附近的敌人们发射3颗灵魄弹，优先选择英雄。这些灵魄弹每颗造成60/90/120（+35％AP）魔法伤害。这个技能可以在10秒内再次施放至多2次，然后就会进入冷却阶段。
    在【灵魂突袭】持续时间内，如果阿狸用【摄魂夺魄】吞噬了一个英雄的魂魄，那么阿狸将【灵魂突袭】再次施放的持续时长延长至多10秒，并且会额外获得【灵魂突袭】的一次额外的施放机会(至多可储存3次施放机会)。</p>
  <p>
    英雄联盟中的每个英雄都有着独特的DNA，这可与生物学无关。在英雄设计中，DNA代表着设计Design(游戏玩法)，叙事Narrative(主题和故事)以及美术Art(…美术)。这三个要素是每个英雄的组成部分，设计师团队确保他们相互融合并相互提升。但并不总是这样。几年前，由某一项要素为中心，其他设计围绕它的做法并不罕见。阿狸就是仅仅建立在主题之上的这样一位英雄。

    　　她的目标很简单：将九尾狐的故事加入英雄联盟。

    　　这种狡猾生物的神话普遍存在于亚洲，即便不同国家之间存在着差异，但故事的核心是相同的。故事讲述了一只神奇的狐狸，它能随心更改自己的外观 –
    通常意味着它会变成非常有魅力的女人，运用美貌和魅力诱惑无辜的男人走向灭亡。可怜的傻瓜死后，九尾狐会吸取他们的阳气，或者取决于不同版本，吃掉他们的心、肝或者尸体。

    　　要依据这些神话构建阿狸太困难了。比如，开发团队并不想将现有的故事复制粘贴到英雄联盟中。阿狸仍然需要有独特感，哪怕她的原型基于现实世界的神话。此外，还有可能惹怒任何认为他们的故事版本未能被阿狸准确表达出来的人。高级游戏设计师Colt
    “Ezreal” Hallam说，“早期我们考虑过将这些故事融为一个整体，但后来觉得这对不同文化的不同故事都不尊重。”</p>
  <p>
    因为我们的计划是在韩服开服时发布阿狸，所以开发团队把重心放在了Gumiho身上，它是韩国版的九尾狐。当Gumiho变形时，它们仍会保留一些狐狸的特征，例如毛茸茸的耳朵或是九尾。杀死它们的人类猎物后，取决于故事，它们要么对着尸体大快朵颐，要么吸尽他们的阳气。Gumiho常被视作纯粹的邪恶(有点类似老派，不那么光彩动人的吸血鬼)，所以阿狸的挑战在于创造一个更加让人怜悯的角色。“你玩游戏时就是主角，即便你做的事情邪恶透顶。”
    剧情作家Alex “Skribbles” Yee说。“我们必须找到阿狸杀戮的动机，才能让她更有关联感。”</p>
  <p>
    阿狸的故事讲述了一只想成为人类的聪明狐狸。一个下午，狐狸在人类的战斗结束后，被一个人残余的气息吸引。狐狸形态的阿狸本能地吸取了即将从他嘴边飘散的阳气，并部分地变幻为人类。她倾国倾城——也知道这背后隐藏的力量。她用魅力引诱男人走向死亡，汲取着越来越多的阳气，试图变为完整的人。但是她渐长的人性作为道德的指南针，她很快发现自己再也无法肆意地凭借本能杀戮。
  </p>
</body>

</html>