纯CSS图片切换特效

2024-09-05 12:21:15

字体：大中小

来源：转载

供稿：网友

用纯CSS代码实现的首页图片切换特效，没有用到任何JavaScript代码，鼠标点击就会切换图片，看上去还行，代码非常少，也很实用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"><head><title>纯CSS图片切换特效</title><meta http-equiv="content-type" content="text/html;charset=gb2312" /><style>  dl {   position:absolute;width:240px;height:170px;border:10px solid #eee;  }  dd {   margin:0;width:240px;height:170px;overflow:hidden;  }  img {     border:1px solid black   }   dt {   position:absolute;right:3px;top:50px;   }  a {     display:block;margin:1px;width:20px;height:20px;text-align:center;font:700 12px/20px "宋体",sans-serif;color:#fff;text-decoration:none;background:#666;border:1px solid #fff;filter:alpha(opacity=40);opacity:.4;   }   a:hover {background:#000}</style></head>  <body>    <dl><dt>1            2            3        </dt>    <dd><img src="/d/file/p/2024/09-05/7ece5fe32dda327cf8c798740a0cf040.jpg" alt="" id="a" />        <img src="/d/file/p/2024/09-05/3925247e5aee1abb5a7cb6c6738fd13a.jpg" alt="" id="b" />        <img src="/d/file/p/2024/09-05/c23cd2f2c9ee095981bcc79e4fd58e2a.jpg" alt="" id="c" />    </dd>  </dl></body></html>

上一篇：CSS强制图片自适应宽度大小

下一篇：来自百度的图片切换特效