CSS3 검색 대기 애니메이션 효과 코드? 배울 가치가 있는-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS3 검색 대기 애니메이션 효과 코드? 배울 가치가 있는

云罗郡主

Oct 16, 2018 pm 03:10 PM

이 글의 내용은 CSS3 검색 대기 애니메이션 효과 코드입니다. 참고할 만한 가치가 있는 친구들이 참고하시면 도움이 될 것입니다.

【관련 영상 추천 : 부트스트랩 튜토리얼】

<html>
  <head>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_720452_mhj331xuxd8.css">
    <style>
      *{
          margin:0;
          padding:0;
      }
      .load-icon{
          left:0;
          right:0;
          bottom:0;
          top:0;
          margin:auto;
          display: flex;
          justify-content: center;
          align-items: center;
          position:fixed;
      }
      .load-icon>div{
          width: 100px;
          height:100px;
          border-radius:50%;
          border:8px solid transparent;
          border-left-color:rgba(35, 196, 81,1);
          animation: animate 1s linear infinite;
      }
      .load-icon>span{
          position: absolute;
          color:#fff;
          text-shadow: 1px 3px 5px #333;
          width: 80px;
          height:80px;
          border:8px solid transparent;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
      }
      .load-icon>span>i{
          font-size:50px;
          animation: animate1 3s linear infinite;
      }
      .load-icon>span>span{
          font-size:50px;
          animation: shadow 3s linear infinite;
          color:rgba(35, 196, 81,1);
          overflow: hidden;
          position:absolute;
          top:13px;
      }
      @keyframes animate{
          0% { transform: rotate(0deg) ;box-shadow:inset 0 0 5px  rgba(35, 196, 81,.1)}
          50% { box-shadow:inset 0 0 5px  rgba(35, 196, 81,1) }
          100% { transform: rotate(360deg);box-shadow:inset 0 0 5px  rgba(35, 196, 81,.1) }
      }
      @keyframes animate1{
          0% { transform:translate3d(150%,0,0);}
          30% { transform:translate3d(0%,0,0);}
          70% { transform:translate3d(0%,0,0);}
          100% { transform:translate3d(-150%,0,0);}
      }
      @keyframes shadow{
          0% {transform:translate3d(150%,0,0); height:0%}
          30% { transform:translate3d(0%,0,0); height:0%}
          70% { transform:translate3d(0%,0,0);height:100%}
          100% {transform:translate3d(-150%,0,0);height:100%}
      }
    </style>
  </head>
  <body>
    <div class="load-icon">
      <span>
        <i class="iconfont icon-sousuo"></i>
        <span class="iconfont icon-sousuo"></span>
      </span>
      <div></div>
    </div>
  </body>
</html>

이상은 CSS3 검색 대기 애니메이션 효과 코드 전체 소개입니다. CSS 영상 튜토리얼에 대해 더 알고 싶으시다면 주목해주세요. PHP 중국어 웹사이트로 이동합니다.

위 내용은 CSS3 검색 대기 애니메이션 효과 코드? 배울 가치가 있는의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

이 기사는 qdfuns에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

관련 기사

주간 플랫폼 뉴스 : Galaxy Store, Tappable Stories, CSS Subgrid의 웹 앱Apr 14, 2025 am 11:20 AM

이번 주에 Roundup : Firefox는 Locksmith-Like Powers를 얻는 Samsung '의 Galaxy Store가 프로그레시브 웹 앱을 지원하기 시작하고 CSS Subgrid는 Firefox에서 배송됩니다.

주간 플랫폼 뉴스 : Internet Explorer 모드, 검색 콘솔의 속도 보고서, 알림 제한 프롬프트 제한Apr 14, 2025 am 11:15 AM

이번 주에 Roundup : Internet Explorer는 Edge로가는 길을 찾고 Google 검색 콘솔은 새로운 속도 보고서를 선전하고 Firefox는 Facebook의 알림을 제공합니다.

CSS 사용자 정의 속성을 갖춘 범위의 힘 (및 재미)Apr 14, 2025 am 11:11 AM

당신은 아마도 이미 CSS 변수에 익숙 할 것입니다. 그렇지 않다면 여기 2 초 개요가 있습니다. 실제로 사용자 정의 속성이라고합니다.

우리는 프로그래머입니다Apr 14, 2025 am 11:04 AM

웹 사이트 구축은 프로그래밍입니다. HTML 및 CSS 작성은 프로그래밍입니다. 나는 프로그래머이며, 여기에 CSS- 트릭을 읽는다면, 당신은 ' re a입니다.

사이트에서 사용하지 않은 CSS를 어떻게 제거합니까?Apr 14, 2025 am 10:59 AM

여기에 내가 당신이 선불 아는 것을 좋아하는 것 : 이것은 어려운 문제입니다. 당신이 여기에 착륙 한 경우, 당신은 당신이 말할 수있는 도구를 가리키기를 희망하기 때문에 여기에 착륙했다면

Picture-in-Picture Web API 소개Apr 14, 2025 am 10:57 AM

Picturein-Picture는 2016 년 Macos Sierra의 출시와 함께 Safari 브라우저에서 웹에서 처음으로 등장했습니다. 사용자가 팝 팝이 가능했습니다.

개츠비를 사용하여 흐릿한 효과를위한 이미지를 구성하고 준비하는 방법Apr 14, 2025 am 10:56 AM

개츠비는 훌륭한 작업 처리 및 처리 이미지를 수행합니다. 예를 들어, 수동으로 이미지 최적화로 시간을 절약 할 수 있습니다.

오, 패딩 비율은 부모 요소의 너비를 기준으로합니다.Apr 14, 2025 am 10:55 AM

나는 오늘 비율 기반 (%) 패딩에 대해 내 머리에 완전히 잘못되었다고 배웠습니다! 나는 항상 백분율 패딩이

See all articles

핫 AI 도구

뜨거운 도구

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.