CSS3-动画-文字闪烁

文字闪烁是一种动画 在css中要达到类似的效果 除了使用js设置修改 第一时间想到的就是css中的animation(动画)了。

## CSS3 动画

通过 CSS3 我们能够创建动画 这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

## CSS3 keyframes 规则

如需在 CSS3 中创建动画 您需要学习 keyframes 规则。

keyframes 规则用于创建动画。在 keyframes 中规定某项 CSS 样式 就能创建由当前样式逐渐改为新样式的动画效果。

## 浏览器支持

## CSS3动画属性

那么就用已有的这些知识 做个文字闪烁的功能

代码示例

!DOCTYPE html

html lang en

head

    meta charset UTF-8

    meta name viewport content width device-width, initial-scale 1.0

    title Document /title

    style

       p {

           font-size: 36px;

           font-weight: bold;

           color: red;

           animation: blink 2s linear infinite;

           -webkit-animation: blink 2s linear infinite;

           -moz-animation: blink 2s linear infinite;

           -ms-animation: blink 2s linear infinite;

           -o-animation: blink 2s linear infinite;

       }

        keyframes blink {

           0% {

               color: red;

           }

           50% {

               color: transparent;

           }

           100% {

               color: red;

           }

       }

    /style

/head

body

    p 中国 加油 /p

/body

/html

如何通过CSS动画制作一个优美的登录框 登录框是网站的重要组成部分，它不仅需要提供用户登录的功能，还需要有美观、易用的界面。本文将通过CSS动画制作一个优美的登录框，使用户的登录体验更加愉悦。
CSS(二)——Flex布局 边框 渐变 过渡 动画 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。