实例介绍CSS3过渡效果

这个例子给大家分享CSS3过渡效果供你参考，以下具体内容

设计素描 uff1a


实现代码：

transition.html

xml代码将内容复制到剪贴板。






过渡

{ #块
宽度：400px；
身高：300px；
背景颜色：# 69c；
保证金：0汽车；

转型：背景颜色1S，宽度0.5s自在；
WebKit的转型：背景颜色1S，宽度0.5s自在；
}
{ #块：悬停
背景颜色：红色；
宽度：600px；
}












transitiondemo.html

xml代码将内容复制到剪贴板。






transitiondemo

{ #包装
宽度：1024px；
保证金：0汽车；
}
{进度条
宽度：960px；
/ *背景颜色：*爱丽丝蓝；
背景颜色：浅黄色；
}
{进度条
身高：40px；
宽度：40px；
背景颜色：# 69c；

border: 1px solid嫩黄；
边界半径：5px；
}
{进度栏：悬停
宽度：960px；
}

{ # bar1
WebKit的过渡：5s线性宽度；
/ * WebKit的过渡：宽度5S的步骤（6，末）；。
/ * WebKit的过渡：宽度5s *步骤开始；
}
{ # bar2
WebKit的过渡：宽度5s缓解；
}
{ # bar3
WebKit的过渡：宽度5s缓解；
}
{ # bar4
WebKit的过渡：宽度5s自在；
}
{ # bar5
WebKit的过渡：宽度5s缓解了；
}




线性的




缓解


缓解


缓解了


缓解了








结果分析：鼠标移动后，会有一个过渡动画。

以上是本文的全部内容，希望能对大家有所帮助。