CSS3动画制作的简单示例_html/css_WEB-ITnose
CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择。今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动画的方法,可以做出类似于 GIF 动画的效果。
CSS3 Animation steps函数
首先看看,CSS3 animation的兼容性。可以看到基本上主流浏览器都支持了 animation 属性,chrome、safari、opera和移动端的浏览器带上前缀就可以支持。
利用雪碧图来制作动画使用了 CSS3 Animation 里面的一个重要的函数 steps。
animation 本身是一个复合的属性,它包含了 animation-name,animation-timing-function,animation-iteration-count,animation-direction,animation-play-state,animation-fill-mode 六个属性。
steps 就是属于 animation-timing-function 中的一个函数。
animation-timing-function 平时我们用的比较多的是默认的一些动画曲线值 ease、ease-in 等等。而 steps 则可以由我们控制动画被分成多少个部分进行。
steps(n,[start|end]) 传入一到两?个参数,第一个参数意思是把动画分成 n 等分,然后动画就会平均地运行。第二个参赛默认值是 start 表示从动画的开头开始运行,相反,end 就表示从动画的结尾开始运行。
因此,我们利用雪碧图和 steps 函数制作动画的原理就是,雪碧图包含了动画图片的每一帧,然后利用 steps 函数确定固定时间内动画运行的部分等于动画的帧数,从而实现动画效果。
动画实例
用猥琐的兔斯基做例子?( ̄? ̄")?
首先我们要切图,把动画的每一帧切成这样的图:
切图如果大家不想折腾,推荐在线合并雪碧图的工具。
然后写 keyframes
CSS Code复制内容到剪贴板
@-webkit-keyframes tuski { 0% { background-position:0; } 100% { background-position: -576px 0; } } @-moz-keyframes tuski { 0% { background-position:0; } 100% { background-position: -576px 0; } } @keyframes tuski { 0% { background-position:0; } 100% { background-position: -576px 0; } }
调用动画
CSS Code复制内容到剪贴板
#tuski { -webkit-animation: tuski .5s steps(12) infinite; -moz-animation: tuski .5s steps(12) infinite; animation: tuski .5s steps(12) infinite; }
与 GIF 相比,这种动画可以让我们手动调整动画运行的速度。
点这里看完整的代码。
大功告成。

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
