@Keyframes 插入图片, 谢谢

来源:9-1 CSS3 Keyframes介绍

SuperManSuperWorld

2016-01-22 22:07

用keyframes做一个图片切换的功能, 为什么不显示 谢谢 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        @keyframes changecolor{
            0%{
                background-image: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg1.jpg);
            }
            20%{
                background-image: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg2.jpg);
            }
            50%{
                background-image: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg3.jpg);
            }
            80%{
                background-image: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg4.jpg);
            }
            100%{
                background-image: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg5.jpg);
            }
        }
        .TestKey{
            width: 220px;
            height: 165px;
            margin:20px auto;
        }
        .TestKey:hover{
            animation: changecolor 5s ease-out .2s;
        }
    </style>
</head>

<body>
    <div>TestKeyframes</div>
</body>
</html>

写回答 关注

3回答

  • SuperManSuperWorld
    2016-05-04 21:36:20

    function demo(){

    }

  • weibo_诸小呆_0
    2016-05-02 10:59:17

    class="TestKey"忘了写,还有浏览器兼容前缀没写

  • _潇潇暮雨
    2016-01-27 10:41:12

    你的div少了类名啊。

十天精通CSS3

本课程为CSS3入门教程,深刻详解CSS3知识让网页穿上绚丽装备

242554 学习 · 2623 问题

查看课程

相似问题