vue3之自定义动画代码

最新推荐文章于 2024-01-29 09:25:01 发布

默默努力的小老弟

最新推荐文章于 2024-01-29 09:25:01 发布

阅读量393

点赞数

文章标签： vue.js 前端 html5

本文链接：https://blog.csdn.net/weixin_47039303/article/details/121639422

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

	#box{
		width: 100px;
		height: 100px;
		background-color: red;
		

	}
	.animate{
		animation: myanimate 2s infinite alternate;
		/*infinite是不断的做*/

	}
	@keyframes myanimate{
			0%{
	             transform:translate(0);
			}
			50%{
				  transform:translate(20px);
			}
			100%{
				  transform:translate(0);
			}

		}
	


	</style>
</head>
<body>
	<div id="app">
			<div id="box" :class="{ animate:isUseAnimate }"></div>
			<button @click="isUseAnimate=!isUseAnimate">开始/结束</button>
	

    </div>




</body>
<script src="https://unpkg.com/vue@next"></script>
<script>


	const app=Vue.createApp({
       data(){
       		return {
				msg:"father",
				isUseAnimate:false
			}
       },
       components:{
       
       },
       methods:{
          change(){
        
          }
       }

	});
	app.mount("#app");



</script>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

默默努力的小老弟

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3之自定义动画代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 100px; height: 100px; background-color: red; } .animate{ animation: myanimate 2s infini
复制链接

扫一扫