html 图片滑动,CSS3图片滑动效果

最新推荐文章于 2023-03-24 21:29:57 发布
最新推荐文章于 2023-03-24 21:29:57 发布
阅读量157 收藏
点赞数
文章标签： html 图片滑动

需实现的效果如下

bVKILI?w=672&h=461

Sliding Image Panels with CSS3

Sliding Image Panels with CSS3

Demo 1

Demo 2

Demo 3

Demo 4

1

2

3

4

SerendipityWhat you've been dreaming of

AdventureWhere the fun begins

NatureUnforgettable eperiences

SerenityWhen silence touches nature

下面这个是style1.css

.cr-container{

width: 600px;

height: 400px;

position: relative;

margin: 0 auto;

border: 20px solid #fff;

box-shadow: 1px 1px 3px rgba(0,0,0,0.1);

}

.cr-container label{

font-style: italic;

width: 150px;

height: 30px;

cursor: pointer;

color: #fff;

line-height: 32px;

font-size: 24px;

float:left;

position: relative;

margin-top:350px;

z-index: 1000;

}

.cr-container label:before{

content:'';

width: 34px;

height: 34px;

background: rgba(130,195,217,0.9);

position: absolute;

left: 50%;

margin-left: -17px;

border-radius: 50%;

box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);

z-index:-1;

}

.cr-container label:after{

width: 1px;

height: 400px;

content: '';

background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));

background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

position: absolute;

bottom: -20px;

right: 0px;

}

.cr-container label.cr-label-img-4:after{

width: 0px;

}

.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,

.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,

.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,

.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{

color: #68abc2;

}

.cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,

.cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,

.cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,

.cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{

background: #fff;

box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);

}

.cr-container input{

display: none;

}

.cr-bgimg{

width: 600px;

height: 400px;

position: absolute;

left: 0px;

top: 0px;

z-index: 1;

}

.cr-bgimg{

background-repeat: no-repeat;

background-position: 0 0;

}

.cr-bgimg div{

width: 150px;

height: 400px;

position: relative;

float: left;

overflow: hidden;

background-repeat: no-repeat;

}

.cr-bgimg div span{

position: absolute;

width: 150px;

height: 400px;

top: 0px;

left: -150px;

z-index: 2;

}

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,

.cr-bgimg div span:nth-child(1){

background-image: url(../images/1.jpg);

}

.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg,

.cr-bgimg div span:nth-child(2){

background-image: url(../images/2.jpg);

}

.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg,

.cr-bgimg div span:nth-child(3){

background-image: url(../images/3.jpg);

}

.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg,

.cr-bgimg div span:nth-child(4){

background-image: url(../images/4.jpg);

}

.cr-bgimg div:nth-child(1) span{

background-position: 0px 0px;

}

.cr-bgimg div:nth-child(2) span{

background-position: -150px 0px;

}

.cr-bgimg div:nth-child(3) span{

background-position: -300px 0px;

}

.cr-bgimg div:nth-child(4) span{

background-position: -450px 0px;

}

.cr-container input:checked ~ .cr-bgimg div span{

-webkit-animation: slideOut 0.6s ease-in-out;

-moz-animation: slideOut 0.6s ease-in-out;

-o-animation: slideOut 0.6s ease-in-out;

-ms-animation: slideOut 0.6s ease-in-out;

animation: slideOut 0.6s ease-in-out;

}

@-webkit-keyframes slideOut{

0%{ left: 0px; }

100%{ left: 150px; }

}

@-moz-keyframes slideOut{

0%{ left: 0px; }

100%{ left: 150px; }

}

@-o-keyframes slideOut{

0%{ left: 0px; }

100%{ left: 150px; }

}

@-ms-keyframes slideOut{

0%{ left: 0px; }

100%{ left: 150px; }

}

@keyframes slideOut{

0%{ left: 0px; }

100%{ left: 150px; }

}

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),

.cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),

.cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),

.cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)

{

-webkit-transition: left 0.5s ease-in-out;

-moz-transition: left 0.5s ease-in-out;

-o-transition: left 0.5s ease-in-out;

-ms-transition: left 0.5s ease-in-out;

transition: left 0.5s ease-in-out;

-webkit-animation: none;

-moz-animation: none;

-o-animation: none;

-ms-animation: none;

animation: none;

left: 0px;

z-index: 10;

}

