CSS3动画:@keyframes animation 案例——制作滚动公告

CSS3动画:@keyframes animation 案例——制作滚动公告

滚动公告的制作请参阅:Marquee标签实现跑马灯、滚动公告、通知效果

今天我们使用CSS3的@keyframes和animation 制作滚动文字公告。

@keyframes规则

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

注释:当动画完成后,动画的状态会回到初始状态。

要改变这一点,可以设置 animation-fill-mode: forwards; 使动画完成后停留在最后一帧。

CSS3动画实例

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
/*注:下面的写法将不再写 -webkit- 和 -moz- */

或者用%表示时间段

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

当在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:

  • 规定动画的名称
  • 规定动画的时长

把 “myfirst” 动画捆绑到 div 元素,时长:3 秒:

div{
animation: myfirst 3s;
}

其中animation有6个属性

  • animation-name  规定 @keyframes 动画的名称
  • animation-duration  规定动画完成一个周期所花费的秒或毫秒。默认是 0
  • animation-timing-function  规定动画的速度曲线。默认是 “ease” 。  4个属性:ease、ease-in、ease-out、ease-in-out
  • animation-delay  规定动画何时开始。默认是 0
  • animation-iteration-count  规定动画被播放的次数。默认是 1。   2个属性:n(次数,不填写即为1)和infinite(无限次)
  • animation-direction  规定动画是否在下一周期逆向地播放。默认是 “normal”。   2个属性:normal(正常循环播放,可不填)和alternate(结束后轮流反向播放)

所有属性可以合起来写

div {
animation: myfirst 5s linear 1s infinite alternate;
/*动画名称、动画时间5s、动画速度:匀速、延迟开始时间:1s、动画播放次数:无限次、动画完成后下一周期:轮流反向播放。*/
}

使用CSS3的@keyframes和animation 制作滚动文字公告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3动画——@keyframes animation|www.125jz.com</title>
    <style>
      .wrap{
        width: 300px;
        border: 1px solid  #999;
  margin: 200px auto;
        background-color: #CCC;
        overflow: hidden;
    }
    .wrapFont{
       
        transform: translateX(0%);
        animation: scrols 10s infinite linear;
    }
    @keyframes scrols{
        from{
            transform: translateX(100%);
        }
        to{
            transform: translateX(-100%);
        }
    }


    </style>
</head>
<body>
<div class="wrap">
        <div class="wrapFont">CSS动画——@keyframes animation</div>
</div>
</html>

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3312.html

(1)
江山如画的头像江山如画管理团队
上一篇 2019年2月26日 上午10:14
下一篇 2019年2月28日 上午8:57

99%的人还看了以下文章

  • 纯JS实现的验证码-可自定义长度和字符

    纯JS实现的页面验证码-可自定义长度和验证码字符 生成验证码的函数 <script type=”text/javascript”> var code; function createCode() { code = “”; var codeLength = 4; //验证码的长度 var checkCode = document.getElemen…

    2018年10月9日
    2.4K0
  • 解决网页中img图片出现多余空白的方案

    网页制作中,不管是table还是DIV+CSS排版时,会遇到浏览器中的图片元素img下出现多余空白的问题,非常常见,如何解决? <table class=”w1024″ border=”0″ cellspacing=”0″ cellpadding=”0″> <tr> <td colspan=”3″> <img src…

    2020年4月16日
    3.4K0
  • H5不支持frameset的三种解决方案:div+iframe、include、jQuery的onload方法加载页面

    frameset标签定义框架集,它用于组织多个窗口(框架)。每个框架存在一个独立的文档。 <frameset id=”frame” frameborder=”0″ framespacing=”0″ rows=”100,*” border=”false” scrolling=”yes”> <frame name=”topframe” scro…

    2020年1月1日
    6.6K0
  • 第15课:用z-index进行层次堆叠

    CSS可以处理高度、宽度、深度三个维度。在前面的课程中,我们已经了解了前两个维度。在本课中,我们将学习如何令不同元素具有层次。简言之,就是关于元素堆叠的次序问题。 为此,你可以为每个元素指定一个数字(z-index)。其原理是:数字较大的元素将叠加在数字较小的元素之上。 比方说,我们正在打扑克,并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index…

    2020年2月25日
    2.0K0
  • 第4课:制作自己的第一个网站

    学完前几节课,现在只需再花几分钟时间,你就能学会如何制作自己的第一个网站了。 如何做呢? 通过第一课,我们知道制作一个网页需要有浏览器和记事本程序(或者类似的文本编辑器)。请打开记事本程序(Notepad):依次选择“开始菜单→程序→附件→记事本”即可。 然后呢? 我们先从简单的做起吧。先试着做一个显示如下内容的网页:“哇!这是我的第一个网站。 ”继续学习,…

    2018年1月20日
    2.5K0
  • 如何在网页中输入多个连续的空格?

    默认状态下(输入法为半角状态),按空格键只能输入一个空格,要在文本之间插入多个连续的空格,可以使用以下几种方法: 1) 使用Ctrl+Shift+Space组合键。 2) 在中文全角状态下,使用空格键。 3) 选择【插入】→【HTML】→【特殊字符】命令下的“不换行空格”命令。 4) 直接在代码视图输入“&nbsp;”字符。

    2020年4月3日
    7.2K0

发表回复

登录后才能评论