如何使用腾讯云建网站,WordPress瀑布流图片站,建设局网站管理办法,网站建设360元起全包【今日文章】#xff1a;如何用css 实现星空效果 需求实现tips: 需求 用CSS 实现星空效果的需求#xff1a; 屏幕上有“星星”#xff0c;且向上移动。移动的时候#xff0c;动画效果要连贯#xff0c;不能出现闪一下的样子。 实现 这里我们需要知道#xff0c;“星星”是… 【今日文章】如何用css 实现星空效果 需求实现tips: 需求 用CSS 实现星空效果的需求 屏幕上有“星星”且向上移动。移动的时候动画效果要连贯不能出现闪一下的样子。 实现 这里我们需要知道“星星”是怎么产生的。 通过box-shaow: xxx, xxx, xxx, xxx; 就能产生多个阴影这些阴影也就是我们需要的星星。 其次是星星的动画是怎么做的 星星向上移动且移动完成以后没有“闪”一下的效果。这是常见的动画上面的需求我们通常的做法就是复制一份一样的“星星”出来。上面的原来的div动画结束以后接着显示下面的“星星”。 html
bodydiv classstar idstar/divdiv classcenterFont 星空效果 /div
/body
/htmlstyle
html{height:100%;background: radial-gradient(circle at 7.2% 13.6%, rgb(37, 249, 245) 0%, rgb(8, 70, 218) 90%);overflow:hidden
}/*目的是让元素平铺页面 position:absolute;left:0;right:0;让元素中的东西居中text-align:center;*/
.centerFont{position:absolute;top:50%;left:0;right:0;color:#fff;text-align:center;font-size:50px;margin-top:-25px;
}/*1. 通过box-shadow中写多个偏移的阴影就能形成星空效果。 */
.star{position:fixed;width:10px;height:10px;border-radius:50%;background:red;left:0;right:0;box-shadow:90vh 90vh #fff, 60vh 70vh #fff, 70vh 14vh #fff, 60vh 13vh #fff, 20vh 12vh #fff, 80vh 10vh #fff, 15vh 15vh #fff , 15vh 15vh #fff, 20vh 20vh #fff;animation: moveup 100s;
}/*3. 写一个子元素复制star 当动画结束的时候展示一模一样的子元素。不会出现动画“闪”一下的效果。 */
.star::after{content:;position:fixed;background:red;left:0;right:0;top:100vh;/* 这是重点 */border-radius:inherit; /* 继承父元素 */box-shadow:inherit;width:inherit; height:inherit;
}/*2. 星空是需要移动的那怎样的动画效果才合理呢首先第一步是整个星空向上移动100vh。这个时候移动100vh以后下面没东西了。最合理的解决方案是 复制 一份出来。*/
keyframes moveup{100%{transform:translateY(-100vh)}
}/styletips: 父亲display:flex子元素margin:auto。 这个时候能上下左右居中的原理是margin:auto能填满子元素到父元素上下左右的距离。 如果是margin-left:auto那是子元素填满子元素左侧到父元素的距离。