.cr-titles h3{

position: absolute;

width: 100%;

text-align: center;

top: 50%;

z-index: 10000;

opacity: 0;

color: #fff;

text-shadow: 1px 1px 1px rgba(0,0,0,0.1);

-webkit-transition: opacity 0.8s ease-in-out;

-moz-transition: opacity 0.8s ease-in-out;

-o-transition: opacity 0.8s ease-in-out;

-ms-transition: opacity 0.8s ease-in-out;

transition: opacity 0.8s ease-in-out;

}

.cr-titles h3 span:nth-child(1){

font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;

font-size: 70px;

display: block;

letter-spacing: 7px;

}

.cr-titles h3 span:nth-child(2){

letter-spacing: 0px;

display: block;

background: rgba(104,171,194,0.9);

font-size: 14px;

padding: 10px;

font-style: italic;

font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;

}

.cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1),

.cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2),

.cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3),

.cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4){

opacity: 1;

}

/* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */

@media screen and (max-width: 768px) {

.cr-container input{

display: inline;

width: 24%;

margin-top: 350px;

z-index: 1000;

position: relative;

}

.cr-container label{

display: none;

}

}

如果按照上面的代码，个人感觉CSS处理逻辑略微复杂、html结构也不够清晰，不知道有没有更好的的方法实现同样的效果。

