当前位置： 首页 > news >正文

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

news 文章来源：https://blog.csdn.net/weixin_44368963/article/details/133620535 2025/1/12 13:39:01

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

<!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>

相关文章：

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

依旧,先上效果图,可以看见,文字环绕这个椭圆形的图片, 依旧是遵循开源精神,代码就直接放下面了 (点个赞或者给个评论啥的吧,我就发现我的文章全是光看不点赞,不评论的的) <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8&quo…...

编程日记 2023/10/9 0:21:32

Day-05 CentOS7.5 安装 Docker

参考 &#xff1a; Install Docker Engine on CentOS | Docker DocsLearn how to install Docker Engine on CentOS. These instructions cover the different installation methods, how to uninstall, and next steps.https://docs.docker.com/engine/install/centos/ Doc…...

编程日记 2023/10/9 0:20:30

激光雷达：自动驾驶的眼睛

激光雷达&#xff1a;自动驾驶的眼睛 文章目录 引言激光雷达的原理自动驾驶中的应用激光雷达的优势激光雷达的挑战结论结论 2023星火培训【专项营】Apollo开发者社区布道师倾力打造&#xff0c;包含PnC、新感知等的全新专项课程上线了。理论与实践相结合&#xff0c;全新的PnC培…...

编程日记 2023/10/9 0:19:29

Scratch3.0下载

通俗易懂&#xff0c;直接上链接 链接&#xff1a;https://pan.baidu.com/s/1n-QFEQWT8im8BHQu1wIjtg?pwd1016 提取码&#xff1a;1016...

编程日记 2023/10/9 0:18:28

多功能频率计周期/脉宽/占空比/频率测量verilog，视频/代码

名称&#xff1a;多功能频率计周期、脉宽、占空比、频率测量verilog 软件&#xff1a;Quartus 语言&#xff1a;Verilog 代码功能&#xff1a; 多功能频率计&#xff0c;可测量信号的周期、脉冲宽度、占空比、频率&#xff0c;语言为verilog&#xff0c;quartus软件设计仿真…...

编程日记 2023/10/9 0:17:27

img标签src动态绑定资源失败问题

img标签src动态绑定资源失败问题 需要采用require的方式进行 在 Vue 中&#xff0c;require 是一个通用的模块加载函数&#xff0c;用于在运行时&#xff08;客户端或服务器端&#xff09;引入模块。它通常用于加载 JavaScript 文件、JSON 数据、静态资源等。 组件使用&#xf…...

编程日记 2023/10/9 0:16:27

【自学笔记】网络安全——黑客技术

想自学网络安全&#xff08;黑客技术&#xff09;首先你得了解什么是网络安全&#xff01;什么是黑客&#xff01;&#xff01;&#xff01; 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队…...

编程日记 2023/10/9 0:15:26

Rust 技术文档及详细使用命令

概述 Rust 是一种现代、安全、并发、高性能的系统级编程语言。它与其他语言相比具有许多独特的特性&#xff0c;例如内存安全、所有权系统和生命周期等&#xff0c;使得它成为编写可靠和高效软件的理想选择。 本文档将介绍 Rust 的基本概念、语法、工具以及常用命令&#xff…...

编程日记 2023/10/9 0:14:25

建立HTTP代理IP池的技术和工具支持

建立HTTP代理IP池需要多种技术和工具支持&#xff0c;包括代理服务器、IP地址池、IP地址验证、数据库技术、网络安全技术、IP地址获取工具、IP地址验证工具、数据库管理工具、网络安全工具和自动化工具等。 代理服务器 代理服务器是HTTP代理IP池的核心组成部分&#xff0c;它可…...

编程日记 2023/10/9 0:13:24

【机器学习】数据格式csv/txt/pkl

