css样式中闪烁怎么做

html-css012

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页面,此时文字实现了闪烁的效果。

HTML5 中用CANVAS画一个五角星,代码如下:

<script type="text/javascript">

function init() {

var ctx = document.getElementById('stars').getContext('2d')

ctx.fillStyle = "#827839"

ctx.shadowColor="#000000"

ctx.shadowOffsetX=6

ctx.shadowOffsetY=6

ctx.shadowBlur=9

ctx.beginPath()

ctx.moveTo(15, 150)

ctx.lineTo(100,140)

ctx.lineTo(170,90)

ctx.lineTo(230,140)

ctx.lineTo(315,150)

ctx.lineTo(230,200)

ctx.lineTo(300,263)

ctx.lineTo(170,233)

ctx.lineTo(30,263)

ctx.lineTo(100,200)

ctx.closePath()

ctx.fill()

}

window.addEventListener('load', init, false)

</script>

<canvas id="stars" width="333" height="300">

Your browser does not support the canvas element .

</canvas>