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实现的图片缩进效果

猜你喜欢