<style> .sheep { display: inline-block; position: relative; font-size: 1em; } #HTML6 .widget-content button { position: relative; margin: 25px 5px 0px; } .sheep * { transition: transform 0.3s; } .sheep .top { position: relative; top: 0; animation: bob 1s infinite; } .sheep:hover .eid-head { transform: rotate(0deg); } .sheep:hover .eid-head .eye { width: 1.25em; height: 1.25em; } #HTML6 .widget-content button { position: relative; margin: 25px 5px 0px; background: none; color: white; padding: 3px 5px; border-radius: 100%; text-align: center; cursor: pointer; } .sheep:hover .eid-head .eye:before { right: 30%; } .sheep:hover .top { animation-play-state: paused; } .sheep .eid-head { display: inline-block; width: 5em; height: 5em; border-radius: 100%; background: #211e21; vertical-align: middle; position: relative; top: 1em; transform: rotate(30deg); z-index: 3; } .sheep .eid-head:before { content: ''; display: inline-block; width: 80%; height: 50%; background: #211e21; position: absolute; bottom: 0; right: -10%; border-radius: 50% 40%; } .sheep .eid-head:hover .ear.one, .sheep .eid-head:hover .ear.two { transform: rotate(0deg); } .sheep .eid-head .eye { display: inline-block; width: 1em; height: 1em; border-radius: 100%; background: white; position: absolute; overflow: hidden; } eid-title { font-family: 'Reem Kufi'; font-size: 50px; display: block; font-weight: bolder; line-height: 0.4; color: white; } eid-title2 { font-family: 'Reem Kufi'; font-size: 60px; display: block; font-weight: bolder; color: white; } .sheep .eid-head .eye:before { content: ''; display: inline-block; background: black; width: 50%; height: 50%; border-radius: 100%; position: absolute; right: 10%; bottom: 10%; transition: all 0.3s; } .sheep .eid-head .eye.one { right: -2%; top: 1.7em; } .sheep .eid-head .eye.two { right: 2.5em; top: 1.7em; } .sheep .eid-head .ear { background: #211e21; width: 50%; height: 30%; border-radius: 100%; position: absolute; } .sheep .eid-head .ear.one { left: -10%; top: 5%; transform: rotate(-30deg); } .sheep .eid-head .ear.two { top: 2%; right: -5%; transform: rotate(20deg); } .sheep .eid-body { display: inline-block; width: 7em; float: left; height: 7em; border-radius: 100%; background: white; position: relative; vertical-align: middle; margin-right: -3em; z-index: 1; } .sheep .legs { display: inline-block; position: absolute; top: 80%; left: 10%; z-index: 0; } .sheep .legs .leg { display: inline-block; background: #141214; width: 0.5em; height: 2.5em; margin: 0.2em; } .sheep:before { content: ''; display: inline-block; position: absolute; top: 112%; width: 100%; height: 10%; border-radius: 100%; background: rgba(0, 0, 0, 0.4); } </style> <eid-title>عيد</eid-title> <eid-title2>أضحى</eid-title2> <eid-title>مبارك</eid-title> <div class="scene"> <div class="sheep"> <span class="top"> <div class="eid-body"></div> <div class="eid-head"> <div class="eye one"></div> <div class="eye two"></div> <div class="ear one"></div> <div class="ear two"></div> </div> </span> <div class="legs"> <div class="leg"></div> <div class="leg"></div> <div class="leg"></div> <div class="leg"></div> </div> </div> </div> <audio id="myAudio"> <source src="https://www.ashefaa.com/enshad/files/Al3ed/yaser-faylakawy.mp3" type="audio/mp3"> <source src="https://www.ashefaa.com/enshad/files/Al3ed/yaser-faylakawy.mp3" type="audio/mp3"> متصفحك لا يدعم امكانية تشغيل الصوت </audio> <p>اضغط على زر التشغيل</p> <button onclick="pauseAudio()" type="button"><i class="fas fa-pause"></i></button> <button onclick="playAudio()" type="button"><i class="fas fa-play"></i></button> <script> var x = document.getElementById("myAudio"); function playAudio() { x.play(); } function pauseAudio() { x.pause(); } </script>