`
陌上花会开
  • 浏览: 38015 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

CSS3实战开发:手把手教你纯CSS3手风琴特效实战开发(无需JS代码或插件)

csscss3手风琴动画特效transition 
阅读更多

各位网友，大家好，我是实战互联网技术部的陌上花会开。前一段时间我给大家分享了一系列CSS3实战开发的案例，继续以前的脚步。

在本次CSS3实战开发案例中，我将手把手带领大家开发纯CSS3的手风琴特效开发。一如既往，先给大家演示效果动画：

上面的效果是纯CSS开发的，大家是不是觉得很棒呢。

现在我将分步骤带领大家实战开发今天的特效。首先，编写html源代码：

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
<title>CSS3实战开发:手把手教你CSS3手风琴实战开发</title>
</head>
<body>
<!-- CSS教程,css3教程,html5教程,jquery教程,开发教程,互联网技术,技术分享 -->
<div class='accordion'>
    <ul>
        <li>
            <div class='title'><a href="http://www.itdriver.cn">点击查看更多校花美图</a></div>
            <a href="http://www.itdriver.cn"><img src='imgs/1.jpg'></a>
        </li>
        <li>
            <div class='title'><a href="http://www.itdriver.cn">走近自然，深呼吸</a></div>
            <a href="http://www.itdriver.cn"><img src='imgs/2.jpg'></a>
        </li>
        <li>
            <div class='title'><a href="http://www.itdriver.cn">只要你敢想，没有不可能</a></div>
            <a href="http://www.itdriver.cn"><img src='imgs/3.jpg'></a>
        </li>
        <li>
            <div class='title'><a href="http://www.itdriver.cn">实战互联网流量积极攀升</a></div>
            <a href="http://www.itdriver.cn"><img src='imgs/4.jpg'></a>
        </li>
        <li>
            <div class='title'><a href="http://www.itdriver.cn">爱护大自然，让我们拥有一个绿色的世界</a></div>
            <a href="http://www.itdriver.cn"><img src='imgs/5.jpg'></a>
        </li>
    </ul>
</div>

</body>
</html>

 

 

 

现在看一下尚未应用样式时的页面效果：

 

接着我们在styles.css中编写样式，首先设置页面的基本布局以及对所有元素设置默认样式：

 

根据最开头的演示效果，我们可以发现手风琴的大小是固定的，而且有阴影效果，样式代码如下：

.accordion{
    width:800px; /*设置手风琴默认的宽高度*/
    height:300px;
    overflow:hidden; /*隐藏超出手风琴区域的内容*/
    margin:80px auto;
    box-shadow:0 0 10px 2px rgba(0,0,0,0.4); /*设置手风琴区域的阴影效果*/
}

 

我们从演示效果大概也会发现，默认时手风琴里图片都是显示在一行的，且提示信息title是贴在每个图片的底部。同时title的背景色是半透明的。代码如下：

.accordion ul{width:900px;}

.accordion .title{position:absolute;left:0;bottom:0;width:600px;background:rgba(0,0,0,0.5);}
.accordion .title a{display:block;color:#fff;font-size:16px;padding:20px;}
.accordion li img{display:block;}

.accordion li{
    display:block;
    width:160px;
    height:300px;
    overflow:hidden;
    position:relative;
    float:left;
    border-left:1px solid #aaa;
    box-shadow:0 0 25px 10px rgba(0,0,0,0.4);

    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    -ms-transition:all .5s;
    -o-transition:all .5s;
    transition:all .5s;
}

 

 

此时，我们看一下页面效果：

大家发现手风琴的样式已经出来了。直至此时，当鼠标划过手风琴时，并没有我们期待的动态特效。

细心的你会发现，我在li样式上添加了-webkit-transition:all .5s;这一段样式，这是告诉浏览器，当li的属性发生变化时，执行过度效果。如果你对transition不了解，请看我的精通CSS3教程。

现在我就来添加hover事件，一旦鼠标划过手风琴，更改手风琴内部元素的宽度：

.accordion ul:hover li{width:50px;}
.accordion ul li:hover{width:600px;}

 

在上面这段样式中，首先当鼠标划过ul时，设置所有li的宽度为50px，当划过某一具体的li时，设置当前的宽度为600px。这样，你就会发现鼠标划过li元素时，有一个动态的渐变过度效果。现在来看一下运行效果吧！

至此，本次的手风琴特效就开发完了。大家说是不是很简单呢？

往期精彩实战开发案例一览(已被广为转载，下面只列出部分)：

　　1. 《CSS3实战开发：百度新闻热搜词特效实战开发》

　　2. 《CSS3实战开发:手把手教你鼠标滑动特效开发》

　　3. 《CSS3实战开发：手把手教大家搜索表单发光特效实战开发》

　　4. 《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》

　　5. 《CSS3线性渐变技术详解及超炫按钮实战开发》

　　6. 《CSS3 2D转换之translate技术详解 及 网页导航实战开发》

　　7. 《CSS3实战开发:手把手教你照片墙实战开发》

　　8. 《CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效》

　　9. 《CSS3实战开发:仿天猫首页图片展示动画特效实战开发》

　　10. 《CSS3实战开发:手把手教大家折角效果实战开发》

欢迎大家加入互联网技术交流群：62329335 

个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。
1
顶
0
踩
分享到：
| CSS3实战开发：百度新闻热搜词特效实战开发
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics