2、CSS动画——拳皇动画实现

简介: 2、CSS动画——拳皇动画实现

本篇主要利用了animation实现了三个动画效果:奔跑的小孩,行走的人和拳皇动画;


实现步骤:


1、找寻需要用到的三张图:




奔跑的小孩

1.gif



行走的人



3.png

拳皇


2、右单击图片查看属性,如图:



1.gif

其他两张方法类似;


获取这里的宽度:474px          高度:70px


3、编写代码,实现动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 59px;
            height: 70px;
            margin: 0 auto;
            background-image: url(./img/奔跑小人.jpg);
            /* background-position: 0; */
            animation: BoyTest 0.8s steps(8) infinite alternate;
        }
        /* 创建关键帧 */
        @keyframes BoyTest {
            from{background-position: 0 0;}
            to{background-position: -474px 0;}
        }
        .box2{
            width: 296px;
            height: 340px;
            margin: 0 auto;
            background-image: url(./img/1.jpg);
            /* background-position: 0; */
            animation: ManTest 0.8s steps(4) infinite alternate;
        }
        /* 创建关键帧 */
        @keyframes ManTest {
            from{background-position: 0 0;}
            to{background-position: -1183px 0;}
        }
        .box3{
            width: 256px;
            height: 424px;
            margin: 0 auto;
            background-image: url(./img/2.jpg);
            /* background-position: 0; */
            animation: GameTest 0.8s steps(4) infinite alternate;
        }
        /* 创建关键帧 */
        @keyframes GameTest {
            from{background-position: 0 0;}
            to{background-position: -1024px 0;}
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

 

 

 

4、效果展示

3.png

2.png

1.gif



 5、animation属性值的详细解释


       在我的另一篇博文中有详细解释,不懂得可以去翻阅:http://t.csdn.cn/fBzSY


相关文章
|
5天前
|
前端开发 JavaScript
CSS 过渡和动画
CSS过渡和动画是用于为网页元素添加动态效果的两种重要技术
110 73
|
28天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
4月前
|
机器学习/深度学习 前端开发 JavaScript
|
1月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
50 22
|
3月前
|
移动开发 前端开发 JavaScript
除了 CSS3,还有哪些技术可以实现动画效果?
除了 CSS3,还有哪些技术可以实现动画效果?
155 63
|
3月前
|
Web App开发 前端开发 JavaScript
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
148 58
|
3月前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
70 31
|
4月前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解,并采取适当的策略和方法。通过不断的实践和优化,你可以在各种浏览器上创造出流畅、美观且兼容的动画效果,为用户带来更好的体验。在实际开发中,要密切关注浏览器的发展动态,及时掌握最新的兼容性技巧和解决方案,以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
134 58
|
2月前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果,呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现,没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
64 6
|
3月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
91 7

热门文章

最新文章