css3平滑过渡效果怎么让宽度向左滑动

html-css014

css3平滑过渡效果怎么让宽度向左滑动,第1张

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语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

transition-property            过渡效果的CSS属性名称

transition-delay                设置过渡延迟时间

transition-duration            设置完成过渡效果需要花费的时间

transition-timing-function    设置过渡效果的速度曲线

transition                            设置过渡属性的复合写法

transform-origin                设置旋转元素的基点位置（不常用，了解即可）

transform-style                  让转换的子元素保留3D转换（不常用，了解即可）

opacity                                设置元素的透明度

@keyframes                        设置关键帧动画

animation                            设置动画属性