Profil von Cinemaster679

Cinemaster679

28.03.2022, 13:07

Hallo zusammen,

ich habe folgendes Problem:

Wenn man den folgenden Button anklickt und die Seite dann reloaded, dann transformiert sich die Form / Pfeil seltsam.

Außerdem würde ich gerne, dass die Animation nach ca. 2 Sekunden zurückgesetzt wird auf den Ausgangszustand, sobald die Animation durchgelaufen ist.

HTML:

<div class="container-fluid">
      <div class="row">
       <div id="ms-container">
        <label for="ms-download">
         <div class="ms-content">
          <div class="ms-content-inside">
           <input type="checkbox" id="ms-download" />
           <div class="ms-line-down-container">
            <div class="ms-line-down"></div>
           </div>
           <div class="ms-line-point"></div>
          </div>
         </div>
        </label>
       </div>
      </div>
     </div>

CSS:

siehe Antwort

...zum Beitrag

Antwort

von Cinemaster679

28.03.2022, 13:07

CSS:

#ms-container {

width: 100%;

}

.ms-content {

position: relative;

width: 200px;

height: 200px;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

border: 10px solid #2ea4f2;

border-radius: 100%;

}

.ms-content-inside {

width: 100%;

height: 100%;

position: relative;

}

.ms-line-down-container {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

transform: rotate(0deg);

transition: transform 0s ease;

}

#ms-download {

display: none;

}

#ms-download:checked ~ .ms-line-down-container {

transform: rotate(-360deg);

transition: transform 1.5s ease 1.25s;

}

.ms-line-down {

position: absolute;

top: 0;

right: 0;

left: 0;

bottom: 0;

margin: auto;

width: 10px;

height: 125px;

background: #FFFFFF;

border-radius: 50px;

transition: height .5s ease;

}

#ms-download:checked ~ .ms-line-down-container .ms-line-down {

height: 10px;

top: -20px;

animation: ms-bounce .5s forwards .55s;

}

#ms-download:checked ~ .ms-line-down-container .ms-line-down:before {

content: '';

position: absolute;

top: 0;

left: -94px;

right: 0;

bottom: 0;

width: 200px;

height: 200px;

border: 10px solid transparent;

border-radius: 100%;

animation: ms-border-fill .5s forwards 3s;

}

.ms-line-point {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

width: 58px;

height: 130px;

transition: height .15s ease .45s;

}

#ms-download:checked ~ .ms-line-point {

height: 60px;

}

#ms-download:checked ~ .ms-line-point:before {

transform: rotate(90deg);

right: -10px;

animation: ms-check-right .25s forwards 3s;

}

#ms-download:checked ~ .ms-line-point:after {

transform: rotate(-90deg);

left: -10px;

animation: ms-check-left .25s forwards 3s;

}

.ms-line-point:before,

.ms-line-point:after {

content: '';

position: absolute;

width: 10px;

height: 75px;

bottom: -10px;

background: #FFFFFF;

border-radius: 50px;

transition: transform .15s ease .47s, left .15s ease .47s, right .15s ease .47s;

}

.ms-line-point:before {

right: 0px;

transform: rotate(45deg);

}

.ms-line-point:after {

left: 0px;

transform: rotate(-45deg);

}

@keyframes ms-bounce {

0% {

top: -20px;

}

25% {

top: -250px;

}

50% {

top: -275px;

}

100% {

top: -190px;

}

@keyframes ms-check-left {

0% {

transform: rotate(-90deg);

left: -10px;

height: 75px;

}

100% {

transform: rotate(-45deg);

left: 0px;

height: 45px;

}

@keyframes ms-check-right {

0% {

transform: rotate(90deg);

right: -10px;

height: 75px;

bottom: -10px;

}

100% {

transform: rotate(45deg);

right: 10px;

height: 80px;

bottom: -15px;

}

@keyframes ms-border-fill {

0% {

border: 10px solid transparent;

}

100% {

border: 10px solid #FFFFFF;

}

...zur Antwort

Cinemaster679

02.03.2022, 14:14

HTML, CSS Circular Progress-Bar funktioniert nich in Firefox?

Hallo zusammen,

ich habe folgenden Code. Dieser funktioniert in Chrome problemlos, in Firefox wird die Progress Anzeige nicht angezeigt.

Gibt es eine Möglichkeit, diesen auch für Firefox anzupassen?

HTML:

<svg>

</svg>

</div>

</div>

<svg>

</svg>

</div>

</div>

<svg>

</svg>

</div>

<h2>JavaScript</h2>

</div>

CSS als Antwort

...zum Beitrag

Antwort

von Cinemaster679

02.03.2022, 14:15

CSS

body{

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: #101010;

}

.container{

position: relative;

width: 900px;

display: flex;

justify-content: space-around;

}

.container .card{

position: relative;

width: 250px;

background: linear-gradient(0deg, #1b1b1b, #222, #1b1b1b);

display: flex;

justify-content: center;

align-items: center;

height: 300px;

border-radius: 4px;

text-align: center;

overflow: hidden;

transition: 0.5s;

}

.container .card:hover{

transform: translateY(-10px);

box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);

}

.container .card::before{

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(255, 255, 255, 0.03);

z-index: 1;

}

.percent{

position: relative;

width: 150px;

height: 150px;

border-radius: 50%;

box-shadow: inset 0 0 50px #000;

background: #222;

z-index: 1000;

}

.percent .number{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

display: flex;

justify-content: center;

align-items: center;

border-radius: 50%;

}

.percent .number h2{

color: #777;

font-weight: 700;

font-size: 40px;

transition: 0.5s;

}

.card:hover .percent .number h2{

color: white;

font-size: 60px;

}

.percent .number h2 span{

font-size: 24px;

color: #777;

transition: 0.5s;

}

.card:hover .percent .number h2 span{

color: white;

}

.text{

position: relative;

color: #777;

margin-top: 20px;

font-weight: 700;

font-size: 18px;

letter-spacing: 1px;

text-transform: uppercase;

transition: 0.5s;

}

.card:hover .text{

color: white;

}

svg{

position: relative;

width: 150px;

height: 150px;

z-index: 1000;

transform: rotate(-90deg);

}

svg circle{

width: 100%;

height: 100%;

fill: none;

stroke: #191919;

stroke-width: 10;

stroke-linecap: round;

transform: translate(5px, 5px);

} svg circle:nth-child(2){

stroke-dasharray: 440;

stroke-dashoffset: 440;

}.card:nth-child(1) svg circle:nth-child(2){

stroke-dashoffset: calc(440 - (440 * 90) / 100);

stroke: #00ff43;

}.card:nth-child(2) svg circle:nth-child(2){

stroke-dashoffset: calc(440 - (440 * 70) / 100);

stroke: #00a1ff;

}.card:nth-child(3) svg circle:nth-child(2){

stroke-dashoffset: calc(440 - (440 * 60) / 100);

stroke: #ff04f3;

}

...zur Antwort