您的位置：首页 > Web前端 > CSS

CSS3过渡效果transition----附手风琴案例

2019-04-10 08:53 337 查看

CSS3中新增的transform属性，实现了元素在变化过程中的过渡效果，实现了基本的
动画。

定义和用法

transition 属性是一个简写属性，用于设置四个过渡属性：

  • transition-property

    • 规定设置过渡效果的 CSS 属性的名称。

  • transition-duration

    • 规定完成过渡效果需要多少秒或毫秒。

  • transition-timing-function

    • 规定速度效果的速度曲线。
    ①linear：线性过渡。
    ②ease：平滑过渡，这是默认值
    ③ease-in：由慢到快。
    ④ease-out：由快到慢。
    ⑤ease-in-out：由慢到快再到慢。

  • transition-delay

    • 定义过渡效果何时开始。

    浏览器兼容性问题

    基于webkit内核的私有属性是：-webkit-transition;

    基于gecko内核的私有属性是：-moz-transition;

    基于prestot内核的私有属性是：-o-transition;

    实例：

    div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

    手风琴案例

    <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
text-align: center;
margin: 0px;
padding: 0px;
}
li{
list-style:none;;
height: 30px;
}

.mennu{
height: auto;
width: 250px;
margin: 50px auto;
}
.item{
width: 100%;
height: auto;

}
.item:hover > .itemBox{
height: 120px;
}
.item > h3{
background-color: skyblue;
color: orange;
height: 40px;
line-height: 40px;
border-bottom: 2px solid #ccc;
}
.item >.itemBox{
width: 100%;
height: 0;
overflow: hidden;
/*添加过渡效果*/
transition-property: height;
transition-duration: 1s;
}
.item >.itemBox >ul{
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="mennu">
<div class="item">
<h3>国际新闻</h3>
<div class="itemBox">
<ul>
<li>深圳市遇到有史以来最大台风</li>
<li>深圳市遇到有史以来最大台风</li>
<li>深圳市遇到有史以来最大台风</li>
<li>深圳市遇到有史以来最大台风</li>
</ul>
</div>
</div>
<div class="item">
<h3>国内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳市遇到有史以来最大台风</li>
<li>深圳市遇到有史以来最大台风</li>
<li>深圳市遇到有史以来最大台风</li>
<li>深圳市遇到有史以来最大台风</li>
</ul>
</div>
</div>
<div class="item">
<h3>省内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳市遇到有史以来最大台风</li>
<li>深圳市遇到有史以来最大台风</li>
<li>深圳市遇到有史以来最大台风</li>
<li>深圳市遇到有史以来最大台风</li>
</ul>
</div>
</div>
<div class="item">
<h3>市内新闻</h3>
<div class="itemBox">
<ul>
<li>深圳市遇到有史以来最大台风</li>
<li>深圳市遇到有史以来最大台风</li>
<li>深圳市遇到有史以来最大台风</li>
<li>深圳市遇到有史以来最大台风</li>
</ul>
</div>
</div>
</div>
</body>
</html>

    效果图

    内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
    标签： 
    相关文章推荐
    新的分享
    章节导航