文章目录 序言1. 数据存成csv、txt还是pkl2. pandas怎么读取csv、txt文件或者pkl文件3. 数据格式&#xff1a;pkl文件补充介绍 序言 用什么格式存储场景挖掘得到的数据目前为止用到过的一些数据存储格式&#xff0c;如proto/xml/json/txt/csv等&#xff0c;还有pkl&#xff0c…...

编程日记 2023/10/9 0:11:21

unity脚本_Input鼠标键盘 c#

获取鼠标坐标 检测鼠标输入 如果在运行游戏场景中点击一下鼠标左键 检测鼠标抬起 选中即可 检测键盘按下 当前屏幕分辨率 注意&#xff1a;获取的是显示器的分辨率 获取设备屏幕宽高 屏幕休眠模式 窗口/全屏模式 移动设备屏幕转向...

编程日记 2023/10/9 0:10:19

解析‘找不到msvcp140.dll无法继续执行代码’这个问题的解决方法

大家好&#xff01;今天我要和大家分享的主题是“msvcp140.dll丢失的解决方法”。我们都知道&#xff0c;在运行一些软件或游戏时&#xff0c;经常会遇到“msvcp140.dll丢失”的错误提示&#xff0c;这会让我们非常烦恼。那么&#xff0c;这个问题是什么原因引起的呢&#xff1…...

编程日记 2023/10/9 0:09:18

练[FBCTF2019]RCEService

[FBCTF2019]RCEService 文章目录 [FBCTF2019]RCEService掌握知识解题思路关键paylaod 掌握知识 ​ json字符串格式&#xff0c;命令失效(修改环境变量)–绝对路径使用linux命令&#xff0c;%0a绕过preg_match函数&#xff0c;代码审计 解题思路 打开题目链接&#xff0c;发现…...

编程日记 2023/10/9 0:07:16

php实战案例记录(21)sprintf函数

在PHP中&#xff0c;sprintf()函数用于格式化字符串并返回一个字符串。它可以根据指定的格式对参数进行格式化&#xff0c;并将结果存储在一个字符串中。 sprintf()函数的语法如下&#xff1a; sprintf(format, var1, var2, ...)其中&#xff0c;format是一个包含格式说明符的…...

编程日记 2023/10/9 0:05:15

【数据结构-二叉树 九】【树的子结构】：树的子结构

废话不多说&#xff0c;喊一句号子鼓励自己&#xff1a;程序员永不失业&#xff0c;程序员走向架构&#xff01;本篇Blog的主题是【子结构】&#xff0c;使用【二叉树】这个基本的数据结构来实现&#xff0c;这个高频题的站点是&#xff1a;CodeTop&#xff0c;筛选条件为&…...

编程日记 2023/10/9 0:04:13

七张图解锁Mybatis整体脉络，让你轻松拿捏面试官

前言 MyBatis是一款ORM&#xff08;Object-Relational Mapping&#xff09;框架&#xff0c;其主要用于将Java对象与关系数据库之间进行映射&#xff0c;凭借其轻量性、稳定性以及广泛的开源社区其受到了广大开发者的追捧。 那MyBatis为我们做了哪些事情呢&#xff1f;其实&a…...

编程日记 2023/10/9 0:03:12

力扣之删除有序数组中的重复项

力扣&#xff1a;26. 删除有序数组中的重复项 - 力扣&#xff08;LeetCode&#xff09; 方法&#xff1a;双指针法。 我的方法&#xff1a; class Solution { public:int removeDuplicates(vector<int>& nums) {int slow 0,fast;for(fast 0; fast < nums.size()…...

编程日记 2023/10/9 0:02:11

pnpm、npm、yarn 包管理工具『优劣对比』及『环境迁移』

前言 博主在开发前端网站的时候&#xff0c;发现随着开发的项目的逐渐增多&#xff0c;安装的依赖包越来越臃肿&#xff0c;依赖包的安装速度也是非常越来越慢&#xff0c;多项目开发管理也是比较麻烦。之前我就了解过 pnpm&#xff0c;但是当时担心更换包管理环境可能会出现的…...

编程日记 2023/10/9 0:00:08

