CSS3 实现动画闪烁效果 animation

html-css08

CSS3 实现动画闪烁效果 animation,第1张

animation 属性是一个简写属性,用于设置六个动画属性:

如需修改在页面中的位置

将 .point 设为 position:absoulute ,修改其 left , top 位置即可

.point-flicker 是相对 .point 来定位的

修改大小时要将它的 margin-left: -40px margin-top: -40px改为对应大小的一半

需要准备的材料分别有:电脑、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页面,此时文字实现了闪烁的效果。

做闪光字可以用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>