Suck the cat with code! This paper is participating in[Cat Essay Campaign]

A preface

Hello, this is programmer South.

Today, I’m going to show you how to add meow audio to your cat’s movements.

Here directly take the house of webmaster cat animation template source code to add perfect meow function.

If you already have a code or a template, you can also refer to it for your Kitty meow

Meow, meow, meow

Two “hard” core code

【 HTML code 】

    <! -- Find the place you want to add the audio to where the mouse moves to -->
    <a href="#" onMouseOver="meow('ear')">
        <div>Play the audio where you want to move the mouse</div>
    </a>
    <! -- -- -- > audio
    <audio id="cat-angry" src="angry.mp3" preload="auto"></audio>
    <audio id="cat-meek" src="meek.mp3" preload="auto"></audio>
    <audio id="cat-q" src="cute.mp3" preload="auto"></audio>
Copy the code

【 JS code 】

    function meow(name) {
            // Meow
            switch (name) {
                case 'mouse':
                // When you touch a small mouth
                    var rainMusic = document.getElementById("cat-meek");
                    rainMusic.play();
                    break;
		case 'tail':
                    // Step on the cat's tail!
                    var rainMusic = document.getElementById("cat-angry");
                    rainMusic.play();
                    break;
                case 'ear':
                    // Touch the cat
                    var rainMusic = document.getElementById("cat-q");
                    rainMusic.play();
                    break; }}Copy the code

Iii. Presentation

[Display address]

Master, come play sa ~

nanfangzhe.gitee.io/cat-meow

[Display effect]

