JavaScript篇---星空背景（有很多小细节和小知识点）

最新推荐文章于 2023-07-03 17:21:56 发布

枫叶在夏天

最新推荐文章于 2023-07-03 17:21:56 发布

阅读量493

点赞数

文章标签： javascript css css3

本文链接：https://blog.csdn.net/weixin_44552302/article/details/103934815

版权

先来看一下效果吧
星星闪耀，大小不一；鼠标hover时会放大旋转
在这里插入图片描述
只需要一张静态的星星图片，就可以通过JS和CSS结合实现这样的效果
虽然有些细节，但还是比较简单的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            background-color: black;
            overflow: hidden;
        }
        span{
            display: inline-block;
            width: 30px;
            height: 30px;
            background: url("star.png") no-repeat;
            -webkit-background-size:100% 100%;
            background-size:100% 100%;
            /*定位，这样后面JavaScript里才能用style.top和style.left来确定星星的位置*/
            position: absolute;
            /*动画，名字叫acti

最低0.47元/天解锁文章

枫叶在夏天

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript篇---星空背景（有很多小细节和小知识点）

先来看一下效果吧星星闪耀，大小不一；鼠标hover时会放大旋转只需要一张静态的星星图片，就可以通过JS和CSS结合实现这样的效果虽然有些细节，但还是比较简单的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title&lt...
复制链接

扫一扫