一个小创意，侧向滑入轮播图（HTML+CSS）

于 2022-11-28 06:00:00 发布
阅读量260 收藏 3
点赞数
分类专栏： CSS 文章标签： css html css3 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hao_13/article/details/128071590
版权

目录

效果展示 ：

基本思路 ：

 HTML：

 CSS：

效果展示 ：

一个小创意，侧向滑入轮播图

基本思路 ：

         元素从左到右移动，前三个直接可视的元素是倾斜的，中央第四层的元素在中间位置的时候是平行与屏幕的。元素从左到右一层上一层，逐渐变清晰、变大，第三层上第四层的时候变化最大，从第四层到达第五层，即到最右边（如图地五层的位置）的元素在极短的时间回到最左侧，然后再重新开始，如此循环。

 HTML：

        图片都是国家地理的摄影图片，挺好看的。

        .box 控制大小，img 占满 box。

<div class="outest">
        <!-- 默认在未上第一层的位置开始 -->
        <div class="box">
            <img class="img img-0" src="https://img1.baidu.com/it/u=3072057768,858914143&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281">
        </div>
        <!-- 默认初始位置为在第一层 -->
        <div class="box">
            <img class="img img-1" src="https://img0.baidu.com/it/u=12043719,3003581147&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800">
        </div>
        <!-- 默认初始位置为第二层 -->
        <div class="box">
            <img class="img img-2" src="https://img1.baidu.com/it/u=1032609868,1354897511&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800">
        </div>
        <!-- 默认初始位置为第三层 -->
        <div class="box">
            <img class="img img-3" src="https://img0.baidu.com/it/u=3539901417,650720086&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281">
        </div>
        <!-- 默认初始位置为舞台中间 -->
        <div class="box">
            <img class="img img-center" src="https://img2.baidu.com/it/u=2330640232,2293084105&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" >
        </div>
