图片摆动

最新推荐文章于 2021-08-03 20:42:10 发布
最新推荐文章于 2021-08-03 20:42:10 发布
阅读量181 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44793200/article/details/89923628
版权

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>美食加倍，享受加倍</title>
  7.     <link rel="stylesheet" href="bootstrap\css\bootstrap.css">
  8.     <link rel="stylesheet" type="text/css" href="css\swiper-3.4.2.min.css">
  9.     <script type="text/javascript" src="js\swiper-3.4.2.min.js"></script>
  10.     
  11.     <!--<style type="text/css" media="screen">
  12.         
  13.     </style>-->
  14.     <style type="text/css">
  15.             .d4 img{
  16.             width: 100%;
  17.         }
  18.         .swiper-button-prev{
  19.             position: absolute;
  20.             z-index: 9;
  21.             left: 18%;
  22.             width: 50px;
  23.             height: 50px;
  24.             cursor: pointer;
  25.             opacity: 80;
  26.             background-color: #D0C4AF;
  27.             border-radius: 500px;
  28.             text-align: center;
  29.             line-height: 50px;
  30.             background-image: none;
  31.             font-size: 25px;
  32.         }
  33.         .swiper-button-next{
  34.             position: absolute;
  35.             z-index: 9;
  36.             right: 18%;
  37.             width: 50px;
  38.             height: 50px;
  39.             cursor: pointer;
  40.             opacity: 80;
  41.             background-color: #D0C4AF;
  42.             border-radius: 500px;
  43.             text-align: center;
  44.             line-height: 50px;
  45.             background-image: none;
  46.             font-size: 25px;
  47.         }
  48.         .d4 .glyphicon{
  49.             line-height: 50px;
  50.             color:#fff;
  51.         }
  52.     
  53.     </style>
  54. </head>
  55. <body>
  56.     
  57.     <div class="d4">
  58.         <div class="swiper-container">
  59.             <div class="swiper-wrapper">
  60.                 <div class="swiper-slide">
  61.                     <img src="imgs\2.png" alt="">
  62.                 </div>
  63.                 <div class="swiper-slide">
  64.                     <img src="imgs\3.png" alt="">
  65.                 </div>
  66.                 <div class="swiper-slide">
  67.                     <img src="imgs\4.png" alt="">
  68.                 </div>
  69.             </div>
  70.             
  71.             <!-- 如果需要导航按钮 -->
  72.             <div class="swiper-button-prev">
  73.                 <span class="glyphicon glyphicon-menu-left"></span>
  74.             </div>
  75.             <div class="swiper-button-next">
  76.                 <span class="glyphicon glyphicon-menu-right"></span>
  77.             </div>
  78.         </div>
  79.     </div>
  80.         
  81.     <script>        
  82.           var mySwiper = new Swiper ('.swiper-container', {
  83.             direction: 'horizontal',
  84.             loop: true,
  85.             autoplay : 3000,
  86.             // 如果需要前进后退按钮
  87.             nextButton: '.swiper-button-next',
  88.             prevButton: '.swiper-button-prev'
  89.           });       
  90.       </script>
  91. </body>
  92. </html>

摆换图片的网页代码

weixin_44793200
关注
专栏目录
css来回摆动,css3 animation(左右摆动) (放大缩小)
weixin_35829704的博客
08-03 2101
左右摆动：@-webkit-keyframes roundRule{0%, 100%{-webkit-transform: rotate(-15deg);}50%{-webkit-transform: rotate(15deg);}}-webkit-animation: roundRule 2.5s ease-in-out infinite;-webkit-transform-origin: t...
CSS_左右间歇晃动效果
小歪博客
07-04 1062
CSS_左右间歇晃动效果
css3动画之左右摇摆
热门推荐
super_ce的博客
01-09 3万+
@-webkit-keyframes zy{   10% {     transform: rotate(15deg);   }   20% {     transform: rotate(-10deg);   }   30% {     transform: rotate(5deg);   }   40% {     transform: rotate(-5deg);  
CSS - 左右摇曳摆动动画（无限循环）
王佳斌
12-28 8687
效果图 代码 @-webkit-keyframes demo{ 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 50%,100% { transform: rotate(0deg); } } /* 使用
小demo:微信拍一拍功能实现
weixin_43797908的博客
07-11 489
使用CSS3的动画特效和JS 双击后头像摇动及显示拍一拍 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .containor{ width: 550px; height: 500px; border: 1px solid #cccc; position:
安卓图片旋转，摆动动效
03-22
在Android开发中，图片旋转和摆动动效是常见的用户界面增强技巧，可以提升应用的交互体验。本文将深入探讨如何使用`android.graphics.Matrix`类和Java代码在Android平台上实现这些效果。 首先，`android.graphics....
微信小程序图片左右摆动效果详解
10-16
本文将详细介绍如何在微信小程序中实现图片左右摆动的动画效果。需要注意的是，小程序的动画实现与传统的CSS3动画有所不同，微信小程序主要通过JavaScript来控制动画，而非传统的CSS。 首先，需要了解微信小程序的...
jQuery背景图片跟随鼠标摆动特效.zip
07-05
本教程将聚焦于一个特定的jQuery特效——"背景图片跟随鼠标摆动"，这是一个能够提升用户交互体验的创新设计。这个特效使得网页背景图片根据用户的鼠标移动而动态变化，增加了视觉吸引力和趣味性。 首先，我们需要...
jQuery图片跟随鼠标左右摆动特效代码
03-20
《jQuery图片跟随鼠标左右摆动特效的实现与详解》 在网页设计中，动态效果能够提升用户体验，增加网站的互动性和吸引力。其中，“jQuery图片跟随鼠标左右摆动”是一种常见且有趣的特效，它使得网站元素更加生动活泼...
jQuery图片跟随鼠标左右摆动.zip
最新发布
11-22
`speed`变量决定了图片摆动的速度。`mousemove`事件处理器计算出鼠标的位置，并根据当前时间进行物理摆动的模拟。`Math.sin()`函数结合当前时间产生一个周期性的变化，使得图片在左右摆动时具有真实感。 最后，我们...
鼠标滑过图片抖动晃动效果（css/Shake）
学习-记录笔记-积累
07-01 1万+
别人网站上看到鼠标经过图片左右抖动晃动的特效,自己也想弄一个,查了查是用到的就是CSS3的特性——Shake Shake使用SASS编写，利用它我们可以实现多种不同样式的抖动效果。这是一个很微小的动画，但使用得当也是挺不错的，比如用在广告、图像、按钮上，这样可以用来吸引用户眼球从而促使去点击它。 这个Csshake有9个抖动样式，三个状态，如鼠标经过拉动、无限抖动、鼠标悬停拉动，一起来看一下吧。
CSS3左右间歇晃动效果
weixin_34388207的博客
09-22 1383
今天在做一个活动页面时，产品想要在页面中添加一个吸引人注意的小图片左右晃动的效果，并且该效果是间歇执行的。我一想应该挺简单的吧，二话没说就答应了，谁知在真正实现的时候才发现还是有些许困难的。于是就在网上各种找资料，找的过程中，只是发现了可以左右晃动摇摆的css3动画效果，却没有可以间歇执行的类似的动画效果。最后我想到了以前写的一个可以间歇向上无缝滚动的css3的效果，拿来一试，也不行。最后在Seg...
html 图片摆动效果,CSS摆动/摇动效果
weixin_39771775的博客
06-04 915
这是一个简单的摆动动画,当你将鼠标悬停在动画上时会停止.为了实现摆动之间的延迟,你可以只包括动画的“空块”……也就是说,没有任何变化的时期.在我的例子中,0％和80％标记之间没有任何变化,“摆动”仅发生在最后20％(最终达到半秒).@keyframes wiggle {0% { transform: rotate(0deg); }80% { transform: rotate(0deg); }85...
css左右摆动动画
yu2015java的博客
11-26 1万+
/*活动摇摆动画*/ @-webkit-keyframes swing { 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg)
css来回摆动,css左右摇摆动画
weixin_29404509的博客
08-03 2370
@-webkit-keyframes swing {20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }20% { -webkit-transform: rotate(15deg);}40%{-webkit-transform: rotate(-10deg);}60%{-webkit-transform: rotate...
css 实现 图片左右滑动查看的效果
业余前端的职业经历
01-21 1万+
其实除了除了轮播图的那种图片效果外，图片滑动查看的效果 在网站中引用也是很多的，特别是在移动端，pc端的也有 就是我们是通过鼠标点击滑动的效果 我们先来看下效果吧 这样的效果 其实没必要用到js 直接用纯css就能实现 思路大概是 父元素 包括一个子元素 然后 如果高度和子元素高度不一致的话 还得再竖向方向上设置一个 hidden 然后里面 子元素 要设置一个比较长的 宽度 父元素 设置 overflow-x : auto; 就可以了 我们看下代码实现吧 dom布局 ...
CSS实现背景图片的左右晃动
qq_15124555的博客
10-06 8746
利用CSS的animation实现背景图片的左右晃动
css3来回摆动
良_123的专栏
01-06 1万+
html> html> head> script src="//cdn.bootcss.com/jquery/2.1.4/jquery.js">script> script> var i=0; $(document).ready(function(){ setInterval('gaibian()',1000);
jQuery背景图片跟随鼠标摆动特效源码
3. CSS动画与变换：为了实现平滑的背景图片摆动，通常会用到CSS3的`transform`属性，如`translateX`、`translateY`来移动背景图片，以及`transition`属性来定义动画的持续时间和效果。当然，这种效果也可以通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值