需要准备的材料分别有:电脑、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>