精华内容
下载资源
问答
我要提问
  • css3实现简单的文字动画效果
    万次阅读
    2017-10-25 23:04:38

    随着css3的主键强大，以前很多用javascript写的特效好多都能用css来写了，这里给js不好的同学带来的很多方便，
    话不多说，直接来上一个demo.

    html部分

    <div class="animate box">
	<span>不一样的WEB前端工程师</span>
</div>

    css部分

    .animate {
  font-size: 40px;
  margin: 100px 0 0;
}

.animate span {
  display: inline-block;
}

.box span {
  color: #fff;
  opacity: 0;
  transform: translate(-150px, 0) scale(.5);
  animation: leftRight 1s forwards;
}

@keyframes leftRight {
  40% {
    transform: translate(30px, 0) scale(.7);
    opacity: 1;
    color: #000;
  }
  60% {
    color: #fff;
  }
  80% {
    transform: translate(0) scale(2);
    opacity: 0;
  }
  100% {
    transform: translate(0) scale(1);
    opacity: 1;
  }
}

    自己复制在编辑器打开看看效果吧.

    css3 animate
    更多相关内容

  • vue实现设置载入动画和初始化页面动画效果

     2021-01-19 21:11:10
    移动端页面载入时过长的白屏等待，总是让人心烦气躁 ...以上这篇vue实现设置载入动画和初始化页面动画效果就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
    收起

  • jQuery文字切换动画效果.zip

     2019-07-11 10:28:42
    JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还...jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。
    收起

  • Android实现文字翻转动画的效果

     2021-01-04 12:38:23
    本文实现了Android程序文字翻转动画的小程序，具体代码如下： 先上效果图如下： 要求： 沿Y轴正方向看，数值减1时动画逆时针旋转，数值加1时动画顺时针旋转。 实现动画的具体细节见”RotateAnimation.Java”。...
    收起

  • 改变文字出现动画效果ios

     2021-04-01 15:25:55
    该源码由源码天堂IOS源码频道...源码实现如何改变UILabel上的文字时出现动画效果。有四种动画效果：1. 淡入淡出改变文字 2. 文字边变大边改变3. 文字往上移动改变，旧文字移出Label，新文字移入Lable 4. 文字旋转改变。
    收起
    IOS源码

  • HTML 文字一个个出现的动画效果

     2020-10-16 10:40:05
    基于 html 和 javascript 的文字动画效果，文字是一个个出来的。文字速度可以控制。
    收起

  • jquery文字动画特效制作淡出淡进文字轮播动画效果代码

     2019-11-23 23:04:33
    jquery文字动画特效制作淡出淡进文字轮播动画效果代码
    收起

  • CSS3实现3D文字动画效果

     2020-09-05 16:23:55
    CSS3 3D文字动画，看到这个字眼都觉得震撼，顺便兼用下另两个属性：transition 和 animation。由于使用CSS3技术，因此测试时请使用火狐或Chrome等浏览器，否则不能看到效果
    收起

  • css3实现文字扫光渐变动画效果的示例

     2020-09-24 20:00:54
    主要介绍了css3实现文字扫光渐变动画效果的示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    收起

  • 又一个Java文字动画，文字跳动效果.rar

     2019-07-10 11:33:20
    又一个Java文字动画，文字跳动效果 　String message; //待显示的文本信息 　Thread jumpThread; //实现跳动文字的线程 　int fontHeight,speed,baseline; //字体高度,跳动速度和基线 　Color textColor,bgColor...
    收起

  • 利用JS实现文字的聚合动画效果

     2020-11-28 23:31:40
    所谓文字聚合效果，原理就是将容器分为若干的小块，然后每个小块设置 background-poisition ，最后添加css3动画就可以了，去掉注释，也就仅仅20行的代码。 先来看看效果图： js代码如下： //c为列数，r为行数，把...
    收起

  • CSS3 Animation文字动画特效.zip

     2019-07-11 10:34:24
    代码简介：CSS3 Animation文字动画特效里面包含7款不同效果的文字动画特效。
    收起

  • iOS 屏幕解锁文字动画效果

     2020-09-01 14:53:07
    主要介绍了iOS 屏幕解锁文字动画效果的相关资料,需要的朋友可以参考下
    收起

  • 纯css3 animation属性制作旋转文字动画切换效果

     2019-11-23 23:01:06
    纯css3 animation属性制作旋转文字动画切换效果
    收起

  • jQuery文字切换动画效果

     2020-06-10 08:45:20
    一款酷酷的jQuery文字切换动画效果，适用于做一些网站口号广告词的广告文字动画切换特效。
    收起

  • 四种文字动画效果ppt文字特效模板.rar

     2019-09-07 21:45:05
    下降效果，闪烁、放大效果，摇摆进入效果，散笔画进入效果，ppt文字动画效果，附带散笔画进入效果学习教程，欢迎下载。
    收起
    特效

  • CSS3鼠标悬停文字动画倾斜效果

     2020-06-12 09:09:40
    当鼠标悬停在图片上的时候倾斜显示多种透明的小动画效果 鼠标移走后恢复默认效果 不使用任何js代码，纯静态的css3即可实现这种要用大量JS才能实现的特效 而且占用内存极低，代码简单易懂，推荐各位懒友...
    收起
    HTML5

  • 文字效果怎么设置？

     2021-06-11 05:22:04
    文字效果可以通过css的text-shadow来实现。...设置简单的文字效果示例：基本文字阴影(text-shadow)：HTML中文网h1 {text-shadow:2px 2px #FF0000;}Text-shadow effect注意:IE 9及更早版本的浏览器不支持 text-s...

    文字效果可以通过css的text-shadow来实现。text-shadow是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是0。

    bb20275d3ff575eb8285b0b85b9929e2.png

    设置简单的文字效果示例：

    基本文字阴影(text-shadow)：

    HTML中文网

    h1 {text-shadow:2px 2px #FF0000;}

    Text-shadow effect

    注意:IE 9及更早版本的浏览器不支持 text-shadow 属性.

    效果图：

    8e218a4022c08816fc609edbe25d6883.png

    text-shadow 属性：

    text-shadow 属性应用于阴影文本。

    语法：text-shadow: h-shadow v-shadow blur color;

    属性值：h-shadow 必需。水平阴影的位置。允许负值。

    v-shadow 必需。垂直阴影的位置。允许负值。

    blur 可选。模糊的距离。

    color 可选。阴影的颜色。

    收起
    展开全文

  • CSS3动画效果源代码27个合集.zip

     2019-09-02 23:48:20
    纯CSS3模拟风车转动效果纯css3云彩动画效果纯css3制作出来的狐狸尾巴燃烧...文字说明较多)的CSS3动画效果28个纯css3 加载loading动画特效轻量级CSS3立体式3D旋转动画效果简单易用的纯CSS3图片墙效果css3高度灵活的模拟...
    收起

  • 利用CSS3实现平移动画效果示例代码

     2021-01-19 20:52:36
    　2、transition-duration：是用来指定元素转换过程的持续时间（通过设置元素转换过程持续的时间来实现动态效果，否则效果会变的很生硬）。　3、transition-timing-function：允许元素根据时间的推进去改变属性值的...
    收起

  • 文字填充效果 ppt文字动画特效模板.rar

     2019-09-08 01:15:48
    色彩渐变背景文字填充ppt特效，斜纹填充ppt文字效果，直线纹理填充效果，木雕效果，背景图片填充效果，布纹纹理填充效果，ppt文字填充效果模板。
    收起

  • 安卓动画效果相关-实现类似从上到下像灌满水一样字体动画TextView.zip

     2019-07-29 17:02:42
    实现类似从上到下像灌满水一样字体动画TextView.zip,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
    收起

  • 文字动画效果

     2021-09-02 18:58:46
    文字动画效果
    收起

  • CSS3文字标题动画效果特效代码

     2021-03-20 03:14:43
    CSS3文字标题动画效果代码是一款支持翻转，打字等效果的CSS3文字特效。
    收起

  • html5文字粒子动画效果特效代码

     2021-03-20 03:17:18
    html5文字粒子动画效果代码是一款html5 canvas画图文字粒子特效代码。
    收起

  • jquery淡出淡进文字动画效果特效代码

     2021-03-20 03:36:10
    jquery淡出淡进文字动画效果是一款基于jquery制作的淡出淡进文字轮播动画效果代码。
    收起

  • 字体动画效果怎么做？原来这么简单！

     2021-06-03 04:13:10
    原标题：字体动画效果怎么做？原来这么简单！平常喜欢看视频的朋友一定有留意到，视频中的字幕，一般会带上各种各样的动态效果，而不是简单的出现、停留和消失。那么，丰富多彩的字体动画效果是怎么实现的呢？下面就...

    原标题：字体动画效果怎么做？原来这么简单！

    平常喜欢看视频的朋友一定有留意到，视频中的字幕，一般会带上各种各样的动态效果，而不是简单的出现、停留和消失。那么，丰富多彩的字体动画效果是怎么实现的呢？下面就一起来看看吧！

    ff9202ccca8e41b2d8c9cc327467442c.png

    先来了解一下添加字幕并制作字体动画效果的基础操作。

    一、给视频添加字幕

    在主界面点击“字幕特效”选项卡，在预览框时间进度条上，定位到要添加字幕的时间点，然后双击预览窗口中任意位置，在弹出的“输入文字”框中输入文字内容，就完成了字幕的添加。

    0f862ebf536e21adb2235c0f9e206619.png图1：添加字幕

    二、一键应用字幕特效、个性化设置字幕样式

    添加完字幕，可以选中字幕，使其处于带方框的可编辑状态，然后在该字幕“出现特效”、“停留特效”、“消失特效”的相应字幕特效列表中，自由搭配选用字幕特效。在“特效参数”栏目通过“逐字出现”、“逐字展示”、“逐字消失”等的勾选和取消，就能使同一字幕特效选项具有不一样的视觉效果。

    同时在“特效参数”栏目，对字幕的特效时长进行设置，该设置决定了字幕特效速度和字幕持续时长。

    27c21ba30e46b3eb88a0363e33ac1158.png图2：一键应用字幕特效

    在“字体设置”栏目，可对字幕的字体、大小、横排或竖排排列方式、颜色、阴影、描边、透明度等等进行个性化设置，让字幕的样式丰富多彩！

    057230fa7f9ce40a74b085342b84855a.png图3：设置字幕样式

    三、添加字幕的实用技巧

    设置好第一个字幕后，选中该字幕，可以通过复制/粘贴(快捷键Ctrl+C/Ctrl+V)的方式，快速复用字幕参数；还可以通过剪切/粘贴(快捷键Ctrl+X/Ctrl+V)的方式修改字幕的出现时间点。

    1、设置好第一个字幕的样式和特效，想让后面添加的字幕跟第一个字幕除内容外一模一样。

    3e749017430ff22c1e1ae22e0307bc8a.png图4：复制字幕的各项参数

    f060ed31a84a8b6e83576610b2a10534.png图5：将复制的字幕粘贴到新的时间点

    13703df5cba075086c53699a7098e004.png图6：修改文字内容

    2、只修改字幕的出现时间点

    835ce3c699ab4dcc115e46719e64bf9a.png图8：将剪切的字幕粘贴到新的时间点

    掌握以上添加动态字幕的基础操作，就可以制作一些简单的字体动画效果啦！

    如果想制作更具个性化的字体动画效果，还需结合创意想法和一些技巧性的操作。下面分享标题文字动画的具体制作方法，给大家带来一些灵感。

    样式1：个性创意的标题文字动画

    970c1279761e24f56c4c7cfc0859ed99.gif图9：个性创意的标题文字动画效果

    一排滑动的方块，一个瞬移的爱心，如何才能做出这样花式的动画效果？

    秘诀大公开：

    【一排滑动的方块】：字体选择为【Wingdings】，输入7个小写字母【n】，就能出现动图里的一排小方块。

    【一个瞬移的爱心】：字体选择为【Webdings】，输入1个大写字母【Y】，即可立刻拥有俏皮的爱心。

    选择不同字体或不同字母，最后呈现出来的形状都会各有特色，大家可以试试看。

    样式1的具体制作参数如下：

    IJIANJI

    出现特效：逐字呈现II(模糊)

    停留特效：静态展示

    消失特效：淡出效果

    一排小方块

    出现特效：逐字呈现IV(模糊)

    停留特效：静态展示

    消失特效：淡出效果

    一个爱心

    出现特效：向右逐字入列(模糊)

    停留特效：静态展示

    消失特效：淡出效果

    样式2：结合贴图的标题文字动画

    13a6f43141ca8c461a7318241e2a381b.gif图10：结合贴图的标题文字动画效果

    字幕分别在左右方向出现和消失，立马就有了动感视觉效果。

    搭配字幕条和贴图，能让动画看起来更丰富。

    爱剪辑自带很多不同风格的贴图和字幕条，让大家能随心使用。还支持导入本地图片哦！

    e084878359af9ab3f77956c9fa083aee.png图11：添加字幕条或其他贴图并设置参数

    样式3的具体制作参数如下：

    【今日主题介绍】

    出现特效：向左偏移(模糊)

    停留特效：静态展示

    消失特效：向右偏移(模糊)

    【酷炫标题风】

    出现特效：向右偏移(模糊)

    停留特效：静态展示

    消失特效：向左偏移(模糊)返回搜狐，查看更多

    责任编辑：

    收起
    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 126,019
精华内容 50,407
热门标签
关键字：

怎么设置文字的动画效果