찾다

집  >  기사  >  웹 프론트엔드  >  제어 가능한 속도 CSS3 회전 풍차 특수 효과

제어 가능한 속도 CSS3 회전 풍차 특수 효과

高洛峰
高洛峰원래의
2017-02-23 10:44:122694검색

과거에는 웹 페이지 애니메이션을 만드는 데 일반적으로 JavaScript가 사용되었습니다. 이제 순수 CSS를 사용하여 애니메이션을 구현하는 경우가 늘어나고 CSS3를 사용하여 애니메이션 제어도 구현할 수 있습니다. 정말 강력합니다. 다음은 순전히 CSS3로 만든 풍차 회전 애니메이션이며, 속도 조절도 CSS3를 사용합니다.

경험 효과:
http://hovertree.com/texiao/css3/40/

렌더링:
可控制转速CSS3旋转风车特效

보시다시피 풍차의 날개는 삼각형 모양입니다. CSS를 사용하여 다양한 그래픽을 그리려면
http://hovertree.com/h/bjaf/jtkqnsc1.htm

http://hovertree.com/h/bjaf/ltgc20vn.htm

CSS 애니메이션은 애니메이션 속성을 사용합니다.

http:/ /hovertree.com/h/bjaf/i309b77d.htm

http://hovertree.com/h/bjaf/fwck53gt.htm

http://hovertree.com/h/bjaf/xpxgjfap.htm

http://hovertree.com/h/bjaf/kqud99m6.htm

팬 블레이드의 회전은 변환 속성을 사용합니다. 참조:

http://hovertree.com/h/bjaf/c3bshswk.htm

http:// hovertree.com/h/bjaf/lxsexx3m.htm

이 예에서는 CSS 3 선택기 n번째 유형을 사용합니다. 참조:

http:/ /hovertree.com /h/bjaf/c2c0k0tf.htm
이 예제의 코드는 다음과 같습니다. 

<!DOCTYPE html><html lang="zh-CN">
<head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>可控制转速CSS3旋转风车特效 - 何问起</title>
<link rel="stylesheet" href="http://hovertree.com/texiao/css3/40/style/hovertreespin.css">
</head><body><p class="wrapper">
    <p class="pin-layout">
        <a href="#" class="control">暂停</a>
        <a href="#" class="control">旋转</a>
        <a href="#" class="control">中速</a>
        <a href="#" class="control">高速</a>
        <p class="pillar">
            <p class="dot"></p>
            <span class="item1"></span>
            <span class="item2"></span>
            <span class="item3"></span>
            <span class="item4"></span>
        </p>
    </p>
    <p><b>何问起温馨小提示：</b>暂停后点击页面任何区域都可自动旋转哦!</p></p><!-- end wrapper --><p style="text-align:center;margin:100px 0; font:normal 14px/24px &#39;MicroSoft YaHei&#39;;"><p>适用于支持CSS3的浏览器。</p><p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/h/bjag/efqb2w4s.htm" target="_blank">说明</a></p></p></body></html>


CSS 파일 코드: 

*{margin:0; padding:0;}body{background:#eee;width:100%; height:100%;}.wrapper{
    position: relative;
    width: 800px;
    height:450px;
    margin:60px auto 0;
}.wrapper .pin-layout{
    position: absolute;
    bottom: 0;
    left: calc(50% - 20px);
    width:40px;
    height:280px;
}.wrapper .pin-layout::after{
    position:absolute;
    bottom:0;
    left: calc(50% - 20px);
    content:"";
    height:0;
    width:10px;
    border-width: 0px 15px 280px 15px;
    border-style:solid;
    border-color:transparent transparent #6B3500 transparent;
}.wrapper .pin-layout .pillar{
    position: absolute;
    top: -18px;
    left: calc(50% - 18px);
    width:36px;
    height:36px;
    z-index: 9;
    transform: rotateZ(45deg);
    transition:all .9s linear;
    animation: hovertreespin 3s linear 0s infinite;
}.pin-layout .control:hover::after{
    position: absolute;
    left: 0;
    content: "";
    width: 100%;
    height:100%;
    background: rgba(0,0,0,.3);
}.pin-layout .control{
    position: absolute;
    bottom:0;
    width: 80px;
    height:30px;
    line-height:30px;
    border: 1px solid #ADADAD;
    border-radius: 4px;
    text-align:center;
    text-decoration:none;
    letter-spacing:2px;
    color: white;
    background: red;
}.pin-layout .control:nth-of-type(1){
    left: -100px;
}.pin-layout .control:nth-of-type(3):focus ~ .pillar{
    animation-duration:.8s;
}.pin-layout .control:nth-of-type(4):focus ~ .pillar{
    animation-duration:.2s;
}.pin-layout .control:nth-of-type(2){
    right: -100px;
    background: green;
}.pin-layout .control:nth-of-type(3){
    bottom: -40px;
    left: -100px;
    background: #037862;
}.pin-layout .control:nth-of-type(4){
    bottom: -40px;
    right: -100px;
    background: #036B3E;
}.pin-layout .control:nth-of-type(1):focus ~ .pillar{
    animation-play-state:paused;
}.pin-layout .control:nth-of-type(2):focus ~ .pillar{
    animation-play-state:running;
}
 .pin-layout .pillar span[class^="item"]{
    position: absolute;
     top: calc(-200px + 18px);
    left: 18px;
    border-width:0px 80px 200px 0px;
    border-style:solid;
 }
 .pin-layout .pillar span[class^="item"]:nth-of-type(1){
    z-index:1;
    border-color:transparent transparent dodgerblue transparent;    /*border-color:green red gray blue;*/}
 .pin-layout .pillar span[class^="item"]:nth-of-type(2){
    z-index:2;
    border-color:transparent transparent orangered transparent;
    transform-origin:left bottom;
    transform: rotateZ(90deg);
}
 .pin-layout .pillar span[class^="item"]:nth-of-type(3){
    z-index:3;
    border-color:transparent transparent greenyellow transparent;
    transform-origin:left bottom;
    transform: rotateZ(180deg);
}
 .pin-layout .pillar span[class^="item"]:nth-of-type(4){
    z-index:4;
    border-color:transparent transparent mediumpurple transparent;
    transform-origin:left bottom;
    transform: rotateZ(270deg);
}.wrapper .pin-layout .pillar .dot{
    position: absolute;
    top: 0;
    left: 0;
    border-width: 19px;
    border-style: solid;
    border-color: #3C0505 transparent #3C0505 transparent;
    border-radius:50%;
    background:#F505EE;
    z-index:1999;
    box-shadow:0 0 2px #1A0505;
}@keyframes hovertreespin {
    0%{
        transform: rotate(0deg)    }
    100%{
        transform:rotate(360deg);
    }}


이미지 팬 블레이드를 사용한 풍차:

http:// hovertree.com/ h/bjaf/h9tb5itb.htm
특수 효과 컬렉션:

http://www.cnblogs.com/roucheng/p/texiao.html

더욱 제어 가능한 속도 CSS3 회전 풍차 특수 효과를 보려면 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!

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

관련 기사

더보기