【AntDesign】多环境配置和启动

环境分类&#xff0c;可以分为 本地环境、测试环境、生产环境等&#xff0c;通过对不同环境配置内容&#xff0c;来实现对不同环境做不同的事情。 AntDesign 项目&#xff0c;通过 config.xxx.ts 添加不同的后缀来区分配置文件&#xff0c;启动时候通过后缀启动即可。 config…...

编程日记 2023/10/8 23:59:08

Unix Network Programming Episode 78

‘getaddrinfo’ Function The gethostbyname and gethostbyaddr functions only support IPv4. The API for resolving IPv6 addresses went through several iterations, as will be described in Section 11.20(See 8.9.20); the final result is the getaddrinfo function…...

编程日记 2023/10/8 23:58:07

学习笔记（css穿透、vue-cookie、拦截器、vuex、导航守卫、token/Cookie、正则校验）

目录 一、记录 1、CSS穿透 2、输入框是否提示输入 3、插槽 #slot 4、v-deep深入改掉属性值 二、vue-cookie 1、官方文档 2、使用 三、拦截器 1、请求拦截器 2、响应拦截器 四、vuex对信息存取改 五、路由导航守卫 1、登录思路 2、设置白名单 六、Token与Cookie…...

编程日记 2023/10/8 23:57:06

Day4：Linux系统编程1-60P

我的学习方法是&#xff1a;Linux系统编程&#xff08;看pdf笔记&#xff09; Linux网络编程 WebServer 01P-17P Linux相关命令及操作 cp -a dirname1 dirname2 复制目录 cp -r dirname1 dirname2 递归复制目录 1 到目录 2 这里-a 和-r 的差别在于&#xff0c;-a 是完全复制…...

编程日记 2023/10/8 23:56:05

【HuggingFace】Transformers（V4.34.0 稳定）支持的模型

Transformer 4.43.40 版本是自然语言处理领域的一个重要工具包&#xff0c;为开发者提供了丰富的预训练模型资源&#xff0c;可以用于各种文本处理任务。在这个版本中&#xff0c;Transformer 支持了众多模型&#xff0c;每个模型都具有不同的优势和适用领域。下面是一个 Trans…...

编程日记 2023/10/8 23:55:04

oracle 导入数据泵常用语句

oracle常用语句 window10 导出导入数据泵文件导入数据泵文件导出数据泵文件 oracle表空间查询、剩余空间查询查询表空间大小及对应文件查询各个表空间大小扩充表空间 window10 导出导入数据泵文件 导入数据泵文件 首先将数据泵文件放在oracle安装得对应位置&#xff0c;例如&…...

编程日记 2023/10/8 23:54:03

tensorflow中的常见方法

1.tf.argmax(input,axis) tf.argmax(input,axis)根据axis取值的不同返回每行或者每列最大值的索引。 axis 0: 比较每一列的元素&#xff0c;将每一列最大元素所在的索引记录下来&#xff0c;最后输出每一列最大元素所在的索引数组。 test[0] array([1, 2, 3]) test[1] …...

编程日记 2023/10/8 23:53:02

【周末闲谈】“PHP是最好的语言”这个梗是怎么来的？

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️周末闲谈】 系列目录 ✨第一周 二进制VS三进制 ✨第二周 文心一言&#xff0c;模仿还是超越&#xff1f; ✨第二周 畅想AR 文章目录 系列目录前言最早的出处关于PHP语言优点缺点网络评价 总结 前言 …...

编程日记 2023/10/8 23:52:01

四位十进制数字频率计VHDL，仿真视频、代码

名称&#xff1a;四位十进制数字频率计VHDL&#xff0c;quartus仿真 软件&#xff1a;Quartus 语言&#xff1a;VHDL 代码功能&#xff1a; 使用直接测频法测量信号频率&#xff0c;测频范围为1~9999Hz&#xff0c;具有超量程报警功能 演示视频&#xff1a;四位十进制数字频…...

