할 수 있는 방법을 넣어 애니메이션에 접 html 요소 css 하지만 그것이의 테두리를 애니메이션 뿐만 아니라?

Question 1

할 수 있는 방법을 넣어 애니메이션에 접 html 요소 css 하지만 그것이의 테두리를 애니메이션 뿐만 아니라? 이제 무슨 일이 일어나는 모든 것을 애니메이션. 는 코드는 다음과 같습니다:

.pageName{
   width: 14.0vh;
   padding: 1.5vh 1.5vh 1.5vh 3.5vh;
   font-family: Monaco;
   font-weight: bold;
   font-size: 2.0vh;
   color: #006400;
    margin: auto;
    animation: blinker 5s linear infinite;
    border-width: 0.5vh;
    border-style: double;
    border-radius: 1.0vh;
}

@keyframes blinker {
  50% {
    opacity: .25;
  }
}

<div class="pageName">Title Page</div>

감사합니다!

Question 2

할 수 있는 별도의 이동 텍스트로 span 적용하고 애니메이션 span. 참조 아래 코드.

<html>

<head>

  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

  <style>
    body {
      padding: 0;
      margin: 0;
      font-family: sans-serif;
    }

    .pageName {
     
      width: 14.0vh;
      padding: 1.5vh 1.5vh 1.5vh 3.5vh;
      border-width: 0.5vh;
      border-style: double;
      border-radius: 1.0vh;
      color: #006400;
      margin: auto;
    }

    .pageName span {
      animation: blinker 5s linear infinite;
      font-family: Monaco;
      font-weight: bold;
      font-size: 2.0vh;
      color: #006400;
    }

    @keyframes blinker {
      50% {
        opacity: .1;
      }
    }
  </style>
</head>

<body>

  <div class="pageName"><span>Title Page</span></div>

</body>

</html>

어떤 이유로 코드 조각에서 편집,레이아웃을 가져 엉망,하지만 당신은 태그를 복사하고 실행 그것은 로컬로 그것은 당신이 설계되었습니다.

Question 3

포장도 div 있으로 컨테이너만 대상으로 내부와 사업부는 애니메이션

.container {
    width: 14.0vh;
    padding: 1.5vh 1.5vh 1.5vh 3.5vh;
    font-family: Monaco;
    font-weight: bold;
    font-size: 2.0vh;
    color: #006400;
     margin: auto;
     border-width: 0.5vh;
     border-style: double;
     border-radius: 1.0vh;
}

.pageName{
   
     animation: blinker 5s linear infinite;
     
 }
 
 @keyframes blinker {
   50% {
     opacity: .25;

   }
 }

<div class="container">
    <div class="pageName">Title Page</div>
  </div>

Authentic Science · Answer 1 · 2021-11-23T02:39:45

할 수 있는 별도의 이동 텍스트로 span 적용하고 애니메이션 span. 참조 아래 코드.

<html>

<head>

  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

  <style>
    body {
      padding: 0;
      margin: 0;
      font-family: sans-serif;
    }

    .pageName {
     
      width: 14.0vh;
      padding: 1.5vh 1.5vh 1.5vh 3.5vh;
      border-width: 0.5vh;
      border-style: double;
      border-radius: 1.0vh;
      color: #006400;
      margin: auto;
    }

    .pageName span {
      animation: blinker 5s linear infinite;
      font-family: Monaco;
      font-weight: bold;
      font-size: 2.0vh;
      color: #006400;
    }

    @keyframes blinker {
      50% {
        opacity: .1;
      }
    }
  </style>
</head>

<body>

  <div class="pageName"><span>Title Page</span></div>

</body>

</html>

어떤 이유로 코드 조각에서 편집,레이아웃을 가져 엉망,하지만 당신은 태그를 복사하고 실행 그것은 로컬로 그것은 당신이 설계되었습니다.

Santiago Sierra · Answer 2 · 2021-11-23T02:34:23

포장도 div 있으로 컨테이너만 대상으로 내부와 사업부는 애니메이션

.container {
    width: 14.0vh;
    padding: 1.5vh 1.5vh 1.5vh 3.5vh;
    font-family: Monaco;
    font-weight: bold;
    font-size: 2.0vh;
    color: #006400;
     margin: auto;
     border-width: 0.5vh;
     border-style: double;
     border-radius: 1.0vh;
}

.pageName{
   
     animation: blinker 5s linear infinite;
     
 }
 
 @keyframes blinker {
   50% {
     opacity: .25;

   }
 }

<div class="container">
    <div class="pageName">Title Page</div>
  </div>

할 수 있는 방법을 넣어 애니메이션에 접 html 요소 css 하지만 그것이의 테두리를 애니메이션 뿐만 아니라?

질문

최고의 응답

다른 언어로

이 페이지는 다른 언어로되어 있습니다

이 카테고리에서 인기

인기 있는 질문에 이 카테고리