代码
链接
结果展示

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>图片文字介绍滑动效果</title><style type="text/css">* {/*文末有解释*/margin: 0;padding: 0}#outter {/* 设置利用的屏幕的宽度 */width: 1560px;}#pn {/* 设置了浮动，对应三个的浮动 */width: 520px;/*每个图片的宽度*/height: 500px;/*每个图片的高度*/float: left;/*从左开始排起,直到叠加的width > 1560px   (利用的屏幕的宽度) *//*注意：这里的width是没有算上margin的，因为margin为0*/overflow: hidden;/*文末有解释*/position: relative;/*相对定位*/}img {/*与上面的浮动相对应*//*设置图片的宽度和高度*/width: 520px;height: 500px;}p {display: block;/*转化为块元素 ,这个很重要！！！文末有解释*//*设置成了块元素后才有宽度与高度*/width: 520px;height: 500px;position: absolute;/*绝对定位 : 即相对于相对定位的绝对定位*/top: 460px;/*如此：距离相对定位的top距离460px*/background-color: rgba(0, 0, 0, 0.3);/*介绍的背景色*/padding: 0;transition: all 1s linear; /*过渡*/}p b {/* 当没有规定width与height的大小时,就是p的行数为height,width为父元素的width */display: block;color: aqua;/*粗字体的颜色*/text-align: center;/*水平居中*//*下面两行主要是让自己记好 行高!=字体大小 */line-height: 40px;/*每行的高度*/font-size: 20px;/*字体的大小*/}p span {display: block;margin: 10px;/*内距*/line-height: 20px;color: rgb(226, 223, 223);/*介绍的字体颜色，偏白，与背景颜色相反，便于观看*/}p:hover {/*当鼠标移动到名字上时*/top: 0;/*简介的那块领域到顶*/}</style>
</head><body><div id="outter"><div id="pn"><img src="桐人背影拔刀.jpg"><p><b>桐人</b><span>介绍：桐谷和人，轻小说《刀剑神域》及其衍生作品中的男主角。故事起始开始玩SAO时是14岁， 两年后的故事本篇（此处指脱离SAO后）是16岁。名副其实的重度网络游戏玩家。拥有超群的反射神经和洞察力。因为完全潜行正式版的SAO而被卷入死亡游戏，并以此为开端，牵扯进各种的虚拟世界事件。五官看起来像少女一样纤细，性格却非常冷淡，给人一种“捉摸不定”、“年龄不详”的印象。</span></p></div><div id="pn"><img src="云瑾.jpg"><p><b>云堇</b><span>介绍:云堇，米哈游出品的游戏《原神》及其衍生作品中的角色,“云翰社”现任当家，集剧作与演唱能力于一身的璃月戏曲名角。风格自成一派，雅致柔美，恰如其人 。</span></p></div><div id="pn"><img src="爱丽丝.png"><p><b>爱丽丝</b><span>爱丽丝·滋贝鲁库是轻小说作品《刀剑神域》Alicization篇中的女主角。金色的长发，小时候一身朴素的打扮。在11岁时和桐人、尤吉欧一起前往终结山脉探险，但在回来的路上不幸触犯了《禁忌目录》，并在次日被带走。后在公理教会受“整合之秘术”影响失去了之前的记忆，成为了侍奉最高祭司的整合骑士。</span></p></div></div>
</body></html>

链接

*{margin:0; padding:0;}的使用
*{margin:0; padding:0;} 代表了网页中所有元素，包括body ,ul, li列表标签 ,p,H标题标签,dd,dt 等……都有默认的margin 或padding值的，加上这句就可以删除浏览器这些默认值，方面后面的设置。

注意： 不要无脑使用 *{margin:0; padding:0;}
详情可参考：*{margin:0; padding:0;}的利弊

overflow:hidden;
见链接：overflow:hidden的用法
display: block;
见链接：display:block详解

结果展示

鼠标移到名字上面后：

完成~~~
刚学，如有不对之处，请大佬指出，小弟感激不尽！

图片文字介绍滑动效果代码介绍相关推荐

产品图片无缝水平滚动效果代码
产品图片无缝水平滚动效果代码: 在众多的网站都有这样的效果,那就是产品图片可以不间断的无缝滚动,效果挺美观的,也给静态的页面增加了几分动感,也便利了浏览者查看产品,算是比较好的效果吧,下面就介绍一下如 ...
python调用百度接口实现ocr识别_Python调用百度OCR实现图片文字识别的示例代码
百度AI提供了一天50000次的免费文字识别额度,可以愉快的免费使用!下面直接上方法: 首先在百度AI创建一个应用,按照下图创建即可,创建后会获得如下: 创建后会获得如下信息: APP_ID = '* ...
python 百度ocr安装_Python调用百度OCR实现图片文字识别的示例代码
百度AI提供了一天50000次的免费文字识别额度,可以愉快的免费使用!下面直接上方法: 首先在百度AI创建一个应用,按照下图创建即可,创建后会获得如下: 创建后会获得如下信息: APP_ID = '* ...
html自动切换文字,JS实现自动切换文字的导航效果代码
本文实例讲述了JS实现自动切换文字的导航效果代码.分享给大家供大家参考.具体如下: 这里介绍支持自动切换文字的导航菜单效果,实际上看上去并不像菜单,猛一看倒像是一个Select下拉框,两侧带有箭头控制 ...
php 图片裁剪保存,PHP实现图片裁剪、添加水印效果代码
这篇文章主要介绍了PHP实现图片裁剪.添加水印效果代码,本文给出代码示例,代码中包含一些说明注释,需要的朋友可以参考下 3.PHP对图像的裁剪裁剪之前 header("content-ty ...
图片文字制作视差效果
图片文字制作视差效果教程地址:原文地址(YouTube) B站教程:原文转载(bilibili) 两个视频的内容相同,第二个为转载效果图代码区 html <section><p ...
首页banner广告图片轮换超炫效果代码
原文:首页banner广告图片轮换超炫效果代码源代码下载地址:http://www.zuidaima.com/share/1745329876454400.htm 兼容IE.火狐.谷歌.360.猎豹 ...
利用html实现文字闪烁的效果代码
利用html实现文字闪烁的效果代码单个元素设置闪烁效果多个元素设置闪烁效果网页中使文字闪烁的标签是什么,其实没有html标签可以直接让文字闪烁的,需要使用js脚本来实现. 单个元素设置闪烁效果 ...
html中鼠标移动有下拉图片,JQuery自适应全屏图片滚动鼠标上下滑动效果代码
特效描述:JQuery 自适应全屏图片滚动鼠标上下滑动效果.JQuery:全屏随鼠标滑动而滚动代码结构 1. 引入JS 2. HTML代码 $(function(){ $('body,html' ...

图片文字介绍滑动效果代码介绍

代码

链接

结果展示

图片文字介绍滑动效果代码介绍相关推荐

最新文章

热门文章