</div>

 CSS：

        CSS写了五个动画，感觉还是有点离谱😅😅，不过还是达到了效果😂😂。。。

    html,body{
            box-sizing: border-box;
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-image: linear-gradient(to right top,#ccfbff , #ef96c5);
            
        }
        .outest{
            width: 100vw;
            height: 100vh;
            position: relative;
        }
        .box{
            width: 18vw;                /* 控制内容整体大小 */
            position: absolute;
            top: 50vh;
            left: 30vw;
            perspective: 400px;
        }
        .img{
            position: absolute;
            width: 100%;
            border-radius: 6px;
        }
        .img-0{
            animation: default-0 20s linear 0s infinite both;
        }
        .img-1{
            animation: default-1 20s linear 0s infinite both;
        }
        .img-2{
            animation: default-2 20s linear 0s infinite both;
        }
        .img-3{
            animation: default-3 20s linear 0s infinite both;
        }
        .img-center{
            animation: default-center 20s linear 0s infinite both;
        }

        @keyframes default-0 {         /* 初始位置为 全部在屏幕右侧外面 */
            0%{      /* 全部到屏幕右侧外面 贴边 */
                transform-origin: center;
                transform: translate(70vw,-50%) scale(1,1) rotateY(0deg);
                z-index: 0;
                opacity: 0;
            }
            1%{        /* 全部到屏幕左侧外面 贴边 */
                transform-origin: center;
                transform: translate(calc(-30vw - 100%),-50%) scale(1,1) rotateY(30deg);
                z-index: 0;
                opacity: 0;
            }
            10%{      /* 没到第一层 */
                transform-origin: center;
                transform: translate(calc(- 30vw - 300px),-50%) scale(0.9,0.9) rotateY(30deg);
                z-index: 0;
                opacity: 0;
            }
            20%,30%{      /* 第一层 */
                transform-origin: right top;
                transform: translate(-100%,-50%) scale(0.8,0.8) rotateY(30deg) ;
                z-index: 1;
                opacity: 0.1;
            }
            40%,50%{     /* 第二层 */
               transform-origin: right top;
                transform: translate(-73%,-50%) scale(0.9,0.9) rotateY(30deg);
                z-index: 2;
                opacity: 0.3;
            }
            60%,70%{     /* 第三层 */
                transform-origin: right top;
                transform: translate(-45%,-50%) scale(1,1) rotateY(30deg);
                z-index: 3;
                opacity: 0.6;
            }
            75%,90%{     /* 中间 */
                transform-origin: center;
                transform: translate(150%,-50%) scale(2.5,2.5) rotateY(0deg);
                z-index: 5;
                opacity: 1;
                box-shadow: 1px 1px 12px 1px rgba(150, 150, 150, 0.8);
            }
            95%,100%{     /* 全部到达屏幕右侧外面 */
                transform-origin: center;
                transform: translate(70vw,-50%) scale(1,1) rotateY(0deg);
                z-index: 0;
                opacity: 0;
            }
        }
        @keyframes default-1 {          /* 初始位置为第一层 */
            0%,10%{     /* 第一层 */
                transform-origin: right top;
                transform: translate(-100%,-50%) scale(0.8,0.8) rotateY(30deg);
                z-index: 1;
                opacity: 0.1;
            }
            20%,30%{     /* 第二层 */
                transform-origin: right top;
                transform: translate(-73%,-50%) scale(0.9,0.9) rotateY(30deg);
                z-index: 2;
                opacity: 0.3;
            }
            40%,50%{     /* 第三层 */
                transform-origin: right top;
                transform: translate(-45%,-50%) scale(1,1) rotateY(30deg);
                z-index: 3;
                opacity: 0.6;
            }
            55%,70%{     /* 中央 */
                transform-origin: center;
                transform: translate(150%,-50%) scale(2.5,2.5) rotateY(0deg);
                z-index: 5;
                opacity: 1;
                box-shadow: 1px 1px 12px 1px rgba(150, 150, 150, 0.8);
            }
            75%,80%{       /* 全部在屏幕右侧 */
                transform-origin: center;
                transform: translate(70vw,-50%) scale(1,1) rotateY(0deg);
                z-index: 0;
                opacity: 0;
            }81%{       /* 全部在屏幕左侧 */
                transform-origin: center;
                transform: translate(calc(-30vw - 100%),-50%) scale(1,1) rotateY(30deg);
                z-index: 0;
                opacity: 0;
            }
            90%{      /* 未到第一层 */
                transform-origin: center;
                transform: translate(calc(- 30vw - 300px),-50%) scale(0.9,0.9) rotateY(30deg);
                z-index: 0;
                opacity: 0.;
            }
            100%{      /* 第一层 */
                transform-origin: right top;
                transform: translate(-100%,-50%) scale(0.8,0.8) rotateY(30deg) ;
                z-index: 1;
                opacity: 0.1;
            }
        }
        @keyframes default-2 {          /* 初始位置为第二层 */
            0%,10%{      /* 在第二层 */
                transform-origin: right top;
                transform: translate(-73%,-50%) scale(0.9,0.9) rotateY(30deg);
                z-index: 2;
                opacity: 0.3;
            }
            20%,30%{     /* 第三层 */
                transform-origin: right top;
                transform: translate(-45%,-50%) scale(1,1) rotateY(30deg);
                z-index: 3;
                opacity: 0.6;
            }
            35%,50%{     /* 中央 */
                transform-origin: center;
                transform: translate(150%,-50%) scale(2.5,2.5) rotateY(0deg);
                z-index: 5;
                opacity: 1;
                box-shadow: 1px 1px 12px 1px rgba(150, 150, 150, 0.8);
            }
            55%,60%{        /* 全部在屏幕右侧 */
                transform-origin: center;
                transform: translate(70vw,-50%) scale(1,1) rotateY(0deg);
                z-index: 0;
                opacity: 0;
            }61%{       /* 全部在屏幕左侧 */
                transform-origin: center;
                transform: translate(calc(-30vw - 100%),-50%) scale(1,1) rotateY(30deg);
                z-index: 0;
                opacity: 0;
            }
            70%{      /* 未上第一层 */
                transform-origin: center;
                transform: translate(calc(- 30vw - 300px),-50%) scale(0.9,0.9) rotateY(30deg);
                z-index: 0;
                opacity: 0;
            }
            80%,90%{      /* 第一层 */
                transform-origin: right top;
                transform: translate(-100%,-50%) scale(0.8,0.8) rotateY(30deg) ;
                z-index: 1;
                opacity: 0.1;
            }100%{     /* 第二层 */
                transform-origin: right top;
                transform: translate(-73%,-50%) scale(0.9,0.9) rotateY(30deg);
                z-index: 2;
                opacity: 0.3;
            }
        }
        @keyframes default-3 {          /* 初始位置为第三层 */
            0%,10%{     /* 第三层 */
                transform-origin: right top;
                transform: translate(-45%,-50%) scale(1,1) rotateY(30deg);
                z-index: 3;
                opacity: 0.6;
            }
            15%,30%{     /* 中央 */
                transform-origin: right top;
                transform-origin: center;
                transform: translate(150%,-50%) scale(2.5,2.5) rotateY(0deg);
                z-index: 5;
                opacity: 1;
                box-shadow: 1px 1px 12px 1px rgba(150, 150, 150, 0.8);
            }
            35%,40%{       /* 全部在屏幕右侧 */
                transform-origin: center;
                transform: translate(70vw,-50%) scale(1,1) rotateY(0deg);
                z-index: 0;
                opacity: 0;
            }
            41%{        /* 全部在屏幕左侧 */
                transform-origin: center;
                transform: translate(calc(-30vw - 100%),-50%) scale(1,1) rotateY(30deg);
                z-index: 0;
                opacity: 0;
            }
            50%{      /* 未上第一层 */
                transform-origin: center;
                transform: translate(calc(- 30vw - 300px),-50%) scale(0.9,0.9) rotateY(30deg);
                z-index: 0;
                opacity: 0;
            }
            60%,70%{      /* 第一层 */
                transform-origin: right top;
                transform: translate(-100%,-50%) scale(0.8,0.8) rotateY(30deg) ;
                z-index: 1;
                opacity: 0.1;
            }80%,90%{     /* 第二层 */
                transform-origin: right top;
                transform: translate(-73%,-50%) scale(0.9,0.9) rotateY(30deg);
                z-index: 2;
                opacity: 0.3;
            }100%{     /* 第三层 */
                transform-origin: right top;
                transform: translate(-45%,-50%) scale(1,1) rotateY(30deg);
                z-index: 3;
                opacity: 0.6;
            }
        }
        @keyframes default-center {     /* 初始位置为中央 */
            0%,10%{     /* 中央 */
                transform-origin: center;
                transform: translate(150%,-50%) scale(2.5,2.5) rotateY(0deg);
                z-index: 5;
                opacity: 1;
                box-shadow: 1px 1px 12px 1px rgba(150, 150, 150, 0.8);
            }
            15%,20%{       /* 全部在屏幕右侧 */
                transform-origin: center;
                transform: translate(70vw,-50%) scale(1,1) rotateY(0deg);
                z-index: 0;
                opacity: 0;
            }
            21%{        /* 全部在屏幕左侧 */
                transform-origin: center;
                transform: translate(calc(-30vw - 100%),-50%) scale(1,1) rotateY(30deg);
                z-index: 0;
                opacity: 0;
            }
            30%{      /* 未上第一层 */
                transform-origin: center;
                transform: translate(calc(- 30vw - 300px),-50%) scale(0.9,0.9) rotateY(30deg);
                z-index: 0;
                opacity: 0;
            }
            40%,50%{      /* 第一层 */
                transform-origin: right top;
                transform: translate(-100%,-50%) scale(0.8,0.8) rotateY(30deg) ;
                z-index: 1;
                opacity: 0.1;
            }
            60%,70%{     /* 第二层 */
               transform-origin: right top;
                transform: translate(-73%,-50%) scale(0.9,0.9) rotateY(30deg);
                z-index: 2;
                opacity: 0.3;
            }
            80%,90%{     /* 第三层 */
                transform-origin: right top;
                transform: translate(-45%,-50%) scale(1,1) rotateY(30deg);
                z-index: 3;
                opacity: 0.6;
            }
            95%,100%{     /* 中央 */
                transform-origin: center;
                transform: translate(150%,-50%) scale(2.5,2.5) rotateY(0deg);
                z-index: 5;
                opacity: 1;
                box-shadow: 1px 1px 12px 1px rgba(150, 150, 150, 0.8);
            }
        }

bodyHealthy
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
vue实现侧边图片上下点击轮播
LONGYog的博客
04-21 1100
vue实现侧边图片上下点击轮播 开门见山，直接上图 HTML代码： <template> <div> <div style="width:400px;height:400px;margin:100px 0 0 700px;"> <ul class="sideImg_ul"> <li v-for="(item,index) in SideImgUrlList" .
html如何设置图片自动滑动效果,javascript图片滑动效果实现
weixin_33340674的博客
06-01 1442
本文为大家分享了javascript图片滑动效果实现方法，具体内容如下，先看一下效果图：鼠标滑过那张图，显示完整的哪张图，移除则复位：简单的CSS加JS操作DOM实现：sliding doors css:#container {height: 477px;margin: 0 auto;border-right: 1px solid #ccc;border-bottom: 1px solid ...
web轮播图+侧边栏.zip
06-03
web大作业侧边栏+轮播图
html图片从左往右滑动,js实现从左向右滑动式轮播图效果
weixin_36372146的博客
06-10 2782
轮播图就是让图片每隔几秒自动滑动，达到图片轮流播放的效果。轮播图从效果来说有滑动式的也有渐入式的，滑动式的轮播图就是图片从左向右滑入的效果，渐入式的轮播图就是图片根据透明度渐渐显示的效果，这里说的是实现第一种效果的方法。原理相同大小的图片并成一列，但只显示其中一张图片，其余的隐藏，通过修改left值来改变显示的图片。html部分nav为总容器，第一个ul列表#index为小圆点列表，鼠标覆盖哪个小...
简单的html平滑跳转图片效果
xmhhtl的博客
06-26 564
html平滑跳转到指定图片简单代码
纯CSS3实现图文轮播焦点图插件
11-24
例如，可以定义一个动画，使图片从左侧滑入，然后在一段时间后从右侧滑出。通过将这个动画应用到图片的`animation`属性，可以实现自动切换的效果。 4. **过渡效果**： 当用户触发手动切换（如点击导航按钮）时，...
CSS3相片左右飞入滑出切换
06-11
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是本文将要探讨的“CSS3相片左右飞入滑出切换”技术。这种效果通常用于图片轮播或者相册展示，能够使用户体验更加生动...
CSS3相片左右飞入滑出切换.zip
09-25
《CSS3相片左右飞入滑出切换效果详解》 CSS3作为现代网页设计的核心技术之一，极大地丰富了网页的视觉表现力。本教程将详细解析"CSS3相片左右飞入滑出切换"这一特效的实现原理和关键代码，帮助你理解并掌握这种动态...
jQuery+HTML5圆形图片轮播特效插件mislider
06-11
**jQuery+HTML5圆形图片轮播特效插件mislider详解** 在现代网页设计中，动态效果和交互性已经成为提升用户体验的重要元素。`mislider`是一款基于jQuery和HTML5技术的圆形图片轮播插件，它提供了独特的圆形布局，...
jQuery+CSS3实现不错的气泡幻灯片效果
04-14
例如，当切换到下一个幻灯片时，当前气泡可以逐渐淡出，新的气泡则从合适的位置滑入。 5. **事件监听**：为了实现自动轮播和用户交互，我们需要监听时间间隔和用户点击事件。使用`.setInterval()`可以设置定时器，...
js+html5实现侧滑页面效果
10-19
主要为大家详细介绍了js+html5实现侧滑页面效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html 图片hover右滑,iHover | 纯CSS3炫酷鼠标滑过图片特效
weixin_35625309的博客
06-04 488
iHover是一款效果相当炫酷的纯CSS3鼠标滑过图片特效。ihover可以和Bootstrap 3完美的结合使用。它提供了基于圆形图片和矩形图片共35种不同的鼠标滑过图片特效。它的特点有：纯CSS3制作，没有任何依赖，可以在任何项目中使用。通过Scss来构建，修改十分容易。模块化代码，不需要引入整个文件。共有35种不同的鼠标滑过效果。可以和Bootstrap 3完美的结合使用。使用方法HTML结...
html怎么插入图片让图片滑动起来_想玩儿点不一样的？用这个小功能，让你的PPT滚动起来！...
weixin_34185396的博客
01-12 933
在之前的文章中，我曾借助 PPT 中平滑切换功能，制作出这样的数值滚动的效果：很酷，对吧？但有很多读者向我反馈说，他们的软件中并没有平滑这个功能，没办法做出这样的动画效果。那该怎么办呢？其实很简单，我们只需要借助 PPT 中一个不起眼的小功能，也可以做出酷炫的动画效果！这个功能就是「幻灯片背景填充」。我们选中页面中的形状，右键设置形状格式，就可以找到它啦！那它是干嘛的呢？听名字就知道，它的作用就是...
HTML中鼠标滚动图片飞入效果,js实现图片随鼠标滚动的成效
weixin_39747293的博客
06-07 434
1,获取样式属性值top 与顶部的距离left 与左边的距离right 与右边的距离bottom 与下边的距离zIndex 层叠层次例子:获取左边的宽度,当css写在body标签中时 function init(){var adverObj = document.getElementById("adver");alert(adverObj.style.left);}当css写在head标签...
html隐藏右侧移出动画,HTML5图片的淡出，淡入，显示，隐藏，外加左右移动动画效果...
weixin_28856717的博客
05-31 405
先来张图：来一张效果图，其他就不一一展示了，代码都在下面：代码如下：html>下午练习title>script>$(function () {$("#a").click(function () {$("img").fadeIn(2000,function () {alert("图片淡入了")});})$("#b").click(function () {$("img").fadeOut...
前端侧边栏的滑入滑出效果
weixin_44279243的博客
11-04 1513
在使用element-ui的Drawer抽屉功能时达不到我想要的效果，手写一个原生的方法，实现点击按钮时使得div元素能够在页面滑入滑出。 1.页面元素简单，一个button，一个div即可； <div> <button>滑出</button> <div id="containerDiv">container</div> </div> 2.以下是设置div的简单的样式 重点：a.设置div的定位，并设置lef.
html实现侧边滑动效果,基于slideout.js实现移动端侧边栏滑动特效
weixin_28893183的博客
06-03 927
HTML5现在本领太大了，PC端已经无法满足它的胃口了，它将强势攻入移动端，所以移动端中各种特效也得基于HTML5实现，看看我们将要介绍的slideout.js，能帮我们实现怎么样的侧边栏滑动特效呢先看下运行效果：一、准备资料只需要准备slideout.js库即可：小图标：二、实现代码HTML代码：适合移动手机的侧边栏滑动代码 - 站长素材主题脚本代码jQueryCSS3HTML5动画效果flas...
html图片向两边展开效果,通过CSS3 transform实现图片浏览的几种效果
weixin_29191669的博客
06-03 864
通过css3和DOM操作，可以实现多种图片浏览的效果 但是大致思路都是一致的：1)通过DOM操作循环创建出来一组元素document.createElement('标签名')；父级.appendChild('obj');2)给每一个创建出来的元素添加transform变换效果obj.style.transform=' rotateX(30deg)';obj.style.transition='1s...
html设置移动动画效果,css移动动画效果（伪类+transition+ transform+ animation）
weixin_35572363的博客
06-09 2420
一、常用概念区分：1、transform(变形)——组合属性，可以只设置其中一个/多个属性值，空格隔开。属性定义元素的形状/位置变化，：可以定义五个子属性：移动translate缩放scale旋转rotate扭曲skew矩阵变形matrix元素2、translate(移动)——transform的一个属性值，定义元素的移动效果translate(x,y)两坐标同时移动，可以使用百分比transla...
轮播图html+css+javascript
最新发布
12-22
以下是一个使用HTML、CSS和JavaScript实现轮播图的例子： HTML部分： ```html <!DOCTYPE html> <html> <head> <title>轮播图</title> <style> #box { position: relative; margin: 100px auto; overflow: hidden; width: 520px; height: 280px; background-color: grey; } #box img { width: 100%; height: 100%; } </style> </head> <body> <div id="box"> <img id="lunbo_img" src="images/img1.jpg"> </div> <script> var index = 1; function lunbo(){ index ++; if(index > 5){ index = 1; } var img = document.getElementById('lunbo_img'); img.src = "images/img"+index+".jpg"; } setInterval(lunbo, 2000); </script> </body> </html> ``` 这个例子中，我们使用了一个包含图片的`<div>`元素作为轮播图的容器，通过JavaScript代码实现图片的切换。每隔2秒钟，`lunbo()`函数会被调用一次，通过改变图片的`src`属性来切换图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bodyHealthy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值