小demo:微信拍一拍功能实现_微信拍一拍怎么做前端

作者：人工智能uu | 2024-06-30 04:21:07

踩

微信拍一拍怎么做前端

使用CSS3的动画特效和JS

双击后头像摇动及显示拍一拍


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.containor{
				width: 550px;
				height: 500px;
				border: 1px solid #cccc;
				position: relative;
				background-color: #ccc;
			}
			.containor>img{
				width: 50px;
				height: 50px;
				border-radius: 8px;
			}
			.containor>p{
				border: 1px soli #ccc;
				background-color: white;
				display: inline-block;
				border-radius: 5px;
				color:black;
				padding: 5px;
				font-size: 14px;
			}
			.containor>img:nth-child(1){
				position: absolute;
				left: 10px;
				top:20px;	
			}
			.containor>img:nth-child(2){
				position: absolute;
				right: 10px;
				top:100px;	
			}
			.containor .one{
				position: absolute;
				top:18px;
				left: 70px;
			}
			.containor .two{
				position: absolute;
				top:97px;
				right: 70px;
			}
			.containor .hePad{
				display: none;
				position: absolute;
				top:150px;
				left: 200px;
				background-color: darkgrey;
				opacity: 0.4;
				
			}
			.containor .mePad{
				display: none;
				position: absolute;
				top:150px;
				left: 200px;
				background-color: darkgrey;
				opacity: 0.4;
			}
			@keyframes bePad{
				0% {
					transform: rotate(0deg);
				}
				20% {
					transform: rotate(20deg);
				}
				40% {
					transform: rotate(-20deg);
				}
				60% {
					transform: rotate(20deg);
				}
				80% {
					transform: rotate(-20deg);
				}
				100% {
					transform: rotate(0deg);
				}
				
			}
			@-webkit-@-webkit-keyframes bePad{ /* Safari and Chrome */
				0% {
					transform: rotate(0deg);
				}
				20% {
					transform: rotate(20deg);
				}
				40% {
					transform: rotate(-20deg);
				}
				60% {
					transform: rotate(20deg);
				}
				80% {
					transform: rotate(-20deg);
				}
				100% {
					transform: rotate(0deg);
				}
				
			}
			.containor .he{
				
				transform-origin: bottom;
			}
			.containor .me{
				transform-origin: bottom;
			}
			
		</style>
		<script>
			window.onload=function(){
				var he=document.querySelector(".he");
				var me=document.querySelector(".me");
				var hePad=document.querySelector(".hePad");
				var mePad=document.querySelector(".mePad");
				he.ondblclick=function(){
					this.style.animation=" bePad 0.5s ";
					hePad.style.display="block";
					setTimeout(()=>{		
						this.style.animation=" ";
						hePad.style.display="";
					},2000);	
				};
				me.ondblclick=function(){
					this.style.animation=" bePad 0.5s ";
					mePad.style.display="block";
					setTimeout(()=>{		
						this.style.animation=" ";
						mePad.style.display="";
					},2000);	
				}
			};
		</script>
	</head>
	<body>
		<div class="containor">
			<img src="./two.jpg" alt="" class="he">
			<img src="./one.jpg" alt="" class="me">
			<p class="one">*********************</p>
			<p class="two">嘿嘿嘿</p>
			<p class="hePad">榨汁机拍了拍汁</p>
			<p class="mePad">汁拍了拍榨汁机</p>
		</div>
	</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/771357