vue使用css3实现无限旋转动画——面试

<!DOCTYPE html><html><head><title></title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&

FrontJS

6501人浏览 · 2018-09-25 19:10:32

FrontJS · 2018-09-25 19:10:32 发布

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style type="text/css">
		/*无限旋转动画*/
		@keyframes changDeg{
			0%{
				transform: rotate(0deg);
			}
			100%{
				transform: rotate(360deg);
			}
		}
		#app{
			width:500px;
			height: 500px;
			margin:50px auto;
			/*transform: rotate(0deg);*/
			background-color:red;
			animation:changDeg 2s linear 0.2s infinite;
		}
		
	</style>
</head>
<body>
	<!-- <div></div> -->
	<div id="app"></div>
<script type="text/javascript">
	var app = new Vue({
			el:'#app'
	});
</script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^