本文介绍: css3+javaScript实现一个左右钟摆-摇晃的红灯笼网页特效！前天逛博客时无意中看见了，别人的博客顶部有一个会左右钟摆的摇晃的红灯笼，产生了想法，我也想给自己做一个，但是网上找了很多方案，都没有实现。终于在昨天晚上搜索，找到了利用css3和js一起组合的技术，实现了这个效果。这个是css文件里面的内容。我故意把周期设计的步进很缓慢，看起来晃动的时候会比较柔和一点。这个index.html里面的代码。如图所示，这是一个静态的截图。实际上是可以看效果的。这个是js文件内容，控制2个灯笼图片的布局位置。
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个灯笼图片的布局位置。
原文地址:https://blog.csdn.net/yrldjsbk/article/details/135699594
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_61111.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