The current nuggets only support GIF effect, meow can only imagine :(meow meow meow ~

You can also go to station B to watch the effect:www.bilibili.com/video/BV17S…

Iv Complete Code

【 current use of cat meow audio download 】

Nanfangzhe. Gitee. IO/cat – meow/an… Nanfangzhe. Gitee. IO/cat – meow/me… Nanfangzhe. Gitee. IO/cat – meow/cu…

“The small icon”

Nanfangzhe. Gitee. IO/cat – meow/ca…

[cat.html]

<! DOCTYPEhtml>
<html>

<head lang="en">
	<meta charset="UTF-8">
	<title>Meet a cat different position different meow. - Southerner</title>
	<link rel="shortcut icon" href="./cat.ico">
	<style>
		.cat {
			width: 500px;
			margin: 0 auto;
			position: relative;
			cursor: pointer;
		}

		.head_content {
			position: absolute;
			top: 100px;
		}

		.ear_left {
			width: 100px;
			height: 150px;
			background-color: #FCEDBC;
			border-radius: 50% / 10%;
			position: absolute;
			top: 22px;
			left: 16px;
			transform: rotate(-20deg);
		}

		.ear_right {
			width: 100px;
			height: 150px;
			background-color: #FCEDBC;
			border-radius: 50% / 10%;
			position: absolute;
			top: 22px;
			left: 227px;
			transform: rotate(20deg);
		}

		.head {
			width: 345px;
			height: 270px;
			background-color: #FFF5D7;
			-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
			border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
			position: absolute;
			top: 0;
		}

		.brow_left {
			width: 44px;
			height: 20px;
			border: 1px solid transparent;
			border-top: 2px solid # 000;
			border-radius: 50%/35%;
			position: absolute;
			top: 49px;
			left: 60px;
			transform: rotate(-37deg);
		}

		.brow_right {
			width: 44px;
			height: 20px;
			border: 1px solid transparent;
			border-top: 2px solid # 000;
			border-radius: 50%/35%;
			position: absolute;
			top: 49px;
			left: 240px;
			transform: rotate(37deg);
		}

		.eye_left {
			width: 70px;
			height: 70px;
			background: #fff;
			border: 1px solid # 000;
			border-radius: 50%;
			position: absolute;
			top: 67px;
			left: 70px;
		}

		.eye_right {
			width: 70px;
			height: 70px;
			background: #fff;
			border: 1px solid # 000;
			border-radius: 50%;
			position: absolute;
			top: 67px;
			left: 205px;
		}

		.pupil {
			width: 38px;
			height: 38px;
			background: # 000;
			border-radius: 50%;
			position: absolute;
			top: 7px;
			left: 30px;
		}

		.beard_left1 {
			width: 95px;
			border-top: 1px solid # 000;
			position: absolute;
			top: 158px;
			left: -50px;
			transform: rotate(10deg);
		}

		.beard_left2 {
			width: 95px;
			border-top: 1px solid # 000;
			position: absolute;
			top: 187px;
			left: -60px;
			transform: rotate(-7deg);
		}

		.beard_left3 {
			width: 95px;
			border-top: 1px solid # 000;
			position: absolute;
			top: 208px;
			left: -50px;
			transform: rotate(-16deg);
		}

		.beard_right1 {
			width: 95px;
			border-top: 1px solid # 000;
			position: absolute;
			top: 158px;
			left: 300px;
			transform: rotate(-10deg);
		}

		.beard_right2 {
			width: 95px;
			border-top: 1px solid # 000;
			position: absolute;
			top: 187px;
			left: 310px;
			transform: rotate(7deg);
		}

		.beard_right3 {
			width: 95px;
			border-top: 1px solid # 000;
			position: absolute;
			top: 208px;
			left: 300px;
			transform: rotate(16deg);
		}

		.nose {
			width: 20px;
			height: 10px;
			background-color: # 000;
			border-radius: 50%/40%;
			position: absolute;
			top: 142px;
			left: 161px;
		}

		.mouse {
			position: absolute;
			top: 152px;
			left: 171px;
		}

		.mouse_top {
			height: 10px;
			border-left: 1px solid # 000;
			position: absolute;
			top: 0;
			left: 0;
		}

		.mouse_left {
			width: 100px;
			height: 100px;
			border: 1px solid transparent;
			border-bottom: 1px solid # 000;
			border-radius: 50%;
			position: absolute;
			top: -78px;
			left: -86px;
		}

		.mouse_right {
			width: 100px;
			height: 100px;
			border: 1px solid transparent;
			border-bottom: 1px solid # 000;
			border-radius: 50%;
			position: absolute;
			top: -78px;
			left: -14px;
		}

		.mouse_bottom {
			width: 20px;
			height: 20px;
			border: 1px solid transparent;
			border-bottom: 1px solid # 000;
			border-right: 1px solid # 000;
			position: absolute;
			top: 8px;
			left: -9px;
			transform: rotate(45deg);
		}

		.mouse_bottom_show {
			width: 100px;
			height: 100px;
			border: 1px solid transparent;
			border-bottom: 1px solid # 000;
			border-radius: 50%;
			position: absolute;
			top: -63px;
			left: -49px;
			display: none;
		}

		.miao {
			position: absolute;
			top: -5px;
			left: 52px;
			font-size: 20px;
			opacity: 0;
			color: #FD7055;
		}

		@keyframes miaoAnim {
			0% {
				opacity: 0;
				top: -5px;
				left: 52px;
			}

			30% {
				opacity: 1;
				top: -20px;
				left: 72px;
				font-size: 23px;
			}

			65% {
				opacity: 0.5;
				top: -35px;
				left: 92px;
				font-size: 26px;
			}

			100% {
				opacity: 0;
				top: -50px;
				left: 112px;
				font-size: 30px; }}.mouse:hover .mouse_bottom {
			display: none;
		}

		.mouse:hover .mouse_bottom_show {
			display: block;
		}

		.mouse:hover .miao {
			animation: miaoAnim 1.5 s linear;
		}

		.body_content {
			position: absolute;
			top: 305px;
			left: 101px;
		}

		.body {
			width: 140px;
			height: 165px;
			background: #FCEDBC;
			border: 1px solid # 000;
			border-radius: 50%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -10;
		}

		.arm_left {
			width: 20px;
			height: 80px;
			background: #FAE8AD;
			border: 1px solid # 000;
			border-radius: 50% / 40%;
			position: absolute;
			top: 30px;
			left: 10px;
			transform: rotate(50deg);
			z-index: -20;
		}

		.arm_right {
			width: 20px;
			height: 80px;
			background: #FAE8AD;
			border: 1px solid # 000;
			border-radius: 50% / 40%;
			position: absolute;
			top: 30px;
			left: 110px;
			transform: rotate(-50deg);
			z-index: -20;
		}

		.leg_left {
			width: 30px;
			height: 93px;
			background: #FAE8AD;
			border: 1px solid # 000;
			border-radius: 50% / 40%;
			position: absolute;
			top: 88px;
			left: 14px;
			transform: rotate(-20deg);
			z-index: -20;
		}

		.leg_right {
			width: 30px;
			height: 93px;
			background: #FAE8AD;
			border: 1px solid # 000;
			border-radius: 50% / 40%;
			position: absolute;
			top: 88px;
			left: 96px;
			transform: rotate(20deg);
			z-index: -20;
		}

		.tail {
			position: absolute;
			top: 86px;
			left: 52px;
			z-index: -30;
			animation: tailanim 1.5 s infinite;
		}

		.tail1 {
			width: 236px;
			height: 100px;
			border: 1px solid transparent;
			border-top: 1px solid # 000;
			border-radius: 50%;
			position: absolute;
			top: 0;
			left: 0;
			transform: rotate(-25deg);
		}

		.tail2 {
			width: 61px;
			height: 41px;
			border: 1px solid transparent;
			border-bottom: 1px solid # 000;
			border-right: 1px solid # 000;
			border-radius: 50%;
			position: absolute;
			top: -13px;
			left: 145px;
			transform: rotate(-38deg);
		}

		.tail3 {
			width: 23px;
			height: 30px;
			border: 1px solid transparent;
			border-bottom: 1px solid # 000;
			border-right: 1px solid # 000;
			border-radius: 50%;
			position: absolute;
			top: 5px;
			left: 148px;
			transform: rotate(121deg);
		}

		@keyframes tailanim {

			/* Tail animation */
			20% {
				transform: rotate(5deg);
			}

			40% {
				transform: rotate(0deg);
			}

			60% {
				transform: rotate(10deg);
			}

			100% {
				transform: rotate(0deg); }}.ear_left:hover {
			animation: earLeftAnim 0.5 s linear;
		}

		.ear_right:hover {
			animation: earRightAnim 0.5 s linear;
		}

		@keyframes earLeftAnim {
			50% {
				top: 13px;
				transform: rotate(-3deg);
			}

			100% {
				top: 22px;
				transform: rotate(-20deg); }}@keyframes earRightAnim {
			50% {
				top: 13px;
				transform: rotate(3deg);
			}

			100% {
				top: 22px;
				transform: rotate(20deg); }}</style>
</head>

<body>
	<div class="cat">
		<div class="head_content">
			<div class="ear_left">
				<a href="#" onMouseOver="meow('ear')">
					<div style="height: 50px; width: 100px;"></div>
				</a>
			</div>
			<div class="ear_right">
				<a href="#" onMouseOver="meow('ear')">
					<div style="height: 50px; width: 100px;"></div>
				</a>
			</div>
			</a>
			<div class="head">

			</div>
			<div class="brow_left"></div>
			<div class="brow_right"></div>
			<div class="eye_left">
				<div id="pL" class="pupil"></div>
			</div>
			<div class="eye_right">
				<div id="pR" class="pupil"></div>
			</div>
			<div class="beard_left1"></div>
			<div class="beard_left2"></div>
			<div class="beard_left3"></div>
			<div class="beard_right1"></div>
			<div class="beard_right2"></div>
			<div class="beard_right3"></div>
			<div class="nose"></div>
			<div class="mouse">
				<div class="mouse_top"></div>
				<div class="mouse_left"></div>
				<div class="mouse_right"></div>
				<a href="#" onMouseOver="meow('mouse')">
					<div class="mouse_bottom"></div>
					<div class="mouse_bottom_show"></div>
				</a>
				<div class="miao">Meow ~</div>
			</div>
		</div>
		<div class="body_content">
			<div class="body"></div>
			<div class="arm_left"></div>
			<div class="arm_right"></div>
			<div class="leg_left"></div>
			<div class="leg_right"></div>
			<div class="tail">
				<div class="tail1"></div>
				<a href="#" onMouseOver="meow('tail')">
					<div class="tail2"></div>
					<div class="tail3"></div>
				</a>
			</div>
		</div>
	</div>
	<!-- 猫叫音频 start -->
	<audio id="cat-angry" src="angry.mp3" preload="auto"></audio>
	<audio id="cat-meek" src="meek.mp3" preload="auto"></audio>
	<audio id="cat-q" src="cute.mp3" preload="auto"></audio>
	<! -- Cat meow -->
	<script>
		function meow(name) {
			// Meow
			switch (name) {
				case 'mouse':
					// When you touch a small mouth
					var rainMusic = document.getElementById("cat-meek");
					rainMusic.play();
					break;
				case 'tail':
					// Step on the cat's tail!
					var rainMusic = document.getElementById("cat-angry");
					rainMusic.play();
					break;
				case 'ear':
					// Touch the cat
					var rainMusic = document.getElementById("cat-q");
					rainMusic.play();
					break; }}</script>

	<script>
		// Get the location of the cat div
		var catx = document.getElementsByClassName("cat") [0].offsetLeft;
		var pL = document.getElementById("pL");
		var pR = document.getElementById("pR");
		var r = 17;

		document.onmousemove = function (ev) {
			var e = ev || event;
			var m = [];
			m.x = e.clientX - catx; // Mouse coordinates can be placed on the left and so on
			m.y = e.clientY - 170; //head_content, head, eye distance from the upper area, so that the mouse can fall on the upper area
			var s = [];
			s.x = pL.offsetLeft;
			s.y = pL.offsetTop;
			var mosx = Math.abs(m.x - s.x);
			var mosy = Math.abs(m.y - s.y);
			var angle = Math.atan(mosy / mosx);
			var cx = 0,
				cy = 0;
			if (m.x >= s.x && m.y <= s.y) {
				cx = Math.cos(angle) * r;
				cy = Math.sin(angle) * -r;
				// console.log(" bottom right ");
			}
			if (m.x < s.x && m.y < s.y) {
				cx = Math.cos(angle) * -r;
				cy = Math.sin(angle) * -r;
				//            console.log("左下");
			}
			if (m.x < s.x && m.y > s.y) {
				cx = Math.cos(angle) * -r;
				cy = Math.sin(angle) * r;
				// console.log(" upper left ");
			}
			if (m.x > s.x && m.y > s.y) {
				cx = Math.cos(angle) * r;
				cy = Math.sin(angle) * r;
				//            console.log("右上");
			}

			if ((m.x + catx) >= catx && (m.x + catx) <= (catx + 345) && (m.y + 170) > =100 && (m.y + 170) < =360) {
				pL.style.top = 15 + 'px';
				pR.style.top = 15 + 'px';
				pL.style.left = 18 + 'px';
				pR.style.left = 18 + 'px';
			} else {
				pL.style.top = 15 + cy + 'px';
				pR.style.top = 15 + cy + 'px';
				pL.style.left = 17 + cx + 'px';
				pR.style.left = 17 + cx + 'px'; }}</script>

	<! -- <div style="text-align:center; margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';" > <p> For browsers: 360, FireFox, Chrome, Safari, Opera, Maxthon, Sogou, Window of the World. Internet Explorer 8 or later is not supported. Source: < / p > < p > < a href = "http://sc.chinaz.com/" target = "_blank" > master material < / a > < / p > < / div > -- >
</body>

</html>
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

[HTML] shock front 】【 | my site abruptly meow, meow ~

A preface

Two “hard” core code

【 HTML code 】

【 JS code 】

Iii. Presentation

[Display address]

[Display effect]

Iv Complete Code

【 current use of cat meow audio download 】

“The small icon”

[cat.html]

Five complete project source code address

Project source code address

Six thank

[HTML] shock front 】 【 | my site abruptly meow, meow ~

A preface

Two “hard” core code

【 HTML code 】

【 JS code 】

Iii. Presentation

[Display address]

[Display effect]

Iv Complete Code

【 current use of cat meow audio download 】

“The small icon”

[cat.html]

Five complete project source code address

Project source code address

Six thank

Related Posts

“Network Communication Basics” is an easy to understand explanation of HTTP versions, HTTPS, digital certificates and other postures

Simpler and more powerful library than ButterKnife

Vue MVVM framework understanding

[HTML] shock front 】【 | my site abruptly meow, meow ~