css如何实现颜色的过渡效果

html-css07

css如何实现颜色的过渡效果,第1张

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

button {width: 100pxheight: 50pxborder: 0color: whitebackground: -webkit-radial-gradient(#72787f, #545c64)}

3、浏览器运行index.html页面，此时用CSS实现了按钮中间白、四周黑，上方白、下方灰的效果。

使用CSS3中的过渡效果——背景色渐渐消失

这里有个示例，可以看下，谷歌浏览器下有效，IE10也支持，好像低版本的还没这个功能哦。

在IE10获取谷歌浏览器下点击绿色层不放，背景色会渐渐消失。

<!DOCTYPE html>    

<html lang="en-us">    

<head>    

<style type="text/css">    

body {    

 padding:10px    

 font:bold 20pt "Segoe UI"    

}    

div {    

 width:250px    

 background-color:lime    

 padding:10px    

 opacity:1    

 -ms-transition:opacity 5s linear 1s    

 -webkit-transition:opacity 5s linear 1s // This selector ensures compatibility with WebKit-based browsers.    

 -moz-transition:opacity 5s linear 1s // This selector ensures compatibility with Mozilla-based browsers.    

 transition:opacity 5s linear 1s // This selector ensures compatibility with browsers that support non-prefixed transition properties.    

}    

div:active {    

 opacity:0    

}    

</style>    

</head>    

<body>    

<div>    

Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.    

</div>    

<p style="padding:5px font-size: 8pt margin: 5px 0"><a href="

</body>    

</html>