效果地址: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. Python进行RSA安装加密

    一.下载ez_setup.py(http://peak.telecommunity.com/dist/ez_setup.py) 二.用python解释执行它 (如使用IDLE打开该py文件,按F5解释 ...

  2. webGL之three.js入门1

    开场白 最近开始学前端,看了极客学院的前端教学视频,其实有C++或者java基础的人学前端还是很快的.但是html的标签和CSS的样式还是得多code才能熟练,熟能生巧,学以致用. 还在看js,因为有 ...

  3. 两招解决异常_Cannot find any information on property 'XXX' in a bean of type 'XXX'的问题

    第一招 在进行Java Web项目开发的时候,我碰到过下面这个异常: Cannot find any information on property 'XXX' in a bean of type ' ...

  4. LaTex与数学公式

    w(t) \longrightarrow \bigg[\frac{\sqrt{2\sigma ^2\beta}}{s+\beta}\bigg]  \longrightarrow \bigg[\frac ...

  5. IDEA创建一个Mybatis逆向工程

    Mybatis逆向工程简介: MyBatis Generator (MBG) 是一个Mybatis的代码生成器 MyBatis 和 iBATIS. 他可以生成Mybatis各个版本的代码,和iBATI ...

  6. PREV-9_蓝桥杯_大臣的旅费

    问题描述 很久以前,T王国空前繁荣.为了更好地管理国家,王国修建了大量的快速路,用于连接首都和王国内的各大城市. 为节省经费,T国的大臣们经过思考,制定了一套优秀的修建方案,使得任何一个大城市都能从首 ...

  7. 2、以自定义struct或struct指针作为map的Key

    若干问题: struct Node { int k, b; friend bool operator <(Node a, Node b) { return a.k < b.k; } }no ...

  8. Java 基础面试题

    1.一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制? 可以有多个类,但只能有一个public的类,并且public的类名必须与文件名一致 2.Java有没有 ...

  9. docker私库harbor的搭建

    1.文件下载 # wget https://storage.googleapis.com/harbor-releases/harbor-online-installer-v1.5.1.tgz 安装官网 ...

  10. [UE4]增加开枪冷却时间, Get Time Seconds

    Get Time Seconds:游戏开始到现在过去了多少秒