腾讯云首页帧动画实现
2023-03-15 22:02:26 时间
最近腾讯云官网改版,更新了一些动态图标
其实实现方法很简单,就是CSS3的animate属性就可以实现。 之前做过一个微博点赞的例子,以下是源码 把动画所需要的帧图片放到一张图上,然后通过animate属性来控制它。 横向或者纵向都可以,鼠标经过会进行3d旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>animate</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
*,
:after,
:before {
box-sizing: border-box;
}
.ani {
width: 23px;
position: relative;
height: 28px;
}
.btn {
display: inline-block;
cursor: pointer;
}
.like {
display: inline-block;
border-radius: 50px;
}
.btn .ani::before {
content: '';
position: absolute;
left: 0px;
top: 0px;
width: 23px;
height: 28px;
background-image: url('./images/steps_praised.png');
background-position: left;
background-repeat: no-repeat;
background-size: 483px 28px;
}
.like .ani::before {
animation: likeBlast 0.65s 1 steps(20);
background-position: right;
}
@keyframes likeBlast {
0% {
background-position: left;
}
100% {
background-position: right;
}
}
.icon {
width: 60px;
height: 60px;
background: url('./images/ani-storage.png');
background-position: top;
background-repeat: no-repeat;
background-size: 60px 1500px;
cursor: pointer;
margin-top: 50px;
}
/* .icon:hover {
animation: in 0.5s 1 steps(24);
background-position: bottom;
} */
@keyframes in {
0% {
background-position: top;
}
100% {
background-position: bottom;
}
}
@keyframes out {
0% {
background-position: bottom;
}
100% {
background-position: top;
}
}
.anis {
animation: in 0.5s 1 steps(24) forwards;
}
.moveanis {
animation: out 0.5s 1 steps(24) forwards;
}
</style>
</head>
<body>
<div class="btn">
<div class="ani"></div>
</div>
<p>鼠标点击</p>
<div class="icon">
</div>
<p>鼠标经过</p>
</body>
<script>
$(function () {
$('.btn').click(function () {
$(this).toggleClass('like')
})
$('.icon').hover(function () {
$(this).removeClass('moveanis').addClass('anis')
}, function () {
$(this).removeClass('anis').addClass('moveanis')
})
})
</script>
</html>
所需图片下载
相关文章
- 一篇运维老司机的大数据平台监控宝典(2)-联通大数据集群平台监控体系详解
- 一篇运维老司机的大数据平台监控宝典(1)-联通大数据集群平台监控体系进程详解
- 空中换引擎 博时基金数字化转型经验谈
- 如何高效地学习编程语言
- 作为一名阿里巴巴数据分析大牛,送给学弟学妹的经验积分
- 为什么要学习R语言
- Hadoop大数据分析平台的介绍性讨论
- 最全面的Spring学习笔记
- 16个用于数据科学和机器学习的顶级平台
- 给有抱负的数据科学家的六条建议
- 如何做一枚合格的数据产品经理
- 除Kaggle外,还有哪些顶级数据科学竞赛平台
- 一个鲜为人知却可以保护隐私的训练方法:联合学习
- 干货 :送你12个关于数据科学学习的关键提示(附链接)
- 大数据行业有多少种工作岗位,各自的技能需求是什么?
- 中国移动研究院常耀斌:商用大数据平台的研发之路
- 这些数据科学家必备的技能,你拥有哪些?
- 自学成才的开发者有何优势和劣势?
- Gartner报告:正处于数据科学与机器学习工具 “大爆炸”的时代
- Ready Computing借助InterSystems IRIS医疗版为医疗机构提供具有高度互操作性和可扩展性的解决方案