css3+javaScript实现一个左右钟摆-摇晃的红灯笼网页特效

css3+javaScript实现一个左右钟摆-摇晃的红灯笼网页特效!前天逛博客时无意中看见了,别人的博客顶部有一个会左右钟摆的摇晃的红灯笼,产生了想法,我也想给自己做一个,但是网上找了很多方案,都没有实现。终于在昨天晚上搜索,找到了利用css3和js一起组合的技术,实现了这个效果。代码很简单。下面上代码分享。


如图所示,这是一个静态的截图。实际上是可以看效果的。

我的网站展示地址是:www.gxlda.com


<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>置顶图层</title><link href="./yao.css" rel="stylesheet"></head>
<body><!-- 此处省略网页内容 --><div class="top-layer"><img src="../assets/images/deng1.png" alt="denglong2" class="image shake" id="d1"><img src="../assets/images/deng1.png" alt="denglong2" class="image shake" id="d2"></div><!-- 此处省略网页内容 -->
</body>
<script src="./dongtu.js"></script>
</html>

这个index.html里面的代码。下面给大家看看css和js2个内容。

.top-layer {position: fixed; /* 设置为fixed */top: 0; /* 控制图层与顶部边界的间距 */left: 0; /* 控制图层与左侧边界的间距 */width: 100%; /* 根据需求设置图层的宽度 */height:250px; /* 根据需求设置图层的高度 */background-color: transparent;z-index: 9999; /* 设置图层的z-index值,确保其处于最上层 */
}
.shake {
animation: shake 5s linear  infinite;
/* -webkit-animation: shake 5s linear infinite; */
}@keyframes shake {
0%{transform: rotate(0deg);transform-origin:50% 0}
8%{transform:rotate(4deg);transform-origin:50% 0}
12%{transform:rotate(6deg);transform-origin:50% 0}
18%{transform:rotate(8deg);transform-origin:50% 0}
22%{transform:rotate(10deg);transform-origin:50% 0}
28%{transform:rotate(8deg);transform-origin:50% 0}
32% {transform: rotate(6deg);transform-origin:50% 0}
38% {transform: rotate(4deg);transform-origin:50% 0}
42% {transform: rotate(2deg);transform-origin:50% 0}
48% {transform: rotate(0deg);transform-origin:50% 0}
55% {transform: rotate(-2deg);transform-origin:50% 0}
62% {transform: rotate(-4deg);transform-origin:50% 0}
72% {transform: rotate(-6deg);transform-origin:50% 0}
78% {transform: rotate(-8deg);transform-origin:50% 0}
80% {transform: rotate(-10deg);transform-origin:50% 0}
85% {transform: rotate(-8deg);transform-origin:50% 0}
90% {transform: rotate(-6deg);transform-origin:50% 0}
94% {transform: rotate(-4deg);transform-origin:50% 0}
96% {transform: rotate(-2deg);transform-origin:50% 0}
100% {transform: rotate(0deg);transform-origin:50% 0}
}

这个是css文件里面的内容。我故意把周期设计的步进很缓慢,看起来晃动的时候会比较柔和一点。

// JavaScript代码
var image = document.getElementById("d1");
image.style.position = "absolute"; // 将图片定位到绝对位置
image.style.top = "0px"; // 距顶部50像素
image.style.left = "200px"; // 距左侧200像素
//d2
var image2 = document.getElementById("d2");
image2.style.position = "absolute"; // 将图片定位到绝对位置
image2.style.top = "0px"; // 距顶部50像素
image2.style.right = "200px"; // 距左侧200像素

这个是js文件内容,控制2个灯笼图片的布局位置。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/635529.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论文阅读笔记AI篇 —— Transformer模型理论+实战 (三)

论文阅读笔记AI篇 —— Transformer模型理论实战 &#xff08;三&#xff09; 第三遍阅读&#xff08;精读&#xff09;3.1 Attention和Self-Attention的区别&#xff1f;3.2 Transformer是如何进行堆叠的&#xff1f;3.3 如何理解Positional Encoding&#xff1f;3.x 文章涉及…

【C++入门到精通】智能指针 shared_ptr 简介及C++模拟实现 [ C++入门 ]

阅读导航 引言一、简介二、成员函数三、使用示例四、C模拟实现五、std::shared_ptr的线程安全问题六、总结温馨提示 引言 在 C 动态内存管理中&#xff0c;除了 auto_ptr 和 unique_ptr 之外&#xff0c;还有一种智能指针 shared_ptr&#xff0c;它可以让多个指针共享同一个动…

钉钉副总裁李智勇:AI超级助理,提升大模型时代生产力

微软比尔盖茨此前曾预言:“五年内&#xff0c;每个人都将拥有AI私人助理Agent&#xff0c;Agent将颠覆软件行业 。” 近日以来&#xff0c;在GPT store正式上线点爆情绪之后&#xff0c;无论国内外&#xff0c;Agent都是创业圈里炙手可热的新贵。一场关于Agent创业比拼大赛&am…

GitLab服务器忘记root密码处理方式

GitLab服务器忘记root密码处理方式 文章目录 GitLab服务器忘记root密码处理方式1. Gitlab查看用户id号1. 通过api接口查询2. 在Linux终端里直接通过curl命令查询 2. 进入GitLab数据库中查询并修改root密码 1. Gitlab查看用户id号 1. 通过api接口查询 接口查询地址&#xff1a;…

S2-04 ESP-IDF开发 : IIC

