css3平滑过渡效果怎么让宽度向左滑动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3平滑过渡效果怎么让宽度向左滑动相关的知识，希望对你有一定的参考价值。
CSS3平滑过渡效果让宽度向左滑动的代码为：
<!DOCTYPE html><html>
<head>
<style>
div#transitionhovertree
float: right;
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
div#transitionhovertree:hover
width:300px;
</style>
</head>
<body>
<div id="transitionhovertree"></div>
</body>
</html>
CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
<html>
<head>
<style>
div#transitionhovertree
float: right;
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
div#transitionhovertree:hover
width:300px;
</style>
</head>
<body>
<div id="transitionhovertree"></div>
</body>
</html>
我觉得你应该想要这个，transition控制想要变动的属性和变动持续的时间 ：hover是鼠标悬停事件
本回答被提问者采纳 参考技术B 什么叫宽度向左滑动？使用 CSS 过渡的滑动 + 淡入淡出效果
【中文标题】使用 CSS 过渡的滑动 + 淡入淡出效果【英文标题】：Slide + fade effect using CSS transitions 【发布时间】：2013-01-29 03:13:48 【问题描述】：我正在尝试使用 CSS 效果或过渡来复制 this effect。
Using animations 我可以为opacity 设置动画，但只能淡入，而height（应该控制幻灯片）似乎根本不起作用:(
我得到的最接近的是using javascript 在我想要动画的元素上设置一个临时类，并在其上应用初始不透明度。但是height 也不起作用。并且动画开始似乎有一点延迟。
还有其他想法吗？
所以我最终使用了 Simon 提到的问题中发布的解决方案：使用 javascript，我将要制作动画的元素包装在我应用动画的“包装器”DIV 中。每次单击标签时，包装器的高度都会从 0 更改为内容 DIV 的高度：
fiddle here
我知道它需要一些 javascript，但想法是用 CSS 制作动画，这就是它的作用。如果 JS 被禁用，切换仍然可以工作...
【问题讨论】：
【参考方案1】：当涉及的高度之一是自动时，您目前无法在高度上设置动画，您必须设置两个明确的高度。作为对此similar question.的答案发布了一个广泛的解决方法
【讨论】：
【参考方案2】：我对你的 JS Fiddle 做了修改，我相信这就是你想要的； please see it here.
原来需要在div上指定一个高度（0），别忘了overflow:hidden;这样内容就不会从 div 中“溢出”。但是，您仍然需要 jQuery / Javascript 来切换一个类，但这意味着需要更少的 Javascript。 （我切换了您将在小提琴上看到的“更改”类）
input
display:none;
label
display:inline-block;
div
white-space: pre;
background: #eee;
color: #333;
overflow:hidden;
height:0;
opacity:0;
-moz-transition:height 1s opacity 1s;
-webkit-transition:height 1s opacity 1s;
-o-transition:height 1s opacity 1s;
-ms-transition:height 1s opacity 1s;
transition:height 1s, opacity 1s;
.changed
height:200px;
opacity: 1;
我在过渡 CSS 属性中添加了一些供应商前缀，因为我不确定您将使用哪种浏览器，而且我使用的是 firefox，所以我需要 -moz- 前缀，哈哈 :)
我能看到的唯一问题是 height:auto 或 height:100% 没有动画，所以你需要指定 ems 或 px...如果这将是一个问题（比如如果内容将是动态的），我建议使用 jQuery 进行高度动画。
【讨论】：
我可以确认这确实有效，你看过 JSFiddle 吗？还有你用的是什么浏览器？以上是关于css3平滑过渡效果怎么让宽度向左滑动的主要内容，如果未能解决你的问题，请参考以下文章