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

  • 第13课:HTML音频/视频

    HTML 音频 在 HTML 中播放音频并不容易!您需要谙熟大量技巧,以确保您的音频文件在所有浏览器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能够播放。 <embed> 元素 <embed> 标签,这是一个 HT…

    2018年1月18日
    3.6K0
  • 两个iframe自适应高度的解决方法

    很多小伙伴在做网站的时候对于解决iframe的高度问题都是很头大的一件事,今天吾爱编程为大家介绍一下iframe自适应高度的方法,有需要的小伙伴可以参考一下: 1、需求分析: 使页面中的iframe可以自适应高度,避免页面高度增加的时候页面和iframe会同时出现滚动条。 2、方法一: 在iframe上面直接加onload的方法,使其自适应 <ifra…

    2021年3月16日
    1.4K0
  • 如何为需要打印的网页设置单独的css样式

    项目开发:同一个页面,需要在浏览器中浏览是一种样式,而当要打印这个页面时候,又需要呈现另一种样式。 此时可以用link标签中的media属性解决此问题。 如下面这两个引用: <link href=”stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/css” /> &l…

    2019年11月20日
    3.5K0
  • css布局基础:行内元素、块级元素练习

    主要知识点: 1、理解什么是行内元素?什么是块级元素? 2、知道块级元素能够设置宽高,行内元素不可设置宽高(替换元素可以)。 3、掌握display属性的使用。 4、掌握css伪类选择器的使用。 扩展: 1、nth-child()选择器 选择其父元素的第n个子元素。 效果图: 参考: <nav> <ul> <li><…

    2020年4月4日
    3.8K0
  • jquery全选和反选功能代码,兼容所有浏览器

    <!doctype html> <html> <head> <meta charset=”utf-8″> <title>jquery全选和反选功能代码,兼容所有浏览器|www.125jz.com</title> <script type=”text/javascript” src=…

    2019年11月1日
    2.6K0
  • CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果

    box-shadow属性的基本用法 使用Box-shadow制作逼真的图片阴影效果 使用伪元素::before和::after,我们能实现非常逼真的只有图片才能实现的阴影效果。 HTML: <div class=”box11 shadow”></div> CSS: .box11 { width: 300px; height: 100p…

    2019年1月5日 网页制作
    4.2K0

发表回复

登录后才能评论