【html5】css3过渡实现手风琴案例

最新推荐文章于 2022-06-23 20:51:24 发布
最新推荐文章于 2022-06-23 20:51:24 发布
阅读量1k 收藏 1
点赞数
分类专栏： 前端 文章标签： html5 过渡
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Evan_QB/article/details/78291568
版权

过渡的属性介绍:

/*过渡属性*/
/*transition:width 2s,background-color 2s;*/
/*多个属性过渡*/
/*transition: all 2s;*/
/*过渡属性*/
/*transition-property: all;*/
/*过渡持续时间*/
/*transition-duration: 2s;*/
/*运动曲线  ease ease-in ease-out ease-in-out*/
/*transition-timing-function: ease-in-out;*/
/*过渡延迟*/
/*transition-delay:1s;*/

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin:0;
            padding: 0;
            background-color: #f7f7f7;
        }

        h3{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 500px;
            margin: 0 auto;
        }

        .list h3{
            height: 35px;
            line-height: 35px;
            padding-left: 30px;
            border-bottom: 2px solid #690;
            font-size: 14px;
            color: #fff;
            background: #369;
            /*添加过渡属性 全部属性 过渡时间 缓慢运动 延迟运动时间*/
            transition: all 0.3s ease 0s;
        }

        .list .pictxt{
            height: 0;
            background: orange;
            transition: all 0.3s ease 0s;
        }

        .list h3:hover{
            background-color: #036;
        }

        .list:hover .pictxt{
            height: 150px;
        }


    </style>
</head>
<body>
    <div class="box">
        <div class="list">
            <h3>今日新闻</h3>
            <div class="pictxt"></div>
        </div>
        <div class="list">
            <h3>明日新闻</h3>
            <div class="pictxt"></div>
        </div>
        <div class="list">
            <h3>昨日回忆</h3>
            <div class="pictxt"></div>
        </div>
        <div class="list">
            <h3>前日怀旧</h3>
            <div class="pictxt"></div>
        </div>
    </div>
</body>
</html>

运行结果如下:



