CSS3-动画-文字闪烁

简介: CSS3-动画-文字闪烁

1.gif

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

## CSS3 动画

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

## CSS3 @keyframes 规则

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

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

## 浏览器支持

2.png

## CSS3动画属性

3.png

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

代码示例:

```

<!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>

```

4.gif

目录
相关文章
|
5月前
|
自然语言处理 前端开发 JavaScript
用 通义灵码 一键生成“水波纹按钮”,连 CSS 动画都不用自己写了!
通义灵码是一款智能编程辅助工具,它可以根据自然语言指令自动生成高质量的代码。例如,只需输入“生成一个按钮,点击时带水波纹动画,模拟 Material Ripple 效果”,它就能生成具备完整交互逻辑、CSS 动画和良好性能的按钮组件。不仅如此,它还支持拓展功能,如长按触发提示、添加图标等,并能自动优化样式适配不同场景。通过通义灵码,开发者可以大幅提升效率,专注于创意实现,而不必纠结于繁琐的代码细节。
|
10月前
|
前端开发 JavaScript
CSS 过渡和动画
CSS过渡和动画是用于为网页元素添加动态效果的两种重要技术
518 143
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
239 2
|
5月前
|
前端开发
文字显示在div 最下面,css怎么写
文字显示在div 最下面,css怎么写
387 0
|
11月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
243 34
|
11月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
189 22
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
225 31
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果,呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现,没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
251 6
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
331 7
纯css3加载loading发光变色动画代码
纯css3加载loading发光变色动画特效代码是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画
207 2