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%的人还看了以下文章

  • 如何在网页中输入多个连续的空格?

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

    2020年4月3日
    12.0K0
  • 第8课:如何做各种超链接?

    在这一课,你将学习如何在网页之间做超链接。 如何做超链接? 做链接只需一个元素<a>和一个属性href就行了。下面是一个例子,它是一个指向www.125jz.com的链接: 例1: <a href=”http://www.125jz.com/”>指向www.125jz.com的链接</a> 该例在浏览器中将显示如下: 指向…

    2018年1月20日
    3.7K0
  • 第6课:学习更多HTML元素

    到现在,你有没有独立完成过一个网页?你可以的,看看下面的例子: <html> <head><title>125建站网|www.125jz.com</title></head> <body> <h1>一级标题</h1><p>一些文字。。。</p&g…

    2018年1月20日
    4.1K0
  • 22个HTML5的初级技巧

    本文总结了22个HTML5的初级技巧,希望能对你进一步学习好HTML5会有所帮助。

    2018年3月18日
    1.7K0
  • 鼠标放上去,图片上方动态显示半透明说明文字(源码)

    <style> .itemInWorks{ width: 240px; height: 150px; border-radius:5px; font-size: 20px; font-weight: 600; color: #FFFFFF; text-align: center; line-height: 40px; background: ur…

    2020年2月20日
    4.6K0
  • 第13课:浮动元素(float)

    我们可以通过CSS属性float令元素向左或向右浮动。也就是说,令盒子及其中的内容浮动到文档(或者是上层盒子)的右边或者左边(参见第9课关于盒状模型的描述)。下图阐明了其原理: 举个例子,假如我们想让一张图片被一段文字围绕着,那么其显示效果将如下所示: 如何实现这个效果? 上例的HTML代码如下所示: <div id=”picture”><…

    2020年2月25日
    2.3K0

发表回复

登录后才能评论