weixin_36344231
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3唱片滑动效果
04-02
css3唱片专辑滑动是一款采用html+css3实现的类似唱片专辑封面的滑动效果。本作品由【站长素材】收集整理，转载请注明出处！
html的图片滑动效果,JS+CSS3 实现图片滑块效果
weixin_36257834的博客
06-03 615
效果分析该动画，可拆分成两个步骤：鼠标移入或者移出时，添加一个动画 class实现该动画 class，实现移入移出动画HTML 和 CSS 布局布局比较简单，一个父容器 ，里面一个 mask div，一个 img div 布局，父容器设置 position: relative; 子 mask 容器设置 position: absolute;并撑满整个容器编写动画 class，不妨让左滑入 cla...
html web滑动图片,H5+CSS3实现手指滑动切换图片_html/css_WEB-ITnose
weixin_30366629的博客
06-04 998
包含3个文件：html、slider-H5.js、jquery.js(自行下载)。在html中可配置滑动参数。具体代码如下：HTML代码：H5手指滑动切换图片 这里通过回调显示当前滚动到多少页:0slider-H5.js 代码(function($){ /* 图片滚动效果 @jQuery or @String box : 滚动列表jQ...
html5css怎么做点击滚动图片,一款利用html5和css3实现的3D滚动特效的教程
weixin_30600605的博客
06-04 440
body{height:100vh;}.container{position:absolute;height:100px;width:100px;left:33%;top:50%;-webkit-transform:translateX(-50%)translateY(-50%);transform:translateX(-50%)translateY(-50%);-webkit-perspect...
html图片实现左右滑动,css实现图片左右滑动
weixin_39881387的博客
06-09 3938
1.脚本图片展示图片1图片2图片3图片4图片5图片6图片7图片8图片9图片102.css样式#picContent {position:relative;overflow-x:auto;width:100%;height:400px;margin:0 0;}#picContent ul {position:absolute;left:0;top:0;display:flex;flex-wrap:n...
html css实现自动滑动的轮播图,CSS 轮播图的实现（纯CSS，连续滑动无倒滑效果）...
weixin_29079643的博客
06-01 3819
简单demo：使用HTML+CSS 实现轮播图(三张图为例，分别为：红、绿、蓝)的效果。实现效果：不能发视频，截图来代替吧示意图1.png示意图2.png示意图3.png实现思路使用 div+ul+li 的页面布局方式(div 的宽度和 li 的宽度相同)；在 ul 中横向排列5个 li 元素(ul 的宽度 >= 5个 li 元素的和)，排列顺序为 ：轮播图3--轮播图1--轮播图2--轮...
CSS+HTML图片滑动浏览效果.rar
10-01
非常实用的特效代码，可以完美运行，可以二次修改！
jquery+css+html图片滑动效果
03-05
jquery+css+html图片滑动效果，自动滑动，鼠标在上停止，鼠标在上又开始滑动，可以点击去要看的图
swipe 手机图片滑动 hml5+css3
03-19
支持android,iphone,手机图片自动滑动效果，html5+css3+jquery+swipe
JQuery图片滑动手风琴效果源码.rar
最新发布
10-15
源码使用HTML、CSS及简单的jquery方法实现了简单的图片手风琴下拉效果，实现手风琴导航效果的思路：当鼠标点击第一张图片区域时，第一个按钮里面的内容显示出来，点击第二张图片时，第二张图片里面的内容显示出来，...
html图片滑屏css,html+css实现图片滑移效果
weixin_35612315的博客
06-04 289
ChouTiZhanShi.htmlbody{background:url("img/bg.jpg")no-repeat}*{margin:0px; padding:0px;}#imgs{width:1218px ; height:233px ;border-radius:9px;box-shadow:0px 0px 8px #000;margin:20px auto;}#imgs ul {lis...
php中图片滚动,如何使用CSS实现滚动的图片栏（附代码）
weixin_39971138的博客
04-11 364
本篇文章给大家带来的内容是关于如何使用CSS实现滚动的图片栏(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在一些网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过css的动画效果来实现。具体效果如下主要原理是通过动画向左移动。首先给出两组一样的图片(同一行上)，让整体图片向左移动一组图片的长度，这样在动画结束时会迅速还原到原来位置，而此时正好与第二组图片交...
html中怎样制作图片滚动,CSS3 制作的图片滚动效果
weixin_27015733的博客
06-09 1294
实现效果实现代码htmlCSS3@keyframes slidy {0% { left: 0%; }20% { left: 0%; }25% { left: -100%; }45% { left: -100%; }50% { left: -200%; }70% { left: -200%; }75% { left: -300%; }95% { left: -300%; }100% { left: ...
html设置背景坐标,backgroundPosition
weixin_39883256的博客
05-31 605
CSS background-position的用法是背景图片的定位; 冒号后面的属性可以是具体的数值,可以是left,right top bottom等 给你个参考资料: 语法： background-position : length || length background-position : position || position 参数： length : 百分数 | 由浮点数字和单位...
html + css 图文滑动
m0_53753920的博客
03-24 128
图片+文字沿着浏览器滚动。
html如何实现图片左右滑动效果,HTML+CSS入门 如何实现图片(image) 左右滑动
热门推荐
weixin_35772595的博客
06-03 1万+
本篇教程介绍了HTML+CSS入门 如何实现图片(image) 左右滑动，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<1、需求需要用简单动画的形式将一组图片进行展示，图片数量不固定2、效果如下:3、思路说到动画，首先想到使用-webkit-transition:;因为这个最简单好用,首先将图片都放在左侧，然后根据图片数量计算每个图片的左边距，这样就可以依次排列了。然后就...
web前端炫酷实用的HTML5应用和jQuery插件
weixin_33985679的博客
06-10 437
又开始了新的一天，我们也将继续为大家分享许多优秀的HTML5应用和jQuery插件，作为前端开发者来说，这些资源可以帮助你在项目开发上派上用场。下面一起来看看这些炫酷而实用的HTML5应用和jQuery插件吧。 1、jQuery/CSS3图片洗牌切换动画特效 这是一款基于jQuery和CSS3的图片动画特效，该图片动画是洗牌的效果，我们只需点击切换按钮，即可一张张切换图片。另外，如果你长按住按...
html做点击或自动滚动图片,JS实现的点击按钮图片上下滚动效果示例
weixin_30341445的博客
06-03 907
本文实例讲述了JS实现的点击按钮图片上下滚动效果。分享给大家供大家参考，具体如下：Title*{margin: 0;padding:0;list-style: none;}.big{width: 200px;height: 200px;margin:100px auto;}ul{width: 100px;height: 100px;border: 1px solid black;position:...
从DDCTF2020-拼图题,学习如何做拼图题
qq_36495104的博客
09-07 1575
题目下载 链接：https://pan.baidu.com/s/1BBQw9mOxnrmPm4o68lEpEQ 提取码：i7hm 拿到题目，给了一张图片demo.jpg和一个压缩包，压缩包里为6400个小图片，这6400个小图片是将demo.jpg切割得来的，而flag就在其中几块小图片上。如何找到这几张图片并把它们拼在一起得到flag。 我这里是利用python的CV2库的图像匹配算法，由于修改原图，将flag写入到图片上会造成小图片与原图上相应位置的图片匹配度降低，当匹配度低于某个阈值时，可认为是将.
CSS3实现横向展示图片滑动展示效果(转载)
05-27
好的，下面是实现横向展示图片滑动展示效果的CSS3代码： HTML结构： ``` <img src="image3.jpg" alt=""> ``` CSS3样式： ``` .slider { width: 100%; overflow: hidden; } .slider-inner { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值