순수한 CSS3 드로잉 라이터 애니메이션 불꽃 효과 샘플 코드-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

순수한 CSS3 드로잉 라이터 애니메이션 불꽃 효과 샘플 코드

高洛峰

Mar 07, 2017 pm 02:05 PM

CSS3 애니메이션

이 글의 예시는 참고용으로 순수 CSS3를 사용하여 가벼운 애니메이션의 불꽃 효과를 그리는 구체적인 코드를 공유합니다.

주로 다음과 같은 속성이 포함됩니다. :

<span style="font-family:Comic Sans MS;">animation(webkit-animation),   
@keyframes name (@-webkit-keyframes name),   
transform,   
transform-origin,   
transition,   
box-shadow（spread属性）,   
text-shadow   
z-index   
linear-gradient。   
radial-gradient   
background-image    
</span>

로그인 후 복사

먼저 html 코드는 다음과 같습니다.

 <span style="font-family:Comic Sans MS;"><!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>纯CSS绘制打火机动画火焰特效</title>
  <link rel="stylesheet" href="css/style.css">
 </head>
 <body class="keBody">
  <h1 class="keTitle">纯CSS3绘制打火机动画火焰特效</h1>
  <p class="kePublic">
   <p class="playground">
    <p class="flame"></p>
    <p class="lighterBody">
     <p class="hover">hover me</p>
    </p>
    <p class="lid"></p>
   </p>
   <p class="clear"></p>
  </p>
 </body>
</html></span>

로그인 후 복사

style.css 파일은 다음과 같습니다.

