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

html-css015

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

box-shadow:inset x-offset y-offset blur-radius spread-radius color

(投影方式)(X轴偏移量)(Y轴偏移量)(阴影模糊半径)(阴影扩展半径)(阴影颜色)

box-shadow:6px 6px 6px #292929对应的值

inset———默认的情况下是外阴影,如果取其唯一值“inset”,就是将外阴影变成内阴影,也就是说设置阴影类型为“inset”时,其投影就是内阴影