css教程

@keyframes实现CSS动画帧效果

我的站长站 2022-03-20 人阅读

本教程教大家如何使用@keyframes,制作一个类似幻灯片的CSS动画效果。

首先我们准备一张连贯的动作图片,这里以这张熊跑路为例。

@keyframes实现CSS动画帧效果

新建一个DIV容器,放这里一帧图片

<div></div>

DIV的盒子属性

div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
        }

@keyframes动作

@keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
         
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }

利用animation给DIV加上这个动作

div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 我们元素可以添加多个动画, 用逗号分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }
相关推荐
  • CSS3动画
  • @media
  • React.js新拟态CSS3动画生成网站源码
    React.js新拟态CSS3动画生成网站源码

    源码介绍一款国外搬运的CSS3动画生成网站源码,基于React.js框架开发,中文叫新拟态,英文原名叫Neumorphism/Soft UI。是一款助于设计人员和开发人员对其进行试验并可能对其进行调整的源码。源码截图...

    html模板 49 1年前
  • @keyframes实现CSS动画帧效果

    本教程教大家如何使用@keyframes,制作一个类似幻灯片的CSS动画效果。首先我们准备一张连贯的动作图片,这里以这张熊跑路为例。新建一个DIV容器,放这里一帧图片<div></div>DIV的盒子属性div { position: absolute; width: 200px; ...

    css教程 68 2年前
  • 五彩loading动画效果html页面模板
    五彩loading动画效果html页面模板

    一款五彩的loading动画效果html页面模板,loading文字从右到左一顺弧形滚动,非常漂亮。<meta http-equiv="refresh" content="3;url=http://www.wdzzz.com">content为跳转延迟时间,url为跳转后的地址...

    html模板 153 3年前
  • 全套@media响应式布局代码方案分享

    // 320@media screen and (min-width: 320px) { html { font-size: 15px; }}// 360@media screen and (min-width: 360px) { html { font-size:15px; }}// 375 iphone 678@media screen and (min-width: 375px) { html...

    css教程 12 5个月前
  • @keyframes实现CSS动画帧效果

    本教程教大家如何使用@keyframes,制作一个类似幻灯片的CSS动画效果。首先我们准备一张连贯的动作图片,这里以这张熊跑路为例。新建一个DIV容器,放这里一帧图片<div></div>DIV的盒子属性div { position: absolute; width: 200px; ...

    css教程 68 2年前
  • 分享自用的CSS自适应写法

    在写CSS前,需要在页面上<head>内加上如下代码,<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />禁止页面缩放,如果自动缩放了就不能触发CSS自适应代码了。然后是自用的CSS自适应代码,大...

    css教程 69 2年前
最新更新