IIC IIC(Inter&#xff0d;Integrated Circuit)总线是一种由NXP&#xff08;原PHILIPS&#xff09;公司开发的两线式串行总线&#xff0c;用于连接微控制器及其外围设备。多用于主机和从机在数据量不大且传输距离短的场合下的主从通信&#xff0c;在小数据量场合使用&#xff…

【Linux第二课-权限】操作系统、Linux用户、Linux权限、Linux文件类型、粘滞位

目录 操作系统shell外壳为什么有shell外壳shell外壳是什么shell外壳工作原理 Linux用户root用户与非root用户root用户与普通用户的切换普通用户 --> root用户root用户 --> 普通用户普通用户 --> 普通用户对一条指令提升为root权限进行执行 Linux权限Linux中的权限角色…

jQuery深度笔记:从基础到高级

一、jQuery简介 jQuery是一个快速、小巧且富有特色的JavaScript库。自2006年诞生以来&#xff0c;它已经成为Web开发中最受欢迎的工具之一。通过简化和统一JavaScript API&#xff0c;jQuery使得开发者能够更高效地编写交互式网页和复杂的前端应用。 二、选择器 jQuery的选择器…

解决国内Linux服务器无法使用Github的方法

解决思路&#xff1a;修改Host https://www.ipaddress.com/ 利用上面的网站查询github.com和raw.githubusercontent.com的DNS解析的IP地址 最后&#xff0c;修改服务器的/etc/hosts 添加如下两行&#xff1a; 140.82.112.3 github.com 185.199.108.133 raw.githubuserconte…

树形结构下拉框组件vue-treeselect的使用(安装、模糊匹配、单选、多选、延迟加载、异步搜索等)

一、基本使用流程 首先npm安装依赖 npm install riophae/vue-treeselect --save然后在需要使用的组件中引入 import Treeselect from riophae/vue-treeselect import riophae/vue-treeselect/dist/vue-treeselect.css声明组件 components: { Treeselect }使用 <treesele…

安装布隆过滤器

上传并解压文件解压文件 tar -zxvf RedisBloom-2.2.4.tar.gz 进入解压好的文件 make一下 返回进入conf 配置文件 loadmodule /usr/local/etc/redis/redisbloom.so 粘入 拷贝redisbloom.so到容器 : docker cp redisbloom.so redis:/usr/local/etc/redis 重启redis : docker …

【设计模式】建造者模式就是游戏模式吗?

什么是建造者模式&#xff1f; 传说女娲是用泥巴捏出人来的&#xff0c;当时捏出的小泥人虽然每个都是两条腿、两只手、一个脑袋的样子&#xff0c;但是具体到每个部位&#xff0c;却有有所不同&#xff1a;有的小泥人手长一点&#xff0c;有的手短一点&#xff1b;有的脑袋圆…

NX二次开发获取圆弧的四个象限点

我是用来用来画水路线框的UF_MODL_ask_curve_points&#xff08;&#xff09;可以按弧长或者弧度获取曲线的等分点&#xff0c;取PI/2的圆弧&#xff0c;即将圆弧四等分&#xff0c;你也可以取任意等分点。 int GetArcPoint(tag_t arc_tag,double point[4][3]) {if(arc_tag0)r…

【Spring Boot 3】【Redis】分布式唯一ID生成器

【Spring Boot 3】【Redis】分布式唯一ID生成器 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技术总…

Ubuntu 20.04安装yum报错:E: Unable to locate package yum

直接上解决方案&#xff01; 1、选择自己对应的版本的源地址 注意需要选择跟系统版本一致的&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu/ 找到Ubuntu点击小问号&#xff0c;进去选择对应的版本&#xff0c;将下面的镜像复制到Linux系统的 /etc/apt/sourc…

【Java】小白友好的面向对象编程学习笔记

目录 OOP介绍 类和对象 方法参数 静态 包和import 构造方法 多态 访问权限 内部类 抽象 接口 枚举 匿名类 bean类 作用域 OOP介绍 Java 是一种面向对象的编程语言&#xff0c;面向对象编程&#xff08;Object-Oriented Programming&#xff0c;简称 OOP&#x…

vue2 使用pdf.js 实现pdf预览,并可复制文本

需求&#xff1a;pdf预览&#xff0c;并且可以选中pdf的内容进行复制。 在ruoyi的vue前端项目中用到&#xff0c;参考了网上不少文章&#xff0c;因为大部分没给具体的pdf.js版本&#xff0c;导致运行过程中报各种api 错误&#xff0c;经过尝试以下版本可用&#xff0c…

R语言【cli】——ansi_html():将ANSI格式文本转换为HTML

Package cli version 3.6.0 Usage ansi_html(x, escape_reserved TRUE, csi c("drop", "keep")) Arguments 参数【x】&#xff1a;输入字符向量。 参数【escape_reserved】&#xff1a;是否转义HTML中保留的字符(&、<和>)。 参数【csi】&a…

ARM多核调度器DSU

1. 背景 从A75开始&#xff0c;ARM提出了一个新的多核心管理系统单元&#xff0c;叫做DSU(DynamIQ Shared Unit)。DSU的核心功能是控制CPU内核&#xff0c;使其成簇Cluster使用&#xff0c;簇内每一个核心可以单独开关、调整频率/电压&#xff0c;能效表现更佳&#xff0c;甚至…

如何使用Webpack打包js文件

《Webpack打包简单的js文件》 初始化一个新的npm 步骤一&#xff1a; 初始化npm项目&#xff0c;创建一个package.json文件 npm init -y 步骤二&#xff1a; 添加打包脚本&#xff1a;在scripts部分添加一个命令来运行webpack "scripts": {"build":…

【机器学习】TensorFlowLite安装和模型训练

运行环境 Linux&#xff0c;部分库不支持Apple芯片 做AI这部分的开发&#xff0c;还是强烈建议装个Linux双系统或虚拟机 这些比折腾Windows和Mac上的移植环境要轻松得多 安装依赖 sudo apt install libportaudio219.6.0-1.2 pip3 install tf-models-official2.3.0 pip3 in…