css样式中闪烁怎么做

html-css037

css样式中闪烁怎么做,第1张

需要准备的材料分别有:电脑、chrome浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

@keyframes blink{

0%{opacity: 1}

100%{opacity: 0}

}

@-webkit-keyframes blink {

0% { opacity: 1}

100% { opacity: 0}

}

.blink{

color: #dd4814

animation: blink 1s linear infinite

-webkit-animation: blink 1s linear infinite

}

3、浏览器运行index.html页面,此时文字实现了闪烁的效果。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        body {

            background-color: #000

            text-shadow: 2px 3px 10px #FF1717

            font-size: 60px

            font-weight:bold

            transition: color 1s

            color: #000

        }

        .color {

            color: #fff

        }

    </style>

</head>

<body>

    <div>我会一闪一闪的</div>

    <script>

        setInterval(function () {

            if (!document.body.className) {

                document.body.className = 'color'

            } else {

                document.body.className = ''

            }

        }, 500)

    </script>

</body>

</html>

做闪光字可以用js代码来实现,纯css代码是很难实现的。JavaScript代码如下:

<div id="abc">这里是闪光的字</div>

<script>

var i=0

function shine(id){

var obj= document.getElementById(id)

if(i==0){obj.style.color="#000"i=1}else{obj.style.color="red"i=0}

}

setInterval("shine('abc')",100)

</script>