效果地址: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. ABP安装,应用及二次开发视频

    CSDN课程:http://edu.csdn.net/lecturer/944

  2. 使用CNN生成图像先验,实现更广泛场景的盲图像去模糊

    现有的最优方法在文本.人脸以及低光照图像上的盲图像去模糊效果并不佳,主要受限于图像先验的手工设计属性.本文研究者将图像先验表示为二值分类器,训练 CNN 来分类模糊和清晰图像.实验表明,该图像先验比目 ...

  3. 链路聚合trunk实现

    用户需求 1,在原有网络基础上实现用户接入Internet 2,监控摄像头不改变原有功能 配置思路 1,首先确定接入交换机是否为管理型交换机 2, 确认接入交换机管理IP 3,划分Vlan  创建tr ...

  4. Go 包管理工具--glide

    网上有一篇解释glide比较好的文章:https://my.oschina.net/u/553243/blog/1475626 在命令行中输入glide $glide NAME: glide - Ve ...

  5. Assembly Experiment3

    AIMS & PREPARATIONS of THIS EXPERIMENT: 1st point of this experiment: realize the programme t1.a ...

  6. PythonStudy——nonlocal关键字

    # 作用:将局部的变量提升为嵌套局部变量# 1.必须有同名嵌套局部变量,就是统一嵌套局部与局部的同名变量# -- 如果局部想改变嵌套局部变量的值(发生地址的变化),可以用nonlocal声明该变量 d ...

  7. java8_api_格式化数据

    格式化数据1    Locale类    格式化日期时间    格式化数字        Locale类,主要是国际化相关        该类代表语言环境        实例化:           ...

  8. Vue 错误记录:Cannot read property 'beforeRouteEnter' of undefined

    点击某路由链接,页面提示: Cannot read property 'beforeRouteEnter' of undefined 查看代码并无手写beforeRouterEnter设置, 把页面内 ...

  9. 关于mysql 的 autoCommit 参数

    首先描述一下这个参数的作用. 这个参数 默认是开启的. 开启以后再命令敲的sql 会自动提交.如果关闭,就必须手动 commit. 查看 这个 自动提交状态. SELECT @@autocommit; ...

  10. OpenStack控制节点上搭建Q版nova服务(step5)

    placement组件监听的端口号是:8778 nova组件监听的端口号是:6080.8774.8775 其中6080端口号是novncproxy监听的端口号. 1.安装服务组件 yum instal ...