响应式博客wordpress,电商沙盘seo优化,无货源一件代发平台,网页设计作品收获与思考css3javaScript实现一个左右钟摆-摇晃的红灯笼网页特效#xff01;前天逛博客时无意中看见了#xff0c;别人的博客顶部有一个会左右钟摆的摇晃的红灯笼#xff0c;产生了想法#xff0c;我也想给自己做一个#xff0c;但是网上找了很多方案#xff0c;都没有实现。终于在…css3javaScript实现一个左右钟摆-摇晃的红灯笼网页特效前天逛博客时无意中看见了别人的博客顶部有一个会左右钟摆的摇晃的红灯笼产生了想法我也想给自己做一个但是网上找了很多方案都没有实现。终于在昨天晚上搜索找到了利用css3和js一起组合的技术实现了这个效果。代码很简单。下面上代码分享。 如图所示这是一个静态的截图。实际上是可以看效果的。
我的网站展示地址是www.gxlda.com !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title置顶图层/titlelink href./yao.css relstylesheet/head
body!-- 此处省略网页内容 --div classtop-layerimg src../assets/images/deng1.png altdenglong2 classimage shake idd1img src../assets/images/deng1.png altdenglong2 classimage shake idd2/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个灯笼图片的布局位置。
