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

本文主要是介绍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个灯笼图片的布局位置。

这篇关于css3+javaScript实现一个左右钟摆-摇晃的红灯笼网页特效的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/625334

相关文章

Java导入、导出excel用法步骤保姆级教程(附封装好的工具类)

《Java导入、导出excel用法步骤保姆级教程(附封装好的工具类)》:本文主要介绍Java导入、导出excel的相关资料,讲解了使用Java和ApachePOI库将数据导出为Excel文件,包括... 目录前言一、引入Apache POI依赖二、用法&步骤2.1 创建Excel的元素2.3 样式和字体2.

Java实现将Markdown转换为纯文本

《Java实现将Markdown转换为纯文本》这篇文章主要为大家详细介绍了两种在Java中实现Markdown转纯文本的主流方法,文中的示例代码讲解详细,大家可以根据需求选择适合的方案... 目录方法一:使用正则表达式(轻量级方案)方法二:使用 Flexmark-Java 库(专业方案)1. 添加依赖(Ma

使用EasyExcel实现简单的Excel表格解析操作

《使用EasyExcel实现简单的Excel表格解析操作》:本文主要介绍如何使用EasyExcel完成简单的表格解析操作,同时实现了大量数据情况下数据的分次批量入库,并记录每条数据入库的状态,感兴... 目录前言固定模板及表数据格式的解析实现Excel模板内容对应的实体类实现AnalysisEventLis

Mybatis从3.4.0版本到3.5.7版本的迭代方法实现

《Mybatis从3.4.0版本到3.5.7版本的迭代方法实现》本文主要介绍了Mybatis从3.4.0版本到3.5.7版本的迭代方法实现,包括主要的功能增强、不兼容的更改和修复的错误,具有一定的参考... 目录一、3.4.01、主要的功能增强2、selectCursor example3、不兼容的更改二、

Spring Boot拦截器Interceptor与过滤器Filter详细教程(示例详解)

《SpringBoot拦截器Interceptor与过滤器Filter详细教程(示例详解)》本文详细介绍了SpringBoot中的拦截器(Interceptor)和过滤器(Filter),包括它们的... 目录Spring Boot拦截器(Interceptor)与过滤器(Filter)详细教程1. 概述1

SpringBoot利用dynamic-datasource-spring-boot-starter解决多数据源问题

《SpringBoot利用dynamic-datasource-spring-boot-starter解决多数据源问题》dynamic-datasource-spring-boot-starter是一... 目录概要整体架构构想操作步骤创建数据源切换数据源后续问题小结概要自己闲暇时间想实现一个多租户平台,

如何使用C#串口通讯实现数据的发送和接收

《如何使用C#串口通讯实现数据的发送和接收》本文详细介绍了如何使用C#实现基于串口通讯的数据发送和接收,通过SerialPort类,我们可以轻松实现串口通讯,并结合事件机制实现数据的传递和处理,感兴趣... 目录1. 概述2. 关键技术点2.1 SerialPort类2.2 异步接收数据2.3 数据解析2.

mybatis-plus 实现查询表名动态修改的示例代码

《mybatis-plus实现查询表名动态修改的示例代码》通过MyBatis-Plus实现表名的动态替换,根据配置或入参选择不同的表,本文主要介绍了mybatis-plus实现查询表名动态修改的示... 目录实现数据库初始化依赖包配置读取类设置 myBATis-plus 插件测试通过 mybatis-plu

Java反转字符串的五种方法总结

《Java反转字符串的五种方法总结》:本文主要介绍五种在Java中反转字符串的方法,包括使用StringBuilder的reverse()方法、字符数组、自定义StringBuilder方法、直接... 目录前言方法一:使用StringBuilder的reverse()方法方法二:使用字符数组方法三:使用自

Qt把文件夹从A移动到B的实现示例

《Qt把文件夹从A移动到B的实现示例》本文主要介绍了Qt把文件夹从A移动到B的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录如何移动一个文件? 如何移动文件夹(包含里面的全部内容):如何删除文件夹:QT 文件复制,移动(