evan_qb
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS3实现手风琴风格菜单具体步骤
09-25
如何使用纯CSS3创建手风琴风格菜单教程，菜单主要通过使用:target伪类来实现，教程中我们主要通过使用伪类:before和:target来定义样式，使用:target来实现菜单点击展开子菜单事件。希望你能够喜欢这个教程
初学HTML5——手风琴样式
一霏的博客
07-18 1010
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } ul{ width: 800px...
CSS3过渡小案例：折扇
chaochao2_0的博客
08-12 455
CSS3过渡小案例：折扇简单应用：利用鼠标经过后盒子阴影和上边距属性的改变，制作一个简单的页面效果小案例：折扇案例 CSS3的过渡效果:   通过 CSS3的过渡效果，我们可以在不使用 Flash 动画或 JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。   CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：   过渡效果添加的具体 CSS 属性   效果时长 具体用法： transition:transition-property tra
CSS3新增样式（二）——过渡效果（transition）
pro1822的博客
04-02 4161
CSS3新增样式（二）——过渡效果（transition）
【CSS3】渐变、过渡和动画用法
qq_45677671的博客
12-30 2311
css 渐变、过渡、动画属性解析及使用方法和案例
CSS3过渡练习-进度条（CSS3）
...
08-15 378
CSS3过渡练习-进度条（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
纯CSS3实现垂直手风琴菜单
04-16
解压密码：RJ4587 今天我们要给大家介绍一款简单实用的CSS3垂直手风琴下拉菜单，这款纯CSS3实现的手风琴菜单，部署的CSS代码非常简单，但是已经可以实现手风琴菜单的所有基本功能，包括菜单项的展开收拢、菜单项小...
Html5 js实现手风琴效果
11-28
使用H5实现横向的手风琴功能 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } div { ...
jquery实现手风琴案例
11-21
手风琴案例练习，供大家参考，具体内容如下 显示效果 重点： 1.鼠标进入事件mouseenter 鼠标离开事件mouseleave 2. 再执行下一次操作前都要先通过.stop() 停止动画 3.sublings()选择当前事件外的兄弟事件 完整代码 ...
html5制作垂直列表,简单实用的垂直手风琴滑动菜单列表特效
weixin_34737066的博客
06-10 404
这是一款使用jQuery和CSS3制作的简单实用的垂直手风琴滑动菜单列表特效。该手风琴菜单列表特效通过CSS3来制作平滑过渡的动画效果，它的样式时尚大方，代码简单，非常的实用。使用方法HTML结构该垂直手风琴列表的HTML结构采用无序列表来制作。每一个菜单项中的子菜单是采用和元素平级的无序列表来制作。AccountBasicsPictureGo PremiumMessages23NewSentTr...
css3过渡实例.html
09-03
简单的过渡小实例，对属性的展示
js横向手风琴效果
12-16
非常漂亮的横向手风琴效果，搭载图片说明问题透明层，在显示时会动态移入，非常华丽。
水晶图片案例
weixin_33695450的博客
05-14 353
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
html5怎么产生手风琴效果,Html5 js如何实现手风琴效果
weixin_34094282的博客
06-03 228
Html5 js如何实现手风琴效果发布时间：2020-08-03 09:54:10来源：亿速云阅读：92作者：小猪这篇文章主要为大家展示了Html5 js如何实现手风琴效果，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。* {padding: 0;margin: 0;}div {width: 522px;height: 222px;margin: 50...
HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果，css手风琴
weixin_36339710的博客
06-04 1894
纯js+html和纯css+html制作手风琴效果，css手风琴本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果，供大家参考，具体内容如下一、纯css+html的手风琴效果这种用css写的手风琴比较简单，主要是应用到css中的，transition属性。代码如下：body{background: url('bg.gif') repeat;}ul,li,p{margin: ...
css过渡。变形与动画
qq_44698180的博客
06-23 204
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。语法规则：选择器{ transition:property duration timing-function delay}transition属性显示简单的动画效果 transition属性是一个复合属性，主要包含property、duration、timing-function、delay等子属性 transition属性的常用子属性主要包括：property：规定应用过渡的CSS属性的名称 duration：定义过渡效果花费的时间 timing-fu
CSS3过渡动画实现hover人物弹出炫酷效果案例
qq_38836435的博客
06-18 1884
目标 我们要实现的目标效果如下 过渡如何使用 可以清楚地看出效果图中的效果用到了css3中的过渡transition，先来了解一下transition CSS3 过渡是元素从一种样式逐渐改变为另一种的效果 过渡共有四个属性，分别是： transition-property： 规定应用过渡的 CSS 属性的名称 transition-duration： 定义过渡效果花费的时间。默认是 0 transition-timing-function： 规定过渡效果的时间曲线。默认是 “ease” transi
Web前端从初级到高手之路
12-28
本套课程分为UI设计基础课程、Web前端通用代码与UI交互实现、移动端Web前端与UI实现三个大章节，课程讲述UI设计、Flash、交互设计、HTML5、CSS3、JavaScript等web前端技术。凡是购买本套课程的学员，可以加QQ群： 152364681，专业讲师进行在线答疑与指导，学不懂有疑问，随时问，永久服务，并赠送海量web前端练习素材，名师一路陪伴，让学员真正成为一名优秀的web前端工程师。
h5 手风琴效果_html5和css3炫酷3D手风琴效果
weixin_39902508的博客
12-22 303
手风琴效果是web2.0新生的一个web组件。手风琴效果被用来在同一时刻显示多篇文章。当文章非常多的时候，手风琴效果就非常有用了。但是用户在实用手风琴效果时也会有些问题，例如使用jQuery UI的手风琴效果，如果你不熟悉jQuery UI，就很难去创建它。这里使用html5和css3创建的手风琴效果，代码简单易懂，效果一流，但是请注意，它只在Chrome和Safari浏览器下工作。HTMLSec...
css实现手风琴效果
最新发布
07-28
要实现手风琴效果，你可以使用CSS的过渡效果和伪类来实现。以下是一个简单的示例： HTML结构： ```html 标题1 内容1 标题2 内容2 标题3 内容3 ``` CSS样式： ```css .accordion { width: 300...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值