CSS实现的图片缩进效果

鼠标未移动时：

鼠标悬停在某一张图片时：一张展开，其余的图片缩进。

代码部分

CSS代码：

@charset "utf-8";
/* CSS Document *//*Now the styles*/
* {margin: 0;padding: 0;
}
body {font-family: arial, verdana, tahoma;background-color: #ccc;background-image: url(../.idea/pic/1.gif);background-repeat: repeat;
}/*时间申请手风琴工作宽度
图像= 640px下的宽度
总图像= 5
因此在图像的宽度= 640px
不悬停时在图像宽度= 40px -自己可以设置
所以集装箱总宽度= 640 + 40 * 4 = 800px；
默认宽度= 800 / 5 = 160px；*/.accordian {width: 800px; height: 400px;overflow: hidden;/*Time for some styling*/margin: 100px auto;box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}/*A small hack to prevent flickering on some browsers*/
.accordian ul {width: 2000px;/*给最后一个项目提供空间，防止掉落*/
}.accordian li {position: relative;display: block;width: 160px;float: left;border-left: 1px solid #888;box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);/*动画过度的时间*/transition: all 1s;-webkit-transition: all 1s;-moz-transition: all 1s;}/*不悬停时减少的*/
.accordian ul:hover li {width: 40px;}
/*允许使用悬浮效果*/
/*li覆盖在ul*/
.accordian ul li:hover {width: 640px;}.accordian li img {display: block;/*li标签分块*/
}/*Image title styles*/
.image_title {background: rgba(0, 0, 0, 0.5);position: absolute;left: 0; bottom: 0;width: 640px;}
.image_title a {display: block;color: lightpink;text-decoration: none;padding: 20px;font-size: 24px;font-family: 华文楷体;
}

html代码

<div class="accordian"><!--<embed src="../.idea/raw/tomorrow.mp3"autostart="true" loop="true" hidden="true" ></embed>--><ul><li><div class="image_title"><a href="shoufengqin.html">眼睛长在底迪身上系列</a></div><a href="#"><img src="../.idea/pic/1.png"  height="400px" width="640px"/></a></li><li><div class="image_title"><a href="#">彼此的依靠</a></div><a href="#"><img src="../.idea/pic/2.jpg" height="400px" width="640px"/></a></li><li><div class="image_title"><a href="#">查呆萌和朱二狗</a></div><a href="#"><img src="../.idea/pic/3.png" height="400px" width="640px"/></a></li><li><div class="image_title"><a href="#">执手难离</a></div><a href="#"><img src="../.idea/pic/4.png" width="640px" height="400px"/></a></li><li><div class="image_title"><a href="#">“婚礼”</a></div><a href="#"><img src="../.idea/pic/5.png" height="400px" width="640px"/></a></li></ul>
</div>
<audio id="audio" src="../.idea/raw/tomorrow.mp3" >您的浏览器不支持</audio>
<script>var a=document.getElementById("audio");//autoplay 属性设置或返回音视频是否在加载后即开始播放a.autoplay=true;//    loop 属性设置或返回音频/视频是否应该在结束时再次播放。a.loop=true;//去掉 controls 属性就可以隐藏
</script>

附四种添加音乐方法
html5方法一：<audio autoplay="" loop=""><source src="http://mi.0w0.im/Letter_Song.mp3"></audio>不显示播放器。
html5方法二：<video controls="" autoplay="" name="media"><source src="我是音乐" type="audio/mpeg"></video>会显示播放器。
方法三：支持所有播放器：<embed src="/uploadfile/m.mp3" autostart="true" loop="true" hidden="true"></embed>我使用的此方法。
方法四：<bgsound src=背景音乐地址 loop=-1>

CSS实现的图片缩进效果相关推荐

html页面图片翻转特效代码,如何使用css实现翻转图片的效果（附代码）
本篇文章给大家带来的内容是关于如何使用css实现翻转图片的效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 具体效果图如下: 主要用到的技术除了3D翻转和定位 ,还用到了 ...
使用CSS实现首行缩进效果
在CSS中,可以使用text-indent属性来实现首行缩进效果.text-indent属性用于定义每个文本块中第一行的缩进:它可采取负值.如果使用负值,那么首行会被缩进到左边.下面本篇文章就来给大家 ...
html hover图片效果,CSS第9款：Imagehover.css 纯CSS打造的图片悬停效果
用过很多图片县停效果,说实在话,很多都不好用.我大致说一下原因: 1.对基础CSS影响比较大: 2.附加的插件太多: 3.还要引用有一些JS. 而CSS3的诞生,对我们前端开发来说,有了质的飞跃!下边 ...
html图片重叠怎么实现,css如何实现图片堆叠效果
1.初始index.html 为了建立第一张照片,也就是最上面的那张.我们只需要添加一个div,里面包含照片的img.就这么多,剩下的效果都是通过CSS来实现的.确保div的class为stackon ...
html5文字图片垂直居中代码,css实现文字图片垂直居中效果
复制代码代码如下: 轻松实现:垂直居中文字图片 html{ font-size:12px; } .control{ width:600px; border:1px solid #000; paddin ...
CSS鼠标悬浮图片放大效果
当鼠标移入图片时,图片变大.父容器宽高不变. 效果: 鼠标移入前: 鼠标移入后: 代码:
利用css做出的图片墙效果_练习
效果: 鼠标触碰时: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
html图片自动滚动播放器,jQuery+css实现图片滚动效果(附源码)
bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间 ...
html5首行缩进没有效果,css如何实现首行缩进效果
css实现首行缩进效果的方法:首先创建一个HTML示例文件:然后在body中定义一些文本段落:最后在css中使用text-indent属性来实现首行缩进效果即可. 本文操作环境:Windows7系统. ...

CSS实现的图片缩进效果

CSS实现的图片缩进效果相关推荐

最新文章

热门文章