animate.css运行效果

心已赠人 2022-05-16 14:47 270阅读 0赞

做了一个animate.css的下拉框改变效果的h5页面，用jq和vue写的，如果要换成原生也很方便。自己随便改改就可以用了。

下面是整个h5页面代码，要用就自己去下载animate.css，然后将js 的路径修改一下就可以了。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="../css/animate.css"/>
    		<style type="text/css">
    			
    			html,body{
    				width: 100%;
    				height: 100%;
    				margin: 0;
    				padding: 0;
    				border: 0;
    				outline: 0;
    				font-size: 100%;
    				vertical-align: baseline;
    				background: transparent;
    			}
    			.wai{
    				width: 100%;
    				height: 100%;
    				background-color: rgba(52, 154, 181, 0.9);
    				display: flex;
    				justify-content: center;
    				align-items: center;
    				
    			}
    			.cent{
    				display: flex;
    				flex-direction:column;
    				align-items: center;
    				
    			}
    			#main1{
    				margin: 20px;
    				font-size: 110px;
    				font-family: "幼圆";
    			}
    			.set{
    				width: 310px;
    				height: 100px;
    				display: flex;
    				justify-content: space-around;
    				align-items: center;
    			}
    			.set select,.set button{
    				height: 50px;
    				border: 1px solid #C0C0AA;
    				border-radius: 10px;
    			}
    			.set select{
    				width: 50%;
    				font-size: 120%;
    			}
    			.set button{
    				width: 30%;
    				font-size: 150%;
    			}
    		</style>
    	</head>
    	<body>
    	
    <div class="wai" id="app">
    		<div class="cent">
    			<div id="main1">
    				我很方
    			</div>
    			<div class="set">
    				<select id="cd-dropdown" class="cd-select"  @change="sele">
    					<option  v-for="item in list" :key='item.name' :value="item.name" >{
       {item.name}}</option>
    				</select>
    				<button v-on:click="agen">再一次</button>
    			</div>
    		</div>
    	
    </div>
    <script src="../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	var app = new Vue({
    				el: "#app",
    				data: {
    					list:[
    					{name:"bounce"},{name:"flash"},{name:"pulse"},
    					{name:"rubberBand"},{name:"shake"},{name:"swing"},
    					{name:"tada"},{name:"wobble"},{name:"jello"},
    					{name:"bounceIn"},{name:"bounceInDown"},{name:"bounceInLeft"},
    					{name:"bounceInRight"},{name:"bounceInUp"},{name:"bounceOut"},
    					{name:"bounceOutDown"},{name:"bounceOutLeft"},{name:"bounceOutRight"},
    					{name:"bounceOutUp"},{name:"fadeIn"},{name:"fadeInDown"},
    					{name:"fadeInLeft"},{name:"fadeInDownBig"},{name:"fadeInLeftBig"},
    					{name:"fadeInRight"},{name:"fadeInRightBig"},{name:"fadeInUp"},
    					{name:"fadeInUpBig"},{name:"fadeOut"},{name:"fadeOutDown"},
    					{name:"fadeOutDownBig"},{name:"fadeOutLeft"},{name:"fadeOutLeftBig"},
    					{name:"fadeOutRight"},{name:"fadeOutRightBig"},{name:"fadeOutUp"},
    					{name:"fadeOutUpBig"},{name:"flipInX"},{name:"flipInY"},
    					{name:"flipOutX"},{name:"flipOutY"},{name:"lightSpeedIn"},
    					{name:"lightSpeedOut"},{name:"rotateIn"},{name:"rotateInDownLeft"},
    					{name:"rotateInDownRight"},{name:"rotateInUpLeft"},{name:"rotateInUpRight"},
    					{name:"rotateOut"},{name:"rotateOutDownLeft"},{name:"rotateOutDownRight"},
    					{name:"rotateOutUpLeft"},{name:"rotateOutUpRight"},{name:"hinge"},
    					{name:"rollIn"},{name:"rollOut"},{name:"zoomIn"},
    					{name:"zoomInDown"},{name:"zoomInLeft"},{name:"zoomInRight"},
    					{name:"zoomInUp"},{name:"zoomOut"},{name:"zoomOutDown"},
    					{name:"zoomOutLeft"},{name:"zoomOutRight"},{name:"zoomOutUp"},
    					{name:"slideInDown"},{name:"slideInLeft"},{name:"slideInRight"},
    					{name:"slideInUp"},{name:"slideOutDown"},{name:"slideOutLeft"},
    					{name:"slideOutRight"},{name:"slideOutUp"}
    					],
    					name:"bounce",
    				},
    				mounted: function() {
    					$("#main1").addClass("animated");
    				},
    				methods: {
    					sele:function(e){
    						$("#main1").removeClass(this.name).addClass(e.target.value);
    						this.name =  e.target.value;
    					},
    					agen:function(){
    						let name = this.name;
    						$("#main1").removeClass(name);
    						setTimeout(function(){
    								$("#main1").addClass(name);
    						},0)
    					},
    				},
    			})
    	
    </script>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDI2NDM3_size_16_color_FFFFFF_t_70]: /images/20220503/19e59e94e02c4ca0aa1d4df2c9080af5.png