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

效果图:

HTML code:

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

CSS code:

html,body{
margin:;
padding:;
}
*{
/* 设置所有元素的width、height包括其内边距、边框、内容 */
box-sizing: border-box;
}
body{
height: 100vh;
/* border: 1px solid white; */
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
/* 设置sky的样式 */
.sky{
position: relative;
width: 80vh;
height: 80vh;
/* border: 3px solid white; */
/* 设置span水平垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 溢出隐藏 */
overflow: hidden;
}
.sky span{
position: relative;
display: inline-block;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: white;
/* transform-origin: right; */
animation: across 1s linear infinite;
}
@keyframes across{
to{
margin-top: 100vh;
margin-left: 100vh;
}
}
/* 利用伪元素::before加尾巴 */
.sky span::before{
content:'';
width: 60px;
border: 0.5px solid white;
border-radius: 50% 0 0 50%;
position: absolute;
top: 1px;
left: -60px;
/* 设置尾巴以右为旋转定点 */
transform-origin: right;
/* 设置尾巴线的方向与移动方向一致 */
transform: rotate(45deg);
}

5.1HTML+CSS制作一颗流星的更多相关文章

  1. 5.HTML+CSS制作一颗流星

    效果地址:https://codepen.io/flyingliao/pen/pBzKbZ HTML code: <div class="sky"> <span& ...

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

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

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

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

  4. CSS制作三角形和按钮

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. tornado--启动

    tornado--启动 from tornado import web from tornado import ioloop from tornado.httpserver import HTTPSe ...

  2. calcOpticalFlowPyrLK

    void calcOpticalFlowPyrLK( InputArray prevImg, InputArray nextImg,                                   ...

  3. react安装

    1. npm install -g create-react-app 2. create-react-app my-app 3. cd my-app npm start 4.浏览器打开  http:/ ...

  4. 为什么要用docker

    一:更高效的利用系统资源            由于容器不需要进行硬件虚拟以及运行完整操作系统等额外开销,Docker 对系统资源的利用率更高.无论是应用执行速度.内存损耗或者文件存储速度,都要比传统 ...

  5. MySQL出现too many connections(1040)错误解决方法

    https://www.cnblogs.com/2881064178dinfeng/p/6938112.html 其实MySQL默认的最大连接数为100,可能在大访问量的时候造成了连接不上数据库.解决 ...

  6. Eclipse 中快捷键

    Ctrl + Shift + T   查看原生类定义

  7. QCAD 修改默认的线宽

    QCAD 修改默认的线宽 默认的宽度实在是太宽了,把一些细节给掩盖了. 可以按以下方法找到修改默认宽度. 在 Layer -> Edit Layer 中. 最开始找了好久好久. 最开始在这里找了 ...

  8. KiCad EDA 原理图库的最佳实践

    KiCad EDA 原理图库的最佳实践 由于有 Alias 别名元件,可以不用一个每一个元件都有一个元件. 对每种元件类型建议一个元件库. 因为 Value 和 元件名是一样的,所以元件名要尽可能的简 ...

  9. Zabbix server的配置文件没有真正生效

    现状 Zabbix server端迁移之后,一直卡,卡的不行的卡,一直以为是网络的原因,实在忍受不下去了,还是得排查排查   在界面上一直显示这条,但是我的zabbix_server确实是启动的,但是 ...

  10. [转]Centos 7 安装部署 GitLab 服务器

    Centos 7 安装部署 GitLab 服务器 转自:https://www.jianshu.com/p/79bfded68899 文前说明 作为码农中的一员,需要不断的学习,我工作之余将一些分析总 ...