如何用css实现网页的动态效果

html-css026

如何用css实现网页的动态效果,第1张

网页的动态效果你说的这里的动态效果是让一个画面或者文字动一下吧?因为在专业里边动态是与数据库连接的后台的技术。

css是层叠样式表,是不能够实现动态效果的。但是可以让某个画面动,比如:

一个文字点击的时候,变大的css代码为:

a{font-size:12px}      /*这里文字默认大小是12像素*/

a:hover{font-size:14px}      /*这里鼠标经过大小是14像素*/

上边这个简单的代码就实现鼠标经过a的时候,文字变大,离开又恢复。

希望能帮到你

引入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>

用css样式相关的接口 stylesheet.insertRule或者stylesheet.addRule 这两个都可以动态插入css样式 兼容性还可以 ie9+

比如

myStyle.insertRule("#blanc { color: white }", 0)

需要删除的时候还有deleteRule和removeRule两个方法