Question

我有JavaScript和Sass-CSS这个动画：

＆＃13;

var field = document.querySelector('.field');
var starCount = 1000;

function addStar(parent, maxX, maxY) {
  var x = Math.floor(Math.random() * (maxX + 1));
  var y = Math.floor(Math.random() * (maxY + 1));
  var randomNumber = Math.random();
  
  var star = document.createElement('div');
  var starTop = document.createElement('div');
  var starBottom = document.createElement('div');
  var styleValue = 'left: ' + x + 'px; top: ' + y + 'px;';
  var starKind = '';
  //debugger;
  if (randomNumber < 0.25) {
    starKind = 'large-star';
  } else if (randomNumber < 0.5) {
    starKind = 'medium-star';
  } else if (randomNumber < 0.75) {
    starKind = 'small-star';
  } else {
    starKind = 'tiny-star';
  }
  
  starTop.classList.add(starKind + '-top');
  starBottom.classList.add(starKind + '-bottom');
  
  star.appendChild(starTop);
  star.appendChild(starBottom);
    
  star.setAttribute('style', styleValue);
  star.classList.add('star');
  star.classList.add(starKind);
  
  parent.appendChild(star);
  
  return star;
}

for (let i = 0; i < starCount; i++) {
  addStar(field, 4000, 400);
}

＆＃13;

* {
  padding: 0;
  border: 0;
  margin: 0; }

body {
  background-color: black; }

.wrap {
  width: 100%;
  max-width: 800px;
  height: 200px;
  margin: 50px auto;
  overflow: hidden;
  border: 2px solid white;
  border-radius: 50%;
  line-height: 0;
  padding: 0 20px; }

.field {
  height: 200px;
  position: relative;
  background-color: #000000;
  animation: moveGlass 50s ease-in infinite alternate;
  display: inline-block; }

.star {
  background-color: white;
  opacity: 1.0;
  position: absolute;
  animation: rotateStar 2s infinite alternate; }

.star .large-star-top:before {
  left: -5px;
  top: -5px; }

.star .large-star-top:after {
  right: -5px;
  top: -5px; }

.star .large-star-bottom:before {
  left: -5px;
  bottom: -5px; }

.star .large-star-bottom:after {
  right: -5px;
  bottom: -5px; }

.star .large-star-top:before, .star .large-star-top:after,
.star .large-star-bottom:before, .star .large-star-bottom:after {
  content: "";
  position: absolute;
  background-color: black;
  width: 10px;
  height: 10px;
  border-radius: 50%; }

.star .medium-star-top:before {
  left: -4px;
  top: -4px; }

.star .medium-star-top:after {
  right: -4px;
  top: -4px; }

.star .medium-star-bottom:before {
  left: -4px;
  bottom: -4px; }

.star .medium-star-bottom:after {
  right: -4px;
  bottom: -4px; }

.star .medium-star-top:before, .star .medium-star-top:after,
.star .medium-star-bottom:before, .star .medium-star-bottom:after {
  content: "";
  position: absolute;
  background-color: black;
  width: 8px;
  height: 8px;
  border-radius: 50%; }

.star .small-star-top:before {
  left: -3px;
  top: -3px; }

.star .small-star-top:after {
  right: -3px;
  top: -3px; }

.star .small-star-bottom:before {
  left: -3px;
  bottom: -3px; }

.star .small-star-bottom:after {
  right: -3px;
  bottom: -3px; }

.star .small-star-top:before, .star .small-star-top:after,
.star .small-star-bottom:before, .star .small-star-bottom:after {
  content: "";
  position: absolute;
  background-color: black;
  width: 6px;
  height: 6px;
  border-radius: 50%; }

.star .tiny-star-top:before {
  left: -2px;
  top: -2px; }

.star .tiny-star-top:after {
  right: -2px;
  top: -2px; }

.star .tiny-star-bottom:before {
  left: -2px;
  bottom: -2px; }

.star .tiny-star-bottom:after {
  right: -2px;
  bottom: -2px; }

.star .tiny-star-top:before, .star .tiny-star-top:after,
.star .tiny-star-bottom:before, .star .tiny-star-bottom:after {
  content: "";
  position: absolute;
  background-color: black;
  width: 4px;
  height: 4px;
  border-radius: 50%; }

.star.large-star {
  width: 10px;
  height: 10px; }

.star.medium-star {
  width: 8px;
  height: 8px; }

.star.small-star {
  width: 6px;
  height: 6px; }

.star.tiny-star {
  width: 4px;
  height: 4px; }

@keyframes rotateStar {
  0% {
    transform: rotate(0deg);
    opacity: 0.09; }
  10% {
    transform: rotate(36deg);
    opacity: 0.18; }
  20% {
    transform: rotate(72deg);
    opacity: 0.27; }
  30% {
    transform: rotate(108deg);
    opacity: 0.36; }
  40% {
    transform: rotate(144deg);
    opacity: 0.45; }
  50% {
    transform: rotate(180eg);
    opacity: 0.54; }
  60% {
    transform: rotate(216deg);
    opacity: 0.63; }
  70% {
    transform: rotate(248deg);
    opacity: 0.72; }
  80% {
    transform: rotate(284deg);
    opacity: 0.81; }
  90% {
    transform: rotate(320deg);
    opacity: 0.9; }
  100% {
    transform: rotate(356deg);
    opacity: 1.0; } }
@keyframes moveGlass {
  100% {
    margin-left: -3200px; } }

＆＃13;

<div class="wrap">
  <div class="field"></div>
</div>

＆＃13;

我使用border-radius和50％得到椭圆＆＃34;窗口＆＃34;。

我希望带有动画星星的功能区在椭圆窗口之后移动。

如何达到预期效果？

可以看到元素在通常由矩形div覆盖的区域上移动。但要素应该保持＆＃34;在窗口内。所以我定义了一个＆溢出：隐藏＆＃39;在父元素上。

Animation on Google Chrome

在这些原型上（需要稍微加载来自服务的图像），它运行得非常好： http://codepen.io/mizech/pen/gwokqv

我对星星动画有什么不对？为什么＆溢出：隐藏＆＃39;不工作？

CSS：如何使溢出：隐藏＆＃39;与＆border-radius：50％＆＃39;一起工作

0 个答案: