javascript - 如何将这种无法识别的 CSS 特性转换为 javascript？

Question

我有这个问题，我试图根据时间移动 CSS 图像，但不能使用它，因为它在 CSS 中。特征不是太阳，而是在这个 pen 中可以看到的黄色半圆动画。 .我正在尝试将那个半圆应用到一个完全随机的形状。

例如，如果形状是完全随机的并且在白色 Canvas 上并且中间有一个随机变形的圆圈，那么如何使用与此 pen 中看到的相同的动画填充该圆圈以及如何将该 CSS 转换为 javascript 或如何控制 CSS，因为它必须在设置某些值时停止和移动。

我不希望有人做所有事情，而是当我需要使用那支笔中看到的黄色功能时，我可能会协助我应该从哪里开始。

谢谢。

事情是这样的。

<div class="sunmoon">
    <h2>Sun &amp; Moon</h2>
    <div class="sun-times">
        <div class="sun-path">
            <div class="sun-animation"></div>
        </div>
        <div class="sun-symbol-path"><span class="symbol">☀</span></div>
    </div>
    <div class="legend">
        <div class="sunrise">05:30 AM</div>
        <div class="sunset">8:04 PM</div>
    </div>
    <div class="clear">&nbsp;</div>
</div>

<div class="controls">
  <button class="start">Start</button>
  <button class="reset">Reset</button>
</div>

@import "compass/css3";


$arc-diameter: 170px;

.sunmoon {
    position: relative;
    & > div {
        margin-left: 10px
    }
}


.sun-times {
    margin-top: 40px;
    width: 230px;
    height: 60px;
    border-bottom: 1px solid #999;
    overflow-y: hidden;

    .sun-path {
        margin-left: 25px;
        width: $arc-diameter;
        height: $arc-diameter;
        overflow: hidden;
        border: 1px dashed #999;
        border-radius: 50%;
    }

    .sun-symbol-path {
        position: absolute;
        color: yellow;
        text-shadow: 0 0 5px black;
        height: $arc-diameter / 2;
        -webkit-transition: -webkit-transform 2s linear;
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: rotateZ(-75deg);
        left: ($arc-diameter / 2) + 25px;
        bottom: 0;

        .symbol {
            position: relative;
            font-size: 16px;
            top: -8px;
        }
    } 

    .sun-animation {
        width: 0px;
        height: 150px;
        background-color: rgba(255, 255, 0, 0.4);
        -webkit-transition: width 2s linear;
        transition: width 2s linear;
    }
}


.legend {
    position: absolute;
    bottom: 1em;

    & > div {
        position: absolute;
        font-size: 12px;
        width: 80px;
    }

    .sunrise {
        left: 15px;
    }

    .sunset {
        left: 185px;
    }
}

body {
  background-image: url(foo);
  background-color: #ccc;
  font-family: Helvetica, Sans serif;
  h2 {
    font-size: 20px;
  }
}

.controls {
  margin-top: 50px;
}




$('.start').click(function () {
    $('.sunmoon .sun-animation').css('width', '70%');
    $('.sun-symbol-path').css('-webkit-transform', 'rotateZ(27deg)');
        // TODO: mention that this isn't nice
        // city.find('.sunmoon .sun-animation').css('-webkit-transform',    'scaleX(50)');
    return false;
});

$('.reset').click(function () {
    $('.sun-animation').css('width', '0%');
    $('.sun-symbol-path').css('-webkit-transform', 'rotateZ(-75deg)');
    return false;
});

Answer 1

您可以在 Illustrator 中创建一个形状，内部透明，外部颜色为您想要的颜色，然后设置另一个框(使用新颜色，在本例中为黄色，形状宽度相同)，在该形状下方(例如使用 z-index)和 position:absolute 和 left:-100%，以及 onClick，开始和停止过渡向右。

我会推荐你​​使用 GSAP TimeLineMax .它允许您使用其功能播放和停止过渡，例如:

    //off course after document load.
    let animation = new TimelineMax();
    animation
     .to(
          ".underneath-box", //box class
          10, //seconds
          { 
            left:"100%", //100% of the width
            ease: Power4.easeInOut //ease effect.
          });

    animation.pause(); //To prevent start.

    $('start-button').click(function(){ //on start button click
        animation.play().timeScale(1); //start animation
    });


    $('reset-button').click(function(){ //on reset button click
        animation.reverse().timeScale(2); //reverse the entire animation
    });

我假设您了解一些 Html 和 css 基础知识。不要忘记用它的类创建那些 div 和按钮。干杯。