Cum pot face o formă de linie curbată în CSS sau Javascript (Programare, Javascript, Html, Css, Modele De Design, Forme Css)

Jamiex304 a intrebat.

În prezent dezvolt un joc și am în prezent patru butoane,

Caut să transform acele 4 butoane colorate în forme de linii curbe ca în exemplul de mai jos

Am linkat css-ul meu și am făcut un fiddle ca să puteți vedea ce am.

JSFIDDLE – http://jsfiddle.net/eh7h7pn1/

Github descărcați și descompuneți pentru a vedea jocul în întregime https://github.com/Jamiex304/Simon_Says_Game_Demo

CSS-ul meu

body {
  background-color: #333;
  color: #fff;
}

ul {
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
  text-align: center;
}

li {
  display: inline-block;
  padding: 3px;
}

.wrapper {
  margin-top:10px;
  margin-bottom:20px;
  width: 650px;
  height: 50px;
  background-color:black;
  position: relative;
  margin: 0 auto;
  border-style: solid;
  border-width: 5px;
}

.wrapper2 {
  position: relative;
  width: 650px;
  height: 700px;
  margin: 0 auto;
  border-style: solid;
  border-width: 5px;
}

.wrapper3{
  position: relative;
  margin-top:20px;
  width: 650px;
  height: 170px;
  margin: 0 auto;
  background-color:black;
  border-style: solid;
  border-width: 5px;
}

.Timer{
  width:300px;
  height:200px;
  margin-top:235px;
  margin-left:177px;
  border:5px solid white;
  border-radius: 50%;
  background-color:black;
  text-align:center;
}

.pad {
  z-index: 1;
  margin: 10px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  opacity: 0.6;
}

.shape1 {
  position: absolute;
  left: 50%;
  margin-left: -50px;
  width: 125px;
  height: 125px;
  background-color: green;
  border-radius: 50%;
}

.shape2 {
  position: absolute;
  left: 50%;
  bottom: 2.5px;
  margin-left: -50px;
  width: 125px;
  height: 125px;
  background-color: red;
  border-radius: 50%;
}

.shape3 {
  position: absolute;
  left: 78%;
  right: 50%;
  bottom: 50%;
  margin-bottom: -50px;
  margin-right: -50px;
  width: 125px;
  height: 125px;
  background-color: purple;
  border-radius: 50%;
}

.shape4 {
  position: absolute;
  left: 0;
  bottom: 50%;
  margin-bottom: -50px;
  width: 125px;
  height: 125px;
  background-color: blue;
  border-radius: 50%;
}

.level, .score {
  width: 50%;
  float: left;
  text-align: center;
}

.sButton {
  width: 30%;
  margin: 0 auto;
  color: black;
  border: 3pt ridge Black;
  font-weight: bold;
}

.start {
  width: 100%;
  height: 30px;
  text-align: center;
}

Comentarii

  • Aw man, am selectat „Insane”, m-am pregătit, am apăsat „start”, …. și nu s-a întâmplat nimic. –  > Por Rudie.
  • Dacă vrei să faci un joc în HTML, ar trebui să te uiți la canvas. Nu vei merge prea departe cu dHTML, chiar și cu CSS avansat. Ceea ce vrei să faci este trivial în canvas, dar o pacoste în CSS și probabil că nu ar funcționa perfect pe toate browserele – -.  > Por Caio Vianna Lima Netto.
  • CSS nu se pricepe atât de bine la realizarea acestor forme. CANVAS este. Sau SVG. Aruncați o privire la Raphael –  > Por Rudie.
  • @Rudie doar pentru u am legat jocul complet pe github go nuts și poate că mă poți ajuta și cu această întrebare încă aștept un răspuns stackoverflow.com/questions/26391577/… –  > Por Jamiex304.
  • @Jamiex304 Ce zici de stackoverflow.com/questions/26391577/… ? –  > Por Rudie.
1 răspunsuri
Rudie

CSS nu face foarte bine forme de genul ăsta. CSS face forme simetrice, rotunde, drepte etc, dar nu curbe și organice.

CANVAS poate face tot ce vrei tu. Există o grămadă de funcții ajutătoare în contextul 2D, pentru a face curbe bezier etc.

Sau încercați SVG. Lucruri foarte mișto posibile cu un „pic” de JS. Consultați Raphael. Există o mulțime de matematică acolo, dar, în funcție de nevoile tale, vei avea nevoie de ceva. Jocurile au de obicei o încărcătură.