css样式中闪烁怎么做

html-css019

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

@-webkit-keyframes twinkling{

  0% {

      opacity: 0 

  }

  100% {

      opacity: 1 

  }

}

#110 {

    -webkit-animation: twinkling 1s infinite ease-in-out 

}

参考如上。

稍微解释一下，定义两个状态，一种状态下透明度为 0%，另一种状态下透明度为 100%，无限次地在 1 秒内切换这两种状态，看起来就是闪烁了。