css3 animation和background-position制作动画效果（animation steps）

最新推荐文章于 2022-10-09 10:28:35 发布
最新推荐文章于 2022-10-09 10:28:35 发布
阅读量3.5k 收藏
点赞数
分类专栏： 简单的实用css效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuyuking/article/details/76498358
版权 
<style type="text/css">
			.userimg {
				display: inline-block;
				width: 36px;
				height: 36px;
				border-radius: 100%;
				background: url(img/bg_base_spr24.png) no-repeat -100px 0;
				vertical-align: top;
				margin-right: 10px;
			}
			
			.userimg:hover {
				border-color: #ffc52a;
				-webkit-animation: wakeup .2s steps(3) both;
				animation: wakeup .2s steps(3) both;
			}
			
			@-webkit-keyframes wakeup {
				0% {
					background-position: -100px 0;
				}
				100% {
					background-position: -250px 0;
				}
			}
			
			@keyframes wakeup {
				0% {
					background-position: -100px 0;
				}
				100% {
					background-position: -250px 0;
				}
			}
		</style>
	</head>

	<body>
		<span class="userimg"></span>
	</body>
animation: wakeup .2s steps(3) both; 
动画总时长0.2s，在3帧之间切换
阵雨丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3边框、背景、过渡以及动画
weixin_71437031的博客
07-21 647
css3时钟小动画
css background动态图片,CSS3 background-position定位背景图片动画效果
weixin_36354965的博客
08-04 1520
本章节分享一段代码实例，它实现了利用background-position属性控制背景图片实现动画效果。背景图片都集中在一张图片上，如下: 蚂蚁部落* {padding: 0px;margin: 0px;}body, html {width: 100%;height: 100%;margin: 0px;padding: 0px;}body {position: relative;backgroun...
background-position和animation制作逐帧动画
weixin_30518397的博客
01-21 832
利用background-position和animation制作逐帧动画，成品如下： html里面只要写一个元素就够了，动画我们把图片添加成背景做，再让背景在元素内移动。我用了一个整合图片，7个片段 *{margin:0;padding:0;} section{ width: 180px; height: 300px; backgroun...
通过background-position位移效果实现类似阿里云tab切换动画
zuo-yiran的博客
02-14 605
直接上代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { padding: 0px; margin: 0px; } body, html { width: 100%; height: 100%; margin: 0px; padding: 0px; } body { posit
background-position和长图实现鼠标悬浮动画效果
Whales_w的博客
06-09 513
以下图片及代码均来自 京东云 点击这里进入京东云 思路和效果图： background-position: 0 0可以用js动态的将长图按帧数一帧一阵的展示出来效果类似gif，红框就是可视界面，当替换的速度合适的时候就变成了动画（有点像小时候看的小人书） 用到的最核心的方法是requestAnimationFrame() 类似一个定时器 1 、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一
利用css3-animation实现逐帧动画效果
09-24
本文将深入探讨如何利用 `css3-animation` 实现逐帧动画效果，这对于创建动态图形、游戏元素或复杂的视觉效果非常有用。 首先，我们需要了解 CSS3 的 `@keyframes` 规则，它是创建动画的核心。`@keyframes` 允许...
css 之 background-position-x
10-30
background-position-x 属性是一个非常有用的 CSS 属性，可以用来设置背景图片的水平位置，提高网页的视觉效果。但需要注意的是，background-position-x 属性只能用于设置背景图片的水平位置，不能用于设置背景图片...
CSS3 animation实现逐帧动画效果
01-21
熟悉了animation的属性之后，得找个简单的小项目实现下，逐帧动画好有意思，先跑一个满足下自己思路很简单，就是给元素一个雪碧图的背景，然后添加的帧动画更改background-position，关键代码： CSS Code复制内容到...
CSS背景background、background-position使用详解
01-19
这篇文章将会涉及css背景(background)的基本用法，包括诸如 background-attachment 等的属性，也会介绍一些有关背景(background)的常用技巧，以及 css3 中的 背景(background)(包含4个新的背景(background)属性)。...
css3 transition 位置,css3 transform transition 动画 图片替换你本地方
weixin_33487490的博客
08-03 219
效果标题body{cursor: pointer;}@keyframes scroll {from {background-color: red;background-position-x: 0%;}20% {background-color: blue;background-position-x: 1000%;}40% {background-color: pink;background-pos...
background-position鱼游动特效.zip
07-04
background-position鱼游动特效是一款基于css3 animation transform属性制作两条游动的鲨鱼动画特效。
css background和animation精灵图实现帧动画，如何控制暂停和播放
PrimaryColor
12-15 705
效果图： 示例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .fis
html帧动画效果,CSS3 animation实现逐帧动画效果
weixin_31968831的博客
06-04 572
这篇文章主要介绍了CSS3 animation实现逐帧动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下css3里面的animation属性非常强大，但是自己用的比较少，最近有次面试就刚好被问到了，趁现在有时间就对animation做一个小总结。同时实现一个逐帧动画的demo作为练习animation属性一览因为animation属性比较多，然后在w3c上看有点蛋疼，干脆也做了一份导图，以...
CSS animation动画使用详解
Gik99的博客
07-12 3538
css之animation动画详解
CSS3 之 动画animation——动画的基本使用方法及属性（内含综合案例）
qq_43623147的博客
12-17 5530
动画（animation）是CSS3中具有颠覆性特征之一，可通过设置多个节点来精准控制一个或一组动画，常用来实现复杂的风化效果。 相比较过渡，动画可以实现更多变化、更多控制、连续播放等效果。 一、动画的基本使用 制作动画分为两部： 先定义动画 再使用（调用）动画 1. 用keyframes定义动画（类似定义类选择器） @keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px;
CSS3 background-position定位背景图片动画效果
weixin_33924312的博客
07-12 1872
2019独角兽企业重金招聘Python工程师标准>>> ...
css动画与渐变案例，使用动画和渐变做一个背景动态网页
zhangawei123的博客
10-09 4459
css动画与渐变案例，使用动画和渐变做一个背景动态网页 主要是渐变和动画效果，使用渐变来设置背景颜色，再配合background-position属性改变背景的大小，配合动画展示出一个背景在改变的效果。 字体 设置-webkit-background-clip: text;后设置颜色为透明，再重复上面的东西达成字体渐变的 效果。 泡泡是一个径向渐变配合动画，设置动画延时不同产生的依次漂浮向上的效果。
css实现帧动画
郊眠寺
05-24 3229
一般项目里面需要用的类似gif动效的地方，我都是让ui直接切好图片给我的，要是他们知道可以用css实现会不会打死我(逃… 话不多说，先上图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k1wCGc8l-1653371944949)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d9af97a8022144f7a0b140dc016a0813~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:
帧动画背景，适配各种屏幕
HYEHYEHYE的博客
11-26 435
帧动画实现方式大致分为三种，下面的css3动画和js动画的图片均使用雪碧图（我使用的雪碧图布局方式是top-down，无边距）实现，雪碧图生成方法可参考使用Grunt生成雪碧图_HYEHYEHYE的博客-CSDN博客 一、Gif图 这个方式是最简单快捷的，适合做一些比较简单、色彩单一的动画。因为 画质上，gif 支持颜色少(最大256色)、Alpha 透明度支持差，图像锯齿毛边比较严重； 交互上，不能直接控制播放、暂停、播放次数，灵活性差； 性能上，gif 会引起页面周期性的绘画，性能较差。 二
background-image、background-position、background-position、background-size
最新发布
12-29
background-position是CSS属性，用于设置背景图像的位置。可以使用关键字（如top、bottom、left、right、center）或百分比值来指定位置。 background-repeat是CSS属性，用于设置背景图像的平铺方式。常用的取值有...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值