我是靠谱客的博主 迷人蜻蜓,最近开发中收集的这篇文章主要介绍CSS3如何实现流星雨效果?(代码示例),觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

本篇文章给大家通过代码示例介绍一下使用CSS3如何实现流星雨效果。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

【推荐教程:CSS视频教程】

说明:正文只讲述单个流星雨的实现方式,多个的效果只需要对单个的动画起始点、宽度稍加修改即可,具体示例见文末 github 地址。

难度系数

☆☆☆☆☆

效果图

思路

流星雨的实现分为三部分:

(1)用 border 属性实现直角三角形。三角形的实现可以参考 CSS绘制三角形

(2)给直角三角形添加圆形效果,弱化直角形状的棱角

(3)添加动画效果,让直角三角形动起来

HTML

<span class="shooting-star animation"></span>
登录后复制

解析:

  • html 添加一个动画容器即可

CSS

.shooting-star {
    margin: 30px;
    display: block;
    width: 0;
    border-radius: 2px;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: transparent;
    border-left-width: 230px;
    border-left-style: solid;
    border-left-color: white;
    border-right-width: 230px;
    border-right-style: solid;
    border-right-color: transparent;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: white;
}
.animation {
    animation: fly 3s infinite;
}
@keyframes fly {
    from {
        margin-left: 900px;
        border-left-width: 130px;
        border-right-width: 130px;
    }
    to {
        margin-left: -900px;
        border-left-width: 360px;
        border-right-width: 360px;
    }
}
登录后复制

解析:

  • 直角三角形
    • 直角三角形的实现,首先确定直角的方位,本例直角方位为左下角,因此设置左边框和下边框为有颜色的,右边框和上边框为透明色
    • 流星类似一条线的形状,所以直角三角形高度很小,宽度很大。因此此处设置左右边框宽度值很大,上下边框宽度值很小
    • 类似 span 这样 display 默认属性值不为 block 的元素,需要设置 display 属性为 block
  • 圆形效果
    • 通过 border-radius 设置圆形 border 即可,border-radius 的值与直角三角形高度相同即可(注意高度值应为 border-top-width 和 border-bottom-width 数值之和)
  • 动画效果
    • 通过 margin-left 设置动画初始和结束位置
    • 通过改变 border-*-width 的值达到流星长度变化的效果
    • 动画时长决定流星通过界面的时间
    • 动画次数设置为无限次

知识点

  • CSS 实现三角形
  • 圆角 border
  • animation 添加动画效果
  • @keyframes 自定义动画

Gitbub 源码:

https://github.com/nanzhangren/CSS_skills/blob/master/shooting_star/shooting_star.html

最后

以上就是迷人蜻蜓为你收集整理的CSS3如何实现流星雨效果?(代码示例)的全部内容,希望文章能够帮你解决CSS3如何实现流星雨效果?(代码示例)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(122)

评论列表共有 0 条评论

立即
投稿
返回
顶部