<span style="font-family:Comic Sans MS;">@charset "utf-8";   
body{   
 margin:0;   
 padding:0;   
 color:#333;   
 text-align:center;   
 font:12px "微软雅黑";   
}   
:before,:after{   
 position:absolute;   
 content:"";   
}   
.keBody{   
 background:url(../images/bodyBg.jpg) repeat #333;   
}   
.keTitle{   
 height:100px;   
 line-height:100px;   
 font-size:30px;   
 font-family:&#39;微软雅黑&#39;;   
 color:#fff;   
 text-align:center;   
 background:url(../images/bodyBg3.jpg) repeat-x bottombottom left;   
 font-weight:normal;   
 margin-bottom:0;   
}   
.kePublic{   
 background:#cccccc;   
 padding:50px;   
}   
.playground{   
 position:relative;   
 width:140px;   
 height:400px;   
 left:50%;   
 margin-left:-70px;   
}   
.flame{   
   opacity: 0;   
   position: absolute;   
   bottombottom: 60%;   
   left: 42%;   
   width: 14px;   
   height: 70px;   
   background-color: white;   
   border-radius: 100% 100% 0 0;   
   box-shadow: 0 0 20px #FFFEF0, 0 0 20px #FFFEE6, 0 0 20px #fefcc9,  10px -10px 30px #feec85,  -20px -20px 40px #ffae34,  20px -40px 50px #ec760c,  -20px -60px 60px #cd4606,  0 -80px 70px #973716,  10px -90px 80px #451b0e;   

}   
.playground:hover .flame {   
 opacity:1;   
 transition:opacity 3s linear;   
 -webkit-animation:flame 1s infinite linear;   

}   
.playground:hover .lid{   
 -webkit-animation:lidoff 1s linear;   
 /*把物体动画地从一个地方移动到另一个地方，并让它停留在那里：*/
 -webkit-animation-fill-mode:forwards;   
}   
.lighterBody{   
 position:absolute;   
 width:140px;   
 height:130px;   
 top:200px;   
 left:0;   
 background-image:linear-gradient(to rightright,#959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,   
     #4e4e4e 76%,#383838 87%,#1b1b1b 100%);   
 border-radius:2% 2% 8% 8%;   
 box-shadow:inset 0 0 5px 5px #333;   
}   
.lighterBody:before{   
 width:47px;   
 height:47px;   
 top:-50px;   
 left: 42px;   
 content:"...";   
 color:#e6e6e6;   
 border-radius:6% 6% 0 0;   
 background-image:linear-gradient(to rightright,#f5f5f5 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);   
 font-size:30px;   
 font-weight:bold;   
 letter-spacing:7px;   
 line-height:16px;   
 text-shadow:0 0 5px black;   
 padding-top:3px;   
 padding-left:4px;   
}   
.lighterBody:after{   
 width:33px;   
 height:33px;   
 background-image:radial-gradient(ellipse at center,#7d737d 0%,#0e0e0e 100%);   
 border-radius:100%;   
 top:-33px;   
 left:10px;   
 box-shadow:inset 0 0 1px 2px gray;   
}   
.lid{   
 z-index:2;   
 position:absolute;   
 width:140px;   
 height:75px;   
 top:125px;   
 left:0;   
 background:linear-gradient(to rightright,#959595 0%,#0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);   
 border-radius:8% 8% 2% 2%;   
 box-shadow:inset 0 0 5px 5px #333;   
 /*border-bottom:3px solid #f2f2f2;*/
}   
.lid:before{   
 width:10px;   
 height:10px;   
 top:70px;   
 left:133px;   
 background-image:radial-gradient(ellipse at center, #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%);   
 border-radius:100%;   
}   

.hover{   
 z-index:1;   
 text-align:center;   
 margin-top:30%;   
 color:rgba(255,255,255,0.9);   
 text-shadow:0 1px 1px rgba(0,0,0,0.8);   
 font: 20px "微软雅黑";   
}   
.hover:before{   
 content:"";   
 z-index:1;   
 width:0;   
 height:0;   
 top:-50px;   
 left:20px;   
 border-bottom:35px solid #f2f2f2;   
 /*border-left:10px solid transparent;*/
}   
@-webkit-keyframes flame{   
 0%{   
  height:70px;   
  transform:skewY(0deg);   
  border-radius:100% 100% 0 0;   
 }   
 25%{   
  height:60px;   
  transform:skewY(40deg);   
  border-radius:10% 100% 0 0;   
 }   
 60%{   
  height:65px;   
  transform:skewY(-20deg);   
  border-radius:90% 10% 0 0;   
 }   
 70%{   
  height:50px;   
  transform:skewY(10deg);   
  border-radius:10% 100% 0 0;   
 }   
 100%{   
  height:70px;   
  tranform:skewY(0deg);   
 }   
}   
@-webkit-keyframes lidoff{   
 from{   
  transform:rotate(0deg);   
  transform-origin:100% 100%;   
 }   
 to{   
  transform:rotate(130deg);   
  transform-origin:100% 100%;   
 }   
}</span>

로그인 후 복사

초기 사진:

동적 사진

두 가지 주요 애니메이션 효과가 있습니다. 하나는 마우스를 호버링할 때입니다. "hover me"가 표시될 때 라이터 덮개가 열리는 상황은 다음 애니메이션 코드로 구현됩니다.

 <span style="font-family:Comic Sans MS;font-size:12px;">@-webkit-keyframes lidoff{     注意这里要加上-webkit-   
     from{   
          transform:rotate(0deg);   
          transform-origin:100% 100%;   
     }   
     to{   
          transform:rotate(130deg);   
          transform-origin:100% 100%;   
     }   
}    
</span>

로그인 후 복사

두 번째 애니메이션은 촛불 조명 효과의 구현입니다. 촛불은 전환 변수 :opacity 3s Linear에 의해 제어됩니다.

바람에 흔들리는 촛불의 효과는 다음 코드로 달성됩니다. 🎜>

<span style="font-family:Comic Sans MS;font-size:12px;">@-webkit-keyframes lidoff{   
    from{   
         transform:rotate(0deg);   
         transform-origin:100% 100%;   
    }   
    to{   
         transform:rotate(130deg);   
         transform-origin:100% 100%;   
    }   
</span>

로그인 후 복사

몸통에서 라이터 덮개를 분리하는 효과 다음으로 구현됩니다: box-shadow:inset 0 0 5px 5px #333 주로 여기 삽입으로 구현됩니다(주의하세요). insert로 쓰지 마세요.)

라이터를 켰을 때 나타나는 둥근 공과 작은 흰색 사각형은 :after :before와 z-index를 결합하여 얻은 효과입니다.

다음은 이 예시를 통해 배웠고 주의해야 할 몇 가지 속성을 소개합니다.

transform-origin: 기본 초기 위치는 이미지의 중앙이며, 100%는 오른쪽 하단과 같습니다. 0%는 0%와 같습니다. 왼쪽 상단.

before 및 :after : 삽입된 콘텐츠는 연결된 대상 요소의 하위 요소이지만 모든 콘텐츠 "앞"에 배치됩니다. 이 요소 또는 "이후". 삽입된 내용은 페이지의 소스코드에서는 보이지 않으며 CSS에서만 볼 수 있습니다. 동시에 삽입된 요소는 기본적으로 인라인 요소입니다. 따라서 삽입된 요소에 높이, 패딩, 여백 등을 제공하려면 일반적으로 블록 수준 요소(display:block)를 명시적으로 정의해야 합니다.
또한 콘텐츠를 삽입할 수 없더라도 콘텐츠를 작성해야 합니다. 콘텐츠가 삽입되지 않은 경우 콘텐츠는 다음과 같이 작성됩니다."";

IE6 IE7은 다음 두 요소와 호환되지 않습니다.

의사 요소(이중 콜론), CSS3의 의사 클래스는 (단일 콜론)

애니메이션이 재생되지 않을 때(애니메이션이 완료될 때 또는 애니메이션이 지연되고 재생이 시작되지 않음) 요소의 스타일에 적용됩니다.

background-image:는 p가 하나의 배경만 설정할 수 있는 문제를 해결하므로 한 p가 여러 배경 이미지를 설정할 수 있습니다.
box-shadow: 자주 잊어버리는 매개변수-확산(확장된 그림자 반경), 한 번 잊어버린 이 확산은 그림자의 크기를 변경합니다---값이 양수인 경우 해당 값은 양수 또는 음수일 수 있습니다. , 전체 그림자가 확장되고 확장됩니다. 그렇지 않으면 음수 값인 경우 축소됩니다. 이 매개변수를 사용하면 box-shadow를 사용하여 Photoshop의 그림자 작업과 같은 단면 그림자 효과를 만들 수 있습니다. 여기서 주목해야 할 점은 이 확장된 그림자 값은 그림자 흐림 반경과 함께 사용해야 한다는 것입니다. 일반적인 상황은 "확장된 그림자 반경은 일반적으로 흐림 반경과 동일하게 설정되며 음수 값입니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바라며, 또한 PHP 중국어 홈페이지를 많은 분들이 응원해주시기를 바랍니다.

더 순수한 CSS3 그리기 가벼운 애니메이션 불꽃 효과 샘플 코드 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.