编程日记 2023/10/8 23:51:00

Unity实现设计模式——策略模式

Unity实现设计模式——策略模式 策略模式是一种定义一些列算法的方法&#xff0c;这些所有的算法都是完成相同的工作&#xff0c;只是实现不同。它可以通过相同的方式调用所有的算法&#xff0c;减少各种算法类与使用算法类之间的耦合。 策略模式的 Strategy 类层次为 Contex…...

编程日记 2023/10/8 23:49:59

C++基础——数据类型

1 概述 在创建变量和常量的时候&#xff0c;都需要指定其数据类型&#xff0c;以便为其分配合适的内存空间。 其中宏常量不需要指定类型&#xff0c;是因为宏定义是字符替换。 2 整型 整型表示的是整数&#xff0c;C中的整型有以下几种&#xff1a; 数据类型占用空间取值范…...

编程日记 2023/10/8 23:48:57

文本自动输入/删除的加载动画效果

效果展示 CSS 知识点 绕矩形四周跑的光柱动画实现animation 属性的 steps 属性值运用 页面基础结构实现 <div class"loader"><!-- span 标签是围绕矩形四周的光柱 --><span></span><span></span><span></span>&l…...

编程日记 2023/10/8 23:47:56

免费自助音乐网站申请/百度seo排名软

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 安全生产模拟考试一点通&#xff1a;茶艺师&#xff08;中级&#xff09;考试内容是安全生产模拟考试一点通总题库中生成的一套茶艺师&#xff08;中级&#xff09;考试总结&#xff0c;安全生产模拟考试一点通上茶艺…...

编程日记 2025/1/12 12:38:47

点击到达网站指定位置怎么做/如何免费找精准客户

基本Kmeans算法介绍及其实现 http://blog.csdn.net/qll125596718/article/details/8243404/ kmeans http://www.52ml.net/1695.html转载于:https://www.cnblogs.com/XDJjy/p/4975984.html...

编程日记 2025/1/12 12:05:23

女生做网站编辑好吗/网站收录有什么用

最近进行性能排查的时候发现一个怪事&#xff1a;用php-memcache&#xff0c;缓存命中率越高CPU反而占用越大。联想起之前用Xcache进行载入速度排除测试时也出现此问题&#xff0c;不禁疑惑了&#xff1a;不是说缓存命中率越高越好么&#xff1f;怎么变成烧CPU了&#xff1f;今…...

编程日记 2025/1/12 11:19:32

佛山顺德容桂网站制作/seo虚拟外链

一、在项目的根目录下新建external文件夹 二、将你要导入的包放入external文件夹 三、在你要导入的包的根目录内&#xff0c;执行go mod init example.com/xxx/xxx&#xff0c;把包名替换为你自己的&#xff1b; 四、打开你项目的go.mod文件&#xff0c;引入你要引入的包&am…...

编程日记 2025/1/12 9:42:14

wordpress 更新url/网站快速排名

1、PNP逻辑数据库。 LOOP获取信息类型数据。 TABLES: PERNR . INFOTYPES: 0000, 0001 .START-OF-SELECTION.GET PERNR .LOOP AT P0000 WHERE ......ENDLOOP.LOOP AT P0001 WHERE ......ENDLOOP. 宏获取信息类型数据。 TABLES: PERNR, T001P. INFOTYPES: 0000, 0001 .GET PERNR …...

编程日记 2025/1/12 4:45:44

网站建设有哪些软件/网络营销的四个特点

CUDA基本使用方法 在介绍OpenCV中GPU模块使用之前&#xff0c;先回顾下CUDA的一般使用方法&#xff0c;其基本步骤如下&#xff1a; 1.主机代码执行&#xff1b;2.传输数据到GPU&#xff1b;3.确定grid&#xff0c;block大小&#xff1b; 4.调用内核函数&#xff0c;GPU运行程序…...

编程日记 2025/1/12 3:58:31