<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <p> HP<span>TUBE </span> </p> <iframe width="560" height="315" src="https://www.youtube.com/embed/2GBzYu59YLQ" frameborder="0" allowfullscreen></iframe> <iframe width="560" height="315" src="https://www.youtube.com/embed/GTT5cH-mEZA" frameborder="0" allowfullscreen></iframe> <iframe width="560" height="315" src="https://www.youtube.com/embed/48oghQOAKgc" frameborder="0" allowfullscreen></iframe> <a class="twitter-timeline" href="https://twitter.com/HTERCUMANP" data-widget-id="726049107974959105">@HTERCUMANP tarafından gönderilen tweetler</a></div> <script type="text/javascript">// <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); // ]]></script> <div><iframe width="340" height="500" style="border: none; overflow: hidden;" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ftercumanbilisimmerkezi%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=1787699868124294" scrolling="no" allowtransparency="true" frameborder="0"></iframe> <iframe width="340" height="500" style="border: none; overflow: hidden;" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fharunpehlivanit&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=1787699868124294" scrolling="no" allowtransparency="true" frameborder="0"></iframe>

p { font-family: 'Teko', sans-serif; font-size: 100px; text-align: center; position: relative; width: 300px; margin: 2em auto; z-index: 1; } p::after, p::before{ content: ' '; position: absolute; z-index: -1 } p::after { top: 12%; left: 43%; width: 52%; height: 65%; background: red; border-radius: 25px / 30px; animation: mv 1s linear forwards; } span { color: #FFF; margin-left: 10px; animation: textcolor 0.30s linear forwards; } @keyframes textcolor { 100% {color: #000;}} p::before { background: red; top: 32.5%; left: -20%; border: 18px solid transparent; border-left: 30px solid #FFF; z-index: 2; color: #FFF; visibility: hidden; animation: visibilityBefore 1s linear 0.85s forwards; } @keyframes mv { 100% { top: 23%; width: 100px; height: 65px; border-radius: 15px / 20px; transform: translatex(-230px); }} @keyframes visibilityBefore { 100% {visibility: visible;}} p:hover span{ animation: textcolor 0.30s linear forwards; } p:hover p::before{ animation: visibilityBefore 1s linear 0.85s forwards; } p:hover p::after{ animation: mv 1s linear forwards; }