效果地址:https://codepen.io/flyingliao/pen/NJxbdB?editors=1100

HTML code:

<div class="stars">
  <span></span><span></span>
  <span></span><span></span>
  <span></span><span></span>
  <span></span><span></span>
  <span></span><span></span>
  <span></span><span></span>
  <span></span><span></span>
  <span></span><span></span>
  <span></span><span></span>
  <span></span><span></span>
</div>

CSS code:

html,body{
  margin:;
  padding:;
}
body{
height: 100vh;
background-color: black;
}
.stars{
position: relative;
width: 100%;
height: 100%;
}
.stars span{
display: inline-block;
position: absolute;
width: 5px;
height: 5px;
background-color: white;
transform: rotate(45deg);
/* 使星星模糊一点 */
opacity: 0.2;
/* 动画名称 动画时间 速度 开始时间 次数 */
animation: blinking 1s linear var(--d) infinite;
}
/* blinking : 闪烁 */
@keyframes blinking{
0%,100%{
opacity: 0.2;
}
50%{
/* 星星大小放大 1.5倍 ,旋转45度成菱形 */
transform: scale(1.5) rotate(45deg);
opacity:;
}
}
.stars span:nth-child(1){
top: 10%;
left: 10%;
--d: 10s;
}
.stars span:nth-child(2){
top: 20%;
left: 20%;
--d: 6s;
}
.stars span:nth-child(3){
top: 30%;
left: 30%;
--d: 5s;
}
.stars span:nth-child(4){
top: 10%;
margin-left: 40%;
--d: 4s;
}
.stars span:nth-child(5){
top: 40%;
left: 60%;
--d: 7s;
}
.stars span:nth-child(6){
top: 30%;
left: 80%;
--d: 9s;
}
.stars span:nth-child(7){
top: 40%;
left: 20%;
--d: 8s;
}
.stars span:nth-child(8){
top: 50%;
left: 40%;
--d: 15s;
}
.stars span:nth-child(9){
top: 60%;
left: 70%;
--d: 14s;
}
.stars span:nth-child(10){
top: 80%;
left: 50%;
--d: 11s;
}
.stars span:nth-child(11){
top: 75%;
left: 23%;
--d: 20s;
}
.stars span:nth-child(12){
top: 55%;
left: 4%;
--d: 24s;
}
.stars span:nth-child(13){
top: 36%;
left: 26%;
--d: 8s;
}
.stars span:nth-child(14){
top: 93%;
left: 18%;
--d: 3s;
}
.stars span:nth-child(15){
top: 58%;
left: 68%;
--d: 2.6s;
}
.stars span:nth-child(16){
top: 64%;
left: 86%;
--d: 1.5s;
}
.stars span:nth-child(17){
top: 6%;
left: 78%;
--d: 3.5s;
}
.stars span:nth-child(18){
top: 13%;
left: 58%;
--d: 6s;
}
.stars span:nth-child(19){
top: 50%;
left: 50%;
--d: 8s;
}
.stars span:nth-child(20){
top: 88%;
left: 88%;
--d: 7s;
}

2.HTML+CSS制作一闪一闪亮晶晶的星星(stars)的更多相关文章

  1. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  2. 前端开发css实战:使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  3. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  4. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  5. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQuery & CSS 制作金属质感的选择按钮

    如果能把 CSS 运用好,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一组结合 jQuery & CSS 制作的充满金属质感的选择框效果,绝对是超级精美的效果. 在线演 ...

  7. DIV+CSS制作二级横向弹出菜单,略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  8. 纯CSS制作三角(转)

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  9. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

随机推荐

  1. 代码编辑器之sublime text

    http://www.iplaysoft.com/sublimetext.html 1.特点: 中文乱码问题:另外,很多朋友反映表示打开中文会有乱码,其实是因为ST2本身只支持UTF-8编码,而我们常 ...

  2. excel技巧--多行排成单列

    要将上图的多行排成单列的效果,做法如下: 1.在倒数第二列的下方单元格,写入=号,然后再点击倒数第一列第一个单元格.这样复制该单元格的公式. 2.然后对着这个复制好的单元格的右下角一直往下拖拉,尽量拖 ...

  3. 跟着未名学Office - 高效笔记OneNote

    了解OneNote 2016年12月22日    19:57 OneNote Summary 理解OneNote中的笔记本.分区.页的概念 编写人:未名 感谢秦大: http://www.zloffi ...

  4. 研究js特效巩固JavaScript知识

    400多个JavaScript特效大全,包含全部源代码和详细代码说明,不可多得 JavaScript实现可以完全自由拖拽的效果,带三个范例    http://www.sharejs.com/show ...

  5. Java第01次实验提纲(基本概念+编程环境入门+PTA)

    0. 控制台下编译.运行 在Notepad++编写Java程序 学会使用控制台,javac.java 学会使用Notepad++ 参考资料: 控制台-cmd应用基础 扫盲教程 使用命令行编译并运行ja ...

  6. uoj#209. 【UER #6】票数统计

    http://uoj.ac/problem/209 当x!=y时,这个限制条件是确定的,可以枚举总通过数,用组合数计算,当x==y时,这个限制条件表示前x个全部通过或后x个全部通过,只有最大的x有用, ...

  7. bzoj5020: [THUWC 2017]在美妙的数学王国中畅游

    Description 数学王国中,每个人的智商可以用一个属于 [0,1]的实数表示.数学王国中有 n 个城市,编号从 0 到 n−1 ,这些城市由若干座魔法桥连接.每个城市的中心都有一个魔法球,每个 ...

  8. C语言中的补码与反码(-1的十六进制ffffffff)

    我们先举个例子 1个字节的数字7用二进制表示为  0000 0111,最高位为0(0为正数,1为负数) 反码是将正数的所有位都取反,包括最高位 而负数的二进制表示为补码(反码加1),反码只是过渡阶段 ...

  9. vue之自定义组件

    除了核心功能默认内置的指令外,vue也允许用户注册自定义指令.虽然在vue2.0中,代码复用和抽象的主要形式是组件,但是有些情况下,我们仍需要对普通DOM元素进行底层操作,这个时候就需要用到自定义指令 ...

  10. Bisecting KMeans (二分K均值)算法讲解及实现

    算法原理 由于传统的KMeans算法的聚类结果易受到初始聚类中心点选择的影响,因此在传统的KMeans算法的基础上进行算法改进,对初始中心点选取比较严格,各中心点的距离较远,这就避免了初始聚类中心会选 ...