css的图片背景触动效果

最新推荐文章于 2022-06-24 21:39:22 发布
最新推荐文章于 2022-06-24 21:39:22 发布 · 173 阅读 · 0
文章标签：

#CSS

本文档详细展示了网站上小说封面的展示样式及交互效果，包括鼠标悬停时的样式变化等细节。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<head>
<styletype="text/css">
.BookpicBg{background-color:#CACACA;width:71px;height:108px;text-align:center;margin-left:5px;float:left;}
.BookpicBgimg{width:63px;height:88px;border:0;margin-top:4px;}
.BookpicBgspan{display:block;width:71px;height:14px;line-height:14px;overflow:hidden;}
.BookpicBgspana{color:#000000;text-decoration:none;}
.BookpicBgspana:hover{color:#38B217;}
.BookpicBgon{background-color:#000000;width:71px;height:108px;text-align:center;margin-left:5px;float:left;}
.BookpicBgonimg{width:63px;height:88px;border:0;margin-top:4px;}
.BookpicBgonspan{display:block;width:71px;height:14px;line-height:14px;overflow:hidden;}
.BookpicBgonspana{color:#ffffff;text-decoration:none;}
.BookpicBgonspana:hover{color:#38B217;}
.Rowpic{width:693px;float:left;font-size:12px;}
.RowPrev{width:14px;margin-top:39px;height:30px;text-align:center;margin-left:3px;float:left;}
.RowPreva.prev{background-image:url(/images2/cn/bookinfo/bprev.gif);background-repeat:no-repeat;width:14px;height:28px;display:block;}
.RowPreva.prevon{background-image:url(/images2/cn/bookinfo/bprevon.gif);background-repeat:no-repeat;width:14px;height:28px;display:block;}
.RowNext{width:14px;margin-top:39px;height:30px;text-align:center;margin-left:3px;float:left;}
.RowNexta.next{background-image:url(/images2/cn/bookinfo/bnext.gif);background-repeat:no-repeat;width:14px;height:28px;display:block;}
.RowNexta.nexton{background-image:url(/images2/cn/bookinfo/bnexton.gif);background-repeat:no-repeat;width:14px;height:28px;display:block;}
</style>
</head>
<body>

<divclass="Rowpic">
<divclass="BookpicBg"onMouseover="this.className='BookpicBgon'"onMouseout="this.className='BookpicBg'">
<atitle=""alt=""href="http://novel.isoshu.com/bookinfo/41326"target="_blank">
<imgsrc="http://img1.isoshu.com/cover/novel/2/20071106133332.jpg"title="小姨半个妻(第1节-11节)"/></a>
<span><ahref="http://novel.isoshu.com/bookinfo/41326"target="_blank">小姨半个妻</a></span>
</div>
<divclass="BookpicBg"onMouseover="this.className='BookpicBgon'"onMouseout="this.className='BookpicBg'">
<atitle=""alt=""href="http://novel.isoshu.com/bookinfo/41241"target="_blank">
<imgsrc="http://img1.isoshu.com/cover/novel/2/20071029143721.jpg"title="该死的欲望(第1章-7章)"/></a>
<span><ahref="http://novel.isoshu.com/bookinfo/41241"target="_blank">该死的欲望</a></span>
</div>
<divclass="BookpicBg"onMouseover="this.className='BookpicBgon'"onMouseout="this.className='BookpicBg'">
<atitle=""alt=""href="http://novel.isoshu.com/bookinfo/41240"target="_blank">
<imgsrc="http://img1.isoshu.com/cover/novel/2/20071029143326.jpg"title="萌动与欲火(第1章-46章)"/></a>
<span><ahref="http://novel.isoshu.com/bookinfo/41240"target="_blank">萌动与欲火</a></span>
</div>
<divclass="BookpicBg"onMouseover="this.className='BookpicBgon'"onMouseout="this.className='BookpicBg'">
<atitle=""alt=""href="http://novel.isoshu.com/bookinfo/41182"target="_blank">
<imgsrc="http://img1.isoshu.com/cover/novel/2/20071024154448.jpg"title="边做边爱SEX(第1章-16章)"/></a>
<span><ahref="http://novel.isoshu.com/bookinfo/41182"target="_blank">边做边爱SEX</a></span>
</div>
<divclass="BookpicBg"onMouseover="this.className='BookpicBgon'"onMouseout="this.className='BookpicBg'">
<atitle=""alt=""href="http://novel.isoshu.com/bookinfo/41139"target="_blank">
<imgsrc="http://img1.isoshu.com/cover/novel/2/20071024171434.jpg"title="性欲纵横(第1卷-7卷)"/></a>
<span><ahref="http://novel.isoshu.com/bookinfo/41139"target="_blank">性欲纵横</a></span>
</div>
<divclass="BookpicBg"onMouseover="this.className='BookpicBgon'"onMouseout="this.className='BookpicBg'">
<atitle=""alt=""href="http://novel.isoshu.com/bookinfo/41121"target="_blank">
<imgsrc="http://img1.isoshu.com/cover/novel/2/20071019171925.jpg"title="偷情少爷(第1章-16章)"/></a>
<span><ahref="http://novel.isoshu.com/bookinfo/41121"target="_blank">偷情少爷</a></span>
</div>
<divclass="BookpicBg"onMouseover="this.className='BookpicBgon'"onMouseout="this.className='BookpicBg'">
<atitle=""alt=""href="http://novel.isoshu.com/bookinfo/41120"target="_blank">
<imgsrc="http://img1.isoshu.com/cover/novel/2/20071019171908.jpg"title="男欲女欢(第1章-14章)"/></a>
<span><ahref="http://novel.isoshu.com/bookinfo/41120"target="_blank">男欲女欢</a></span>
</div>
<divclass="BookpicBg"onMouseover="this.className='BookpicBgon'"onMouseout="this.className='BookpicBg'">
<atitle=""alt=""href="http://novel.isoshu.com/bookinfo/41033"target="_blank">
<imgsrc="http://img1.isoshu.com/cover/novel/2/20071015105618.jpg"title="堕落无罪(完结)"/></a>
<span><ahref="http://novel.isoshu.com/bookinfo/41033"target="_blank">堕落无罪</a></span>
</div>
<divclass="BookpicBg"onMouseover="this.className='BookpicBgon'"onMouseout="this.className='BookpicBg'">
<atitle=""alt=""href="http://novel.isoshu.com/bookinfo/34460"target="_blank">
<imgsrc="http://img1.isoshu.com/cover/novel/2/2lsgb0001.jpg"title="让爱欲,在零度饱和(连载)"/></a>
<span><ahref="http://novel.isoshu.com/bookinfo/34460"target="_blank">让爱欲,在零度饱和</a></span>
</div>
</div>
</body>
iteye_6481
关注
CSS+JavaScript打造鼠标悬停图片渐显效果！
山里娃的专栏
10-23 2061
我们在上网的时候，常常会见到一种图片渐显的效果：在正常状态下，图片呈低透明的状态，即透明度比较低看上去是一种朦胧的效果，而当鼠标移上去的时候，图片渐渐的显示的清晰起来。这样的效果是怎么做出来的呢，我们今天来看这个实例。　　要实现这样的效果，仅是用CSS是完成不了的，需要通过JavaScript来进行控制。我们看下面的JavaScript脚本： Example Source Code [ww
京东首页很炫的js效果、图片自动滑动，悬停效果，鼠标离开效果
menglichen的博客
10-28 3587
学习js效果，看完这个你就能了解到基本的js使用方法、做出一个很炫的效果的网页
html图片特效波动,CSS3 波动图
weixin_42387482的博客
06-04 359
CSS语言：CSSSCSS确定html {background-color: #111;}.wrapper {position: relative;height: 100px;width: 100%;overflow: hidden;}.movingsection {position: absolute;-webkit-animation: slide 1s infinite linear;ani...
发现两个有趣的CSS3效果
weixin_33725126的博客
07-18 152
一、CSS3画机器猫 http://keleyi.com/keleyi/phtml/html5/3.htm哆啦A梦效果图：可用于浏览器对CSS3支持情况的测试但最近有人对这个测试表示怀疑，指该测试使用了偏向性代码，测试的CSS代码偏向于支持Chrome，Safari等Webkit浏览器。 二、纯CSS3动画 发现一个有趣的CSS3效果，可以研究研究，先放到柯乐义网上。 请使用支持CSS3（...
使用css3 background属性制作3D易拉罐效果
larennani的博客
08-18 719
先记录一下css3 3d练习 本例中主要使用background-image，background-attachment，background-position属性，设计二维位移的立体效果。 如图所示，移动滚动条可以使易拉罐从左向右滚动。 background-image 属性会在元素的背景中设置一个图像。 background-attachment 属性设置背景图像是否固定或者随
css案例_图片触摸缩放
hupei
06-24 472
css案例_图片触摸缩放、transform:scale
css3 的shake效果，css3抖动窗口 大部分手机浏览器都支持
kongjiea笔记
01-02 1万+
无标题文档 $(function(){ $("ul li").click(function(){ $("#btn").removeClass().addClass("shake"); var set = setTimeout(function(){ $("#btn").removeClass(); },1500) }) }) li{border:1px solid
CSS技术在诗歌展示中的应用与创新
例如，当鼠标悬停在某个诗歌段落上时，可以采用轻微的淡入淡出效果，或者展示一个关于诗人背景的小动画，从而吸引用户更加深入地了解和感受诗歌的魅力。 4. 响应式布局 一个优秀的“诗人”主题网页应该是响应式的，...
项目九 李白个人生平（2）
最新发布
12-11
本次项目所涉及的网页源码素材版、css文件、音频文件以及图片文件，共同构成了项目的多媒体展示元素。 首先，网页源码素材版是整个项目的基础框架。它通常包括HTML、CSS和JavaScript等文件，这些文件共同作用，构建...
JavaScript实现带标题的图片轮播特效
10-24
要实现一个带标题的图片轮播特效，首先需要了解几个关键的技术点，包括HTML、CSS和JavaScript的基础知识以及它们如何相互作用来实现一个动态的、用户可交互的网页元素。下面将详细介绍这个过程。 ### HTML结构 在...
CSS 实现触屏【图片文字】左右滚动效果
皮卡丘の开发之路
06-14 8549
实现一个css 来控制图片和文字的左右拖动的效果。具体的效果图 如下图所示：最开始的时候，产品给了我一张静态图片，让我按照这个来是实现页面。跟我说了一下说是可以播放滑动的。我以为是让我写一个轮播图。后来才知道是手动触碰进行拖放。遂决定直接用css来实现。
CSS3实现图片超立体3D效果
benyoulai5的专栏
09-07 7748
我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效，觉得效果非常棒，其实话说回来，这玩意儿的实现真的非常简单，主要是创意不错。先来看看效果图。 如何，看上去挺不错吧，倾斜、阴影，让一张很普通的图片变得如此霸气。 另外你也可以在这里查看案例演示，鼠标滑过图片时会出现这样的效果。 那么接下来我们分析一下源码吧，显示html代码，非常简单： div o
纯CSS实现漂亮的图片滑过的效果
AMAZING
11-21 2023
纯CSS实现漂亮的图片滑过的效果
Css3 设置背景 设置动画
qq_40571091的博客
09-16 1024
选择器的使用，利用border-radius属性将矩形调整为其他图形，利用box-shadow给图形附加内阴影或外阴影，使用filter给图片附加滤镜属性，学到10种滤镜的用法和区别，在使用多个滤镜时，用空格隔开。 笔记 CSS3 CSS3选择器 属性选择器 等于 开头^ 结束$ 包含* 连字符（~） 针对一个元素的同一个父级节点的所有兄弟级别元素（排在元素下面的） 伪类选择器 f...
H5移动web页面触摸按钮效果实现-模拟按钮hover效果实现
joshua
02-14 3万+
移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下： .btn{ display: block; position: relative; top: 100px; margin: 20px
css3实现动画效果常用方法
热门推荐
charlene0824的博客
02-21 3万+
早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。 早期在web中要实现动画效果，都是依赖于JavaScript或flash来完
CSS3 过渡效果transition详细讲解
蟹黄堡
05-15 896
CSS3 过渡效果 过渡效果的语法格式如下： transition: 要过渡的属性 花费的时间 运动曲线 何时开始; 注意： 1、transition属性具体的属性值说明见下表： 2、transition作用的对象：哪个元素需要过渡效果就给哪个元素加过渡属性； 3、如果想要多个属性都变化，则可以利用逗号分隔，如： transition: width .5s, height: .5s; 4、transition属性经常和:hover搭配使用 属性值 说明 要过渡的属性 该属性值可以是某个想
运用CSS3实现跳动的心效果
weixin_44551863的博客
02-21 1142
学了css3也有一段时间了，也可以做一些自己想做的东西，今天就做一颗跳到的心，首先当然要写写好html的样式如图一所示，在一个大的div里套三个小的div和一个p标签。 图一 接下来是css的样式如图二所示，首先要为最外层的div设置一个相对定位，宽高各300px，外边距上下200，左右自动，使其整体居中，再使这个div旋转45度，再给里面的三个小div设置绝对定位，红色背景宽高各200px，给其...
JavaScript实现表白酷炫效果教程
这可能包括使用温暖的色调、温馨的文字提示、动听的背景音乐等，以便更好地触动用户的心弦。 通过上述分析，我们了解到创建一个“表白js酷炫效果”的项目不仅仅是技术上的实现，还涉及到情感和用户体验的设计。开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值