CSS过渡

来源：互联网发布：软件合集编辑：程序博客网时间：2024/05/29 02:32
<html lang="zh-cmn-Hans"><head><title>背景色过渡</title><meta name="author" content="text/html;charset=UTF-8" /><style>body{font-family: 楷体;}.test li{/*指定li对象为行内块元素*/display:inline-block;width:100px;height:100px;margin:0 5px;border:1px solid #ddd;background-color:#eee;text-align:center;-webkit-transition:background-color 0.75s ease-in;-moz-transition:background-color 0.75s ease-in;/*过渡（CSS3） background-color 0.75 ease-in:对象背景颜色变幻时的0.75秒过渡(颜色逐渐变深)*/transition:background-color 0.75s ease-in;/*过渡延迟（CSS3） 0.5s:延迟0.5秒*/transition-delay:1.0s;}.test li:nth-child(1):hover{background-color:#bbb;}.test li:nth-child(2):hover{background-color:#999;}.test li:nth-child(3):hover{background-color:#630;}.test li:nth-child(4):hover{background-color:#090;}.test li:nth-child(5):hover{background-color:#f00;}</style></head><body><h1>请将鼠标移动到下面的矩形上：</h1><ul class="test"><li>背景色过渡</li><li>背景色过渡</li><li>背景色过渡</li><li>背景色过渡</li><li>背景色过渡</li></ul></body></html>
阅读全文
0 0