• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

playButton mittles css

xorg1990

xorg1990

New member
Hi, ich habe mir mittels css ein Play Symbol erstellt allerdings Probleme damit.

Problem 1: das Play symbol (das Dreieck) ist nicht mittig im kreis es will mir nicht gelingen das es mittig wird.

Problem 2: Wenn man den Kreis hovered wird der Durchmesser größer. Klick man allerdings auf das Symbol so das das Pause Symbol kommt,
funktioniert die Animation nicht mehr. Warum??

HTML: 
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style type="text/css">
#playButton{
    position: absolute;
    top:100px;
    left: 120px;
    width: 100px;
    height: 150px;
}

.play {
  display: block;
  width: 0;
  height: 0;
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;
  border-left: 55px solid #2c3e50;
  position: relative;
  z-index: 1;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.play:before {
  content: '';
  position: absolute;
  top: -75px;
  left: -88px;
  bottom: -50px;
  right: -35px;
  border-radius: 50%;
  border: 5px solid #2c3e50;
  z-index: 2;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.play:after {
  content: '';
  opacity: 0;
  transition: opacity 0.6s;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
}
.play:hover:before, .play:focus:before {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
}
.play.active {
  border-color: transparent;
}
.play.active:after {
  content: '';
  opacity: 1;
  width: 40px;
  height: 60px;
  background: #2c3e50;
  position: absolute;
  right: 2px;
  top: -40px;
  border-left: 10px solid #2c3e50;
  box-shadow: inset 30px 0 0 0 white;
}
</style>
<script>
	function run() {
		const icon = $('.play');
		icon.click(function() {
		    icon.toggleClass('active');
			return false;
  		});
	}
</script>
</head>
<body onload="run()">
<div id="playButton"><a role="button" href="#" title="Play/Pause" class="play"></a></div>	
</body>
</html>

Noch was ein anchor Tag ohne href ist ja nicht valide. Wenn ich aber den anchor die role="button" gebe schon? oder nicht?
Habe das jetzt schon öfter in Quelltexten so gesehen.
 
xorg1990 schrieb:
Problem 1: das Play symbol (das Dreieck) ist nicht mittig im kreis es will mir nicht gelingen das es mittig wird.
Zum Vergrößern anklicken....
Code: 
border-top: 35px solid transparent;
border-bottom: 35px solid transparent;
border-left: 55px solid #2c3e50;

dein dreieck geht also 35px nach oben und unten und 55px nach links
dann ist das
Code: 
top: -75px;
left: -88px;
bottom: -50px;
right: -35px;
nie ein rahmen um die mitte
mit durchmesser 150 wäre das ein rahmen um die mitte:
Code: 
bottom: -75px;
top: -75px;
left: -102px;
right: -48px;
75px nach oben und unten die 55px durch 2 sind ca. 27 die du nach links draufrechnest und nach rechts abziehst

xorg1990 schrieb:
Problem 2: Wenn man den Kreis hovered wird der Durchmesser größer. Klick man allerdings auf das Symbol so das das Pause Symbol kommt,
funktioniert die Animation nicht mehr. Warum??
Zum Vergrößern anklicken....
.play:focus:before
der focus bleibt, lass das einfach weg
 
Die Berechnung ist leider etwas komplizierter (man will ja das Dreieck mittig platzieren, so dass alle drei Ecken gleich weit vom Rand weg sind) - hab' das mal per Auge zentriert:
Code: 
<html>
<head>
<style type="text/css">
#playButton{
    position: absolute;
    top:100px;
    left: 120px;
    width: 100px;
    height: 150px;
}

.play {
  display: block;
  width: 0;
  height: 0;
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;
  border-left: 55px solid #2c3e50;
  position: relative;
  z-index: 1;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.play:before {
  content: '';
  position: absolute;
  top: -63px;
  left: -97px;
  bottom: -62px;
  right: -26px;
  border-radius: 50%;
  border: 5px solid #2c3e50;
  z-index: 2;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.play:after {
  content: '';
  opacity: 0;
  transition: opacity 0.6s;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
}
.play:hover:before, .play:focus:before {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
}
.play.active {
  border-color: transparent;
}
.play.active:after {
  content: '';
  opacity: 1;
  width: 40px;
  height: 60px;
  background: #2c3e50;
  position: absolute;
  right: 10px;
  top: -30px;
  border-left: 10px solid #2c3e50;
  box-shadow: inset 30px 0 0 0 white;
}
</style>
<script>
	window.onload = function run() {
		[].forEach.call(document.getElementsByClassName('play'), function(icon){
			icon.addEventListener("click", function() {
				icon.classList.toggle('active');
  			});
  		});
	}
</script>
</head>
<body>
<div id="playButton"><span role="button" title="Play/Pause" class="play"></span></div>	
</body>
</html>
 
kkapsner schrieb:
man will ja das Dreieck mittig platzieren, so dass alle drei Ecken gleich weit vom Rand weg sind
Zum Vergrößern anklicken....
ok, das macht sinn
ich hab das mal ein wenig umgebaut, da mir das mit den ganzen absolut-positionierten elementen nicht gefallen hat
mein dreieck liegt mit border-width: 37px 0 37px 74px; relativ auf den positionen
Code: 
-74/-37
         0/0
-74/37
damit ergibt sich ein umkreis-mittelpunkt von (-74 + 0 -74)/3 = -49,3 für x, y = 0 das sieht man zwar, aber rechnerisch (-37 + 0 + 37)/3 = 0
den kreis wieder mit durchmesser 150 width: 150px; height: 150px; und rand 5 border: 5px solid #2c3e50; muss damit
positioniert werden bei top: -80px; left: -129px; da mit mittelpunkt bei y = 0 und radius von 75 plus rand von 5 top bei -80 liegen muss
left ergibt sich wieder aus radius von 75 plus rand von 5 mit mittelpunkt bei x = -49 ergibt das ein left von -129

das pause-symbol welches eigentlich auf den koordinaten
Code: 
-74/0    0/0

-74/74   0/74
liegt muss jetzt auch verschoben werden, damit es mittig im kreis liegt. der mittelpunkt des kreises ist -49, der des pause-symbols -37, damit muss es noch 12 weiter nach links und bekommt ein left: -12px;
da sich der kreis jetzt auch nach dem pause-symbol ausrichtet, muss bei diesem auch wieder top / left angepasst werden. wieder radius 75 plus rand 5 bei mittelpunkt -37/37 ergibt das -117 als left und -43 als top

das ganze sieht dann so aus
Code: 
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <style type="text/css">
      #test {
        position: relative;
        display: block;
        top:100px;
        left: 100px;
        width: 400px;
        height: 400px;
      }
      
      .play {
        width: 74px;
        height: 0px;
        cursor: pointer;
        background: transparent;
        padding: 0;
        border-style: solid;
        border-width: 37px 0 37px 74px;
        border-color: transparent transparent transparent #202020;
      }
      
      .play.paused {
        position: relative;
        left: -12px;
        height: 74px;
        border-style: double;
        border-width: 0px 0px 0px 74px;
      }
      
      .play:before {
        position: relative;
        display: block;
        content: '';
        top: -80px;
        left: -129px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 5px solid #2c3e50;
        transition-duration: 0.5s;
        transition-property: transform;
      }
      
      .play.paused:before {
        top: -43px;
        left: -117px;
      }
      
      .play:hover:before {
        transform: scale(1.1);
        transition-duration: 0.5s;
      }
    </style>
    <script>
      function run()
      {
        const icon = $('.play');
        icon.click(function()
        {
          icon.toggleClass('paused');
          return false;
        });
      }
    </script>
  </head>
  <body onload="run()">
    <spawn id="test"><button class='play'></button></spawn>
  </body>
</html>
ich kenn mich mit css zwar nicht so aus, aber das gefällt mir besser
 
Zuletzt bearbeitet:
Cool danke, mir gefallen beide Lösung sehr gut. Hätte das wie kkapsner auch nur PI*Augenmas eingeloted.


Noch was die vorwärts/rückwärts Tasten wollte ich über Spitze klammer machen + pipe Symbol >>|
Kennt einer eine Schriftart in der sich Öffnung der klammer vergrößert oder verkleinert?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben