css3平滑过渡效果怎么让宽度向左滑动
2 回答
潇湘沐
TA贡献1816条经验 获得超6个赞
CSS3平滑过渡效果让宽度向左滑动的代码为：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!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语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
侃侃尔雅
TA贡献1801条经验 获得超15个赞
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!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> |
我觉得你应该想要这个，transition控制想要变动的属性和变动持续的时间 ：hover是鼠标悬停事件
- 2 回答
- 0 关注
- 1171 浏览
添加回答
举报
0/150
提交
取消