CSS3、原生JS、Vue3.0技术各自实现序列帧动画效果
还记得序列帧技术在2018年的时候很火的,那时做H5很吃香的...
那么在此记录一下用纯CSS3、原生JS、Vue3.0,这3种方式来设计几个例子。需要自己去找一下雪碧图哦,比如阿里云、腾讯云官网有很多雪碧图的~
1、使用纯CSS3方式实现
-
<template>
-
<div class="machine">
-
<div class="machine-box" :class="sign ? 'machine-running' : ''" @click="handleMachineRunningClick">
-
</div>
-
</div>
-
</template>
-
-
<script>
-
import { ref } from 'vue';
-
-
export default {
-
name: 'machineComponent',
-
setup() {
-
-
let sign = ref(false);
-
-
function handleMachineRunningClick() {
-
sign.value = true;
-
}
-
-
return {sign, handleMachineRunningClick}
-
}
-
}
-
</script>
-
-
<style scoped>
-
.machine {
-
width: 250px;
-
height: 250px;
-
margin: 100px auto 0 auto;
-
border-radius: 250px;
-
box-shadow: 0px 0px 5px #888;
-
}
-
-
.machine .machine-box {
-
width: 64px;
-
height: 64px;
-
margin: 0 auto;
-
cursor: pointer;
-
background-position: 0 0;
-
background-size: 100%;
-
transform: translateY(93px);
-
background-image: url('./machine.png');
-
}
-
-
.machine .machine-running {
-
animation: startingRun 1s steps(1, start) infinite;
-
}
-
</style>
-
-
<style>
-
@keyframes startingRun {
-
0% {
-
background-position: 0 64px;
-
}
-
5% {
-
background-position: 0 128px;
-
}
-
10% {
-
background-position: 0 192px;
-
}
-
15% {
-
background-position: 0 256px;
-
}
-
20% {
-
background-position: 0 320px;
-
}
-
25% {
-
background-position: 0 384px;
-
}
-
30% {
-
background-position: 0 448px;
-
}
-
35% {
-
background-position: 0 512px;
-
}
-
40% {
-
background-position: 0 576px;
-
}
-
45% {
-
background-position: 0 640px;
-
}
-
50% {
-
background-position: 0 704px;
-
}
-
55% {
-
background-position: 0 768px;
-
}
-
60% {
-
background-position: 0 768px;
-
}
-
65% {
-
background-position: 0 832px;
-
}
-
70% {
-
background-position: 0 896px;
-
}
-
75% {
-
background-position: 0 960px;
-
}
-
80% {
-
background-position: 0 1024px;
-
}
-
85% {
-
background-position: 0 1088px;
-
}
-
90% {
-
background-position: 0 1152px;
-
}
-
95% {
-
background-position: 0 1216px;
-
}
-
100%{
-
background-position: 0 1280px;
-
}
-
}
-
</style>
效果:~
2、使用原生JS方式实现(在阿里云官网右键JS源码找到的^^)
-
-
<html>
-
<head>
-
<title>使用原生JS方式实现序列帧动画</title>
-
<style type="text/css">
-
.machine {
-
width: 250px;
-
height: 250px;
-
margin: 100px auto 0 auto;
-
border-radius: 250px;
-
box-shadow: 0px 0px 5px #888;
-
}
-
-
.machine .machine-box {
-
width: 64px;
-
height: 64px;
-
margin: 0 auto;
-
cursor: pointer;
-
background-position: 0 0;
-
background-size: 100%;
-
transform: translateY(93px);
-
background-image: url('./player.png');
-
}
-
</style>
-
</head>
-
-
<body>
-
<div class="machine">
-
<div class="machine-box"></div>
-
</div>
-
</body>
-
-
<script type="text/javascript">
-
-
let count = 0;
-
let enterTimer;
-
let leaveTimer;
-
-
var o = document.getElementsByClassName("machine-box")[0];
-
-
o.onmouSEO((Search Engine Optimization))ver = function() {
-
clearInterval(leaveTimer),
-
enterTimer = setInterval(function() {
-
if (count < 20 && 64 * count < 1344) {
-
count ;
-
document.getElementsByClassName("machine-box")[0].style.backgroundPositionY = -64 * count "px";
-
} else {
-
clearInterval(enterTimer)
-
}
-
}, 30);
-
};
-
-
o.onmouSEO((Search Engine Optimization))ut = function() {
-
clearInterval(enterTimer),
-
leaveTimer = setInterval(function() {
-
if (count > 0 && 64 * count > 0) {
-
count--;
-
document.getElementsByClassName("machine-box")[0].style.backgroundPositionY = -64 * count "px"
-
} else {
-
clearInterval(leaveTimer)
-
}
-
}, 30);
-
};
-
</script>
-
</html>
效果:~
3、使用Vue3.0方式实现
-
<template>
-
<div class="machine">
-
<span>{{ offsetHeight }}</span>
-
<div
-
class="machine-box"
-
:style="'background-position: 0 ' offsetHeight 'px'"
-
@mouseenter.stop.prevent="handleMouseEnter"
-
@mouseleave.stop.prevent="handleMouseLeave">
-
</div>
-
</div>
-
</template>
-
-
<script>
-
import { ref } from 'vue';
-
-
export default {
-
name: 'machineComponent',
-
setup() {
-
// 响应式设置偏移高度初始化为0
-
let offsetHeight = ref(0);
-
-
// 运算符初始化为加号,因为开始时的偏移高度为0,只能增加
-
let operator = 'add';
-
-
// 鼠标进入事件定时器
-
let enterTimer;
-
-
// 鼠标离开事件定时器
-
let leaveTimer;
-
-
/**
-
* 增加背景图片的偏移高度
-
*/
-
function loopComputeOffsetHeight() {
-
if (operator == 'add') {
-
offsetHeight.value = 64;
-
if (offsetHeight.value >= 1344) {
-
operator = 'reduce';
-
}
-
} else {
-
if (offsetHeight.value > 0) {
-
offsetHeight.value -= 64;
-
if (offsetHeight.value <= 0) {
-
operator = 'add';
-
}
-
}
-
}
-
console.log(operator, offsetHeight.value);
-
}
-
-
/**
-
* 减少背景图片的偏移高度
-
*/
-
function reduceOffsetHeight() {
-
if (offsetHeight.value > 0) {
-
offsetHeight.value -= 64;
-
if (offsetHeight.value <= 0) {
-
clearInterval(leaveTimer)
-
operator = 'add';
-
}
-
console.log(offsetHeight.value);
-
}
-
}
-
-
/**
-
* 鼠标进入事件
-
*/
-
function handleMouseEnter() {
-
clearInterval(leaveTimer);
-
enterTimer = setInterval(loopComputeOffsetHeight, 50);
-
}
-
-
/**
-
* 鼠标离开事件
-
*/
-
function handleMouseLeave() {
-
clearInterval(enterTimer);
-
leaveTimer = setInterval(reduceOffsetHeight, 50);
-
}
-
-
return {offsetHeight, handleMouseEnter, handleMouseLeave}
-
}
-
}
-
</script>
-
-
<style scoped>
-
.machine {
-
width: 250px;
-
height: 250px;
-
position: relative;
-
text-align: center;
-
margin: 100px auto 0 auto;
-
border-radius: 250px;
-
box-shadow: 0px 0px 5px #ddd;
-
}
-
-
.machine span {
-
position: absolute;
-
position: absolute;
-
margin: auto;
-
left: 0;
-
right: 0;
-
top: 50px;
-
bottom: auto;
-
}
-
-
.machine .machine-box {
-
width: 64px;
-
height: 64px;
-
margin: 0 auto;
-
background-position: 0 0;
-
background-size: 100%;
-
transform: translateY(93px);
-
background-image: url('./machine.png');
-
cursor: pointer;
-
}
-
</style>
效果:~
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgeheca
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01