如何在css中把一组静态图片改成动态滚动的图片

html-css015

如何在css中把一组静态图片改成动态滚动的图片,第1张

连续的滚动可以使用css3实现(animat,0%,50%,100%),设置不同时间的图片位置即可。但只是在“滚动”,通常不是大家所称之为的“滚动”(严格说是滑动)。

因此说,你的问题有一定的歧义的。

css3还有一种方法可以实现滚动。就是使用过度效果(transition),他也可以实现滚动的效果。而且,个人感觉比较符合你的意思。

其具体的做法是,给超链接滑过状态一个图片属性,如:

li a img {margin-top:0px}

li a:hover img {margin-top:-20px}

li a img {-webkit-transition: margin-top 0.5s}/*注意这里的hack,照顾多个浏览器*/

这样,鼠标滑上图片,图片就会动画向上滑动20像素,鼠标离开,又滑下来。

再扯下严格意义的【动态滚动的图片】,一般的解释是一组图片可以在某个区域内动画滑动。注意是一组。css通常不具有处理多组图片(也有css模拟动画帧的效果的)的效果。动态滚动图片常见的有2种,一种是可控制的滚动列表,一种是自动无限循环滚动。通常用来作为滚动新闻、组图或相册(风采)使用。

<div class="container">

    <div class="light"></div>

</div>

<style>

    

    .container{

        border-radius: 50%

        background: #49b0fd

        width: 100px

        height: 100px

    }

    .light{

        width: 100px

        height: 100px

        box-shadow: 0 0 2px 2px rgba(0,0,0,1)

        border-radius: 50%

        transform-origin: center center

        position: relative

        animation: linear mymove 5s infinite

    }

    .light:after {

        position: absolute

        left: -5px

        top: 50%

        margin-top: -5px

        content: ""

        width: 10px

        height: 10px

        background: red

        border-radius: 20px

    }

    @keyframes mymove{

        from {transform:rotate(0deg)}

        to {transform:rotate(360deg)}

    }

</style>

老铁,看看这段,核心的样式写出来了,具体大小就由老铁自己去试着改啦。

几个注意点:1.两个容器最好一样大。2. 光点大小变了对应的 left和margin-top也要改。3.动画时间、动画缓动也可以改

引入jquery

然后给你要设置动画的对象增加或者删除css3动画的类就可以了。

如我这里用colorchange这个渐变类在css里面写好动画效果以后在js里面给对象添加上就可以实现动画了

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Test</title>

    <style type="text/css">

        body{

            padding: 20px

            background-color:#FFF

        }

        .colorchange

        {

            animation:myfirst 5s

            -moz-animation:myfirst 5s /* Firefox */

            -webkit-animation:myfirst 5s /* Safari and Chrome */

            -o-animation:myfirst 5s /* Opera */

        }

        @keyframes myfirst

        {

            from {background:red}

            to {background:yellow}

        }

        @-moz-keyframes myfirst /* Firefox */

        {

            from {background:red}

            to {background:yellow}

        }

        @-webkit-keyframes myfirst /* Safari and Chrome */

        {

            from {background:red}

            to {background:yellow}

        }

        @-o-keyframes myfirst /* Opera */

        {

            from {background:red}

            to {background:yellow}

        }

        #main{

            width:100px

            height:100px

            background:red

        }

        #cgbt{

            width: 100px

            margin: 20px 0 0 0

            text-align: center

            cursor: pointer

        }

        #cgbt:hover{

            background-color: #2D93CA

        }

    </style>

</head>

<body>

<div id="main">

    我会变么?

</div>

<div id="cgbt">

    点我让上面的变颜色

</div>

<script src="jquery-3.2.1.min.js" type="application/javascript"></script>

<script>

    $(document).ready(function(){

        $("#cgbt").click(function(){

            $("#main").attr("class","colorchange")

        })

    })

</script>

</body>

</html>