CSS3实现图片切换特效代码,Css代码库,德仔网

代码语言

代码分类

【Css】 CSS3实现图片切换特效

作者:越泽 / 发布于2016/2/23/ 579

利用label标签和:checked，并使用到了transform和transition属性。实现简单，相比JS而言，非常方便，且效果更佳，有兴趣可以拷贝代码，修改图片路径，运行看看效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词一，关键词二">
    <meta name="Description" content="网站描述内容">
    <meta name="Author" content="刘艳">
    <title></title>
    <style>
        #content{width:800px;margin: 30px auto;position: relative;}
        input[type="radio"]{display: none;}
        input[type="radio"]~img{width: 800px;position: absolute;top:0px;left:0px;opacity: 0;height: 500px;transform:scale(1.1);transition:all 1s;}
        input:checked +label + img{opacity: 1;transform:scale(1.0);}
        input:checked +label img{border: 8px solid #FFDA34; opacity: 1.0; transition: all 1s;}
        label {display: inline-block;width: 134px;margin: 5px 8px;}
        label img{ opacity:0.5; width: 134px; margin-top:500px;height: 75px;border:8px solid #000;}
    </style>
</head>
<body>
    <div id = "content">
        <input type = "radio" name="carousel" id = "list1" checked>
        <label for="list1">
            <img src="../images/photo1.jpg">
        </label>
        <img src="../images/photo1.jpg">

        <input type = "radio" name="carousel" id = "list2">
        <label for="list2">
            <img src="../images/photo2.jpg">
        </label>
        <img src="../images/photo2.jpg">

        <input type = "radio" name="carousel" id = "list3">
        <label for="list3">
            <img src="../images/photo3.jpg">
        </label>
        <img src="../images/photo3.jpg">

        <input type = "radio" name="carousel" id = "list4">
        <label for="list4">
            <img src="../images/photo4.jpg">
        </label>
        <img src="../images/photo4.jpg">

        <input type = "radio" name="carousel" id = "list5">
        <label for="list5">
            <img src="../images/photo5.jpg">
        </label>
        <img src="../images/photo5.jpg">
    </div>
</body>
</html>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

同语言下

可能有用的

越泽贡献的其它代码(11)