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个灯笼图片的布局位置。

相关推荐
masa0108 分钟前
JavaScript--JavaScript基础
开发语言·javascript
让开,我要吃人了2 小时前
HarmonyOS开发实战(5.0)实现二楼上划进入首页效果详解
前端·华为·程序员·移动开发·harmonyos·鸿蒙·鸿蒙系统
everyStudy3 小时前
前端五种排序
前端·算法·排序算法
甜兒.4 小时前
鸿蒙小技巧
前端·华为·typescript·harmonyos
她似晚风般温柔7897 小时前
Uniapp + Vue3 + Vite +Uview + Pinia 分商家实现购物车功能(最新附源码保姆级)
开发语言·javascript·uni-app
Jiaberrr8 小时前
前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)
前端·javascript·vue.js·微信小程序·uni-app
everyStudy8 小时前
JS中判断字符串中是否包含指定字符
开发语言·前端·javascript
城南云小白8 小时前
web基础+http协议+httpd详细配置
前端·网络协议·http
前端小趴菜、8 小时前
Web Worker 简单使用
前端
web_learning_3218 小时前
信息收集常用指令
前端·搜索引擎