统计
  • 建站日期:2021-03-10
  • 文章总数:275 篇
  • 评论总数:115 条
  • 分类总数:21 个
  • 最后更新:9月4日
文章 技术代码

彩色圆点气泡跟随 鼠标光标动画特效

小椿
首页 技术代码 正文

效果图如下:
泡泡会根据鼠标的移动在鼠标下方会生成泡泡 然后缓缓上升。
可以父子以下代码看一下实际效果。
1、下面是HTML结构
HTML结构很简单,主要是靠css和一点js去实现

<body>
    <div>
        光标移动查看
    </div>
    <!-- <span></span> -->
    <script src="script.js" ></script>
</body>

2、下面是css代码

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #55b9f3;
  overflow: hidden;
}

div {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 50px;
  font-family: "楷体";
}

span {
  width: 50px;
  height: 50px;
  background: #55b9f3;
  border-radius: 50%;
  position: absolute;
  box-shadow: 20px 20px 60px #489dcf, -20px -20px 60px #62d5ff;
  animation: blow 4s linear infinite;
  -webkit-animation: blow 4s linear infinite;
}
/*这里是定义里一个动画效果*/

@keyframes blow {
  0% {
    transform: translate(-50%, -50%);
    /*这里是定义初始透明度为1*/
    opacity: 1;
    /*
    这里是初始滤镜效果
    给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。
    值为0deg,则图像无变化。若值未设置,默认值是0deg。
    该值虽然没有最大值,超过360deg的值相当于又绕一圈。
    */
    filter: hue-rotate(0deg);
    /*这里是浏览器兼容*/
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
  }

  100% {
    /*
    2D转化
    这里是从自身向上平移
    */
    transform: translate(-50%, -1000%);
    /*这里是定义结束时透明度为0*/
    opacity: 0;
    /*
    这里是结束滤镜效果
    给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。
    值为0deg,则图像无变化。若值未设置,默认值是0deg。
    该值虽然没有最大值,超过360deg的值相当于又绕一圈。
    */
    filter: hue-rotate(720deg);
    /*这里是浏览器兼容*/
    -webkit-transform: translate(-50%, -1000%);
    -moz-transform: translate(-50%, -1000%);
    -ms-transform: translate(-50%, -1000%);
    -o-transform: translate(-50%, -1000%);
    -webkit-filter: hue-rotate(720deg);
  }
}

3、下面是js的相关代码

/*这里是给整个页面添加了一个鼠标移动的监听事件 e为事件对象*/
document.addEventListener(`mousemove`, function (e) {
    /*这里获取元素节点*/
    let oBody = document.body;
    let oSpan = document.createElement(`span`);
    /*浏览器兼容*/
    e = e || window.Event;
    // let x = e.clientX;
    // let y = e.clientY;
    /*获取相关参数*/
    oSpan.style.left = e.clientX + `px`;
    oSpan.style.top = e.clientY + `px`;
    /*设定随机数存储在size中*/
    let size = Math.random() * 120;
    /*给节点赋值参数数值*/
    oSpan.style.width = 30 + size + `px`;
    oSpan.style.height = 30 + size + `px`;
    /*在body中添加span标签*/
    oBody.appendChild(oSpan);
    /*设置定时器 间隔时间为2000毫秒*/
    setTimeout(function () {
    /*清除ospan节点*/
        oSpan.remove();
    }, 2000);
});

彩色圆点气泡跟随 鼠标光标动画特效

来源:诚通网盘|   密码:9092|   大小:|   下载次数:10次

版权声明 1 本站名称:乡野风情
2 本站网址:http://www.t35.cn/
3 本文网址:http://www.t35.cn/jsdm/258.html
4 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ:550966987进行删除处理。
5 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
6 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
7 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
-- 展开阅读全文 --
简单HTML+CSS+JS写出烟花效果
« 上一篇
侧面增加躲猫猫代码
下一篇 »

发表评论