css 滑块tab动画_CSS3动画照片滑块

最新推荐文章于 2024-03-04 12:41:44 发布
最新推荐文章于 2024-03-04 12:41:44 发布
阅读量670 收藏
点赞数
文章标签： html less css js css3 ViewUI
原文链接：https://www.script-tutorials.com/css3-animated-photo-slider/
版权
这篇博客介绍了如何使用CSS3创建一个3D动画照片滑块。通过简单的HTML结构和CSS规则，将实现一个在Chrome和Safari浏览器中运行的3D幻灯片效果。文章包括HTML和CSS代码示例，并提供了现场演示和下载链接。
摘要由CSDN通过智能技术生成

css 滑块tab动画

CSS3 Animated Photo Slider
CSS3 Animated Photo Slider

CSS3 Animated Photo Slider Today I have prepared new great CSS3 demonstration. This is 3D slideshow where I have used WebKit CSS 3D transforms. On the demo you will see a free-floating 3D object with photos. Hint – you have to use Chrome or Safari browser to see all these delights.

CSS3动画照片滑块今天，我准备了新CSS3演示。 这是3D幻灯片，其中我使用了WebKit CSS 3D变换。 在演示中，您将看到带有照片的自由浮动3D对象。 提示–您必须使用Chrome或Safari浏览器才能看到所有这些乐趣。

现场演示
下载结果

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

First, lets create the main HTML markup. As you can see – the structure is quite minimal as usual and contains only several DIV and IMG elements.

首先，让我们创建主要HTML标记。 如您所见–该结构与往常一样非常小，仅包含几个DIV和IMG元素。

index.html (index.html)

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Animated Photo Slider | Script Tutorials</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/slider.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <h2>CSS3 Animated Photo Slider</h2>
            <a href="https://www.script-tutorials.com/css3-animated-photo-slider/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="slider">
            <div class="x_rot">
                <div class="y_rot">
                    <div id="i1">
                        <img src="images/1.jpg" />
                    </div>
                    <div id="i2">
                        <img src="images/2.jpg" />
                    </div>
                    <div id="i3">
                        <img src="images/3.jpg" />
                    </div>
                    <div id="i4">
                        <img src="images/4.jpg" />
                    </div>
                    <div id="i5">
                        <img src="images/5.jpg" />
                    </div>
                    <div id="i6">
                        <img src="images/6.jpg" />
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>


<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>CSS3 Animated Photo Slider | Script Tutorials</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <link href="css/slider.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <header>
            <h2>CSS3 Animated Photo Slider</h2>
            <a href="https://www.script-tutorials.com/css3-animated-photo-slider/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="slider">
            <div class="x_rot">
                <div class="y_rot">
                    <div id="i1">
                        <img src="images/1.jpg" />
                    </div>
                    <div id="i2">
                        <img src="images/2.jpg" />
                    </div>
                    <div id="i3">
                        <img src="images/3.jpg" />
                    </div>
                    <div id="i4">
                        <img src="images/4.jpg" />
                    </div>
                    <div id="i5">
                        <img src="images/5.jpg" />
                    </div>
                    <div id="i6">
                        <img src="images/6.jpg" />
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

步骤2. CSS (Step 2. CSS)

Now, there are the CSS rules that will transform our markup into a great animated photo slider. I have already commented the CSS below, so you can see the major parts of this file.

现在，有一些CSS规则可以将我们的标记转换为精美的动画照片滑块。 我已经在下面评论了CSS，因此您可以看到此文件的主要部分。

css / slider.css (css/slider.css)

/* Animations with keyframes */
@-webkit-keyframes x_rot {
    0%    { -webkit-transform: rotateX(-30deg); }
    50%   { -webkit-transform: rotateX(30deg); }
    100%  { -webkit-transform: rotateX(-30deg); }
}
@-webkit-keyframes y_rot {
    0%    { -webkit-transform: rotateY(0deg); }
    50%   { -webkit-transform: rotateY(180deg); }
    100%  { -webkit-transform: rotateY(360deg); }
}
/* main styles */
.slider {
    margin: 250px auto;
    -webkit-perspective: 1000; /* setup perspective to parent */
}
.x_rot {
    -webkit-transform-style: preserve-3d;
    -webkit-animation-name: x_rot; /* setup custom animations */
    -webkit-animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
}
.y_rot {
    -webkit-transform-style: preserve-3d;
    -webkit-animation-name: y_rot; /* setup custom animations */
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
.y_rot div {
    color: rgba(0,0,0,0.9);
    height: 235px;
    left: 300px;
    opacity: 0.8;
    position: absolute;
    width: 235px;
    -webkit-border-radius: 15px;
    -webkit-transition: .3s;
}
.y_rot div#i1 {
    -webkit-transform: rotateY(0deg) translateZ(200px);
}
.y_rot div#i2 {
    -webkit-transform: rotateY(60deg) translateZ(200px);
}
.y_rot div#i3 {
    -webkit-transform: rotateY(120deg) translateZ(200px);
}
.y_rot div#i4 {
    -webkit-transform: rotateY(180deg) translateZ(200px);
}
.y_rot div#i5 {
    -webkit-transform: rotateY(240deg) translateZ(200px);
}
.y_rot div#i6 {
    -webkit-transform: rotateY(300deg) translateZ(200px);
}
.y_rot div img {
    height:235px;
    width:235px;
    -webkit-border-radius: 15px;
    -webkit-transition: .3s;
}
/* onhover effect */
.y_rot div#i1:hover,
.y_rot div#i2:hover,
.y_rot div#i3:hover,
.y_rot div#i4:hover,
.y_rot div#i5:hover,
.y_rot div#i6:hover {
    opacity: 1;
}
.y_rot div#i1:hover img,
.y_rot div#i2:hover img,
.y_rot div#i3:hover img,
.y_rot div#i4:hover img,
.y_rot div#i5:hover img,
.y_rot div#i6:hover  img{
    height:335px;
    width:335px;
    margin-left:-50px;
    margin-top:-50px;
}
/* pause main animation onhover */
.x_rot:hover {
    -webkit-animation-play-state: paused;
}
.y_rot:hover {
    -webkit-animation-play-state: paused;
}


/* Animations with keyframes */
@-webkit-keyframes x_rot {
    0%    { -webkit-transform: rotateX(-30deg); }
    50%   { -webkit-transform: rotateX(30deg); }
    100%  { -webkit-transform: rotateX(-30deg); }
}
@-webkit-keyframes y_rot {
    0%    { -webkit-transform: rotateY(0deg); }
    50%   { -webkit-transform: rotateY(180deg); }
    100%  { -webkit-transform: rotateY(360deg); }
}
/* main styles */
.slider {
    margin: 250px auto;
    -webkit-perspective: 1000; /* setup perspective to parent */
}
.x_rot {
    -webkit-transform-style: preserve-3d;
    -webkit-animation-name: x_rot; /* setup custom animations */
    -webkit-animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
}
.y_rot {
    -webkit-transform-style: preserve-3d;
    -webkit-animation-name: y_rot; /* setup custom animations */
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
.y_rot div {
    color: rgba(0,0,0,0.9);
    height: 235px;
    left: 300px;
    opacity: 0.8;
    position: absolute;
    width: 235px;
    -webkit-border-radius: 15px;
    -webkit-transition: .3s;
}
.y_rot div#i1 {
    -webkit-transform: rotateY(0deg) translateZ(200px);
}
.y_rot div#i2 {
    -webkit-transform: rotateY(60deg) translateZ(200px);
}
.y_rot div#i3 {
    -webkit-transform: rotateY(120deg) translateZ(200px);
}
.y_rot div#i4 {
    -webkit-transform: rotateY(180deg) translateZ(200px);
}
.y_rot div#i5 {
    -webkit-transform: rotateY(240deg) translateZ(200px);
}
.y_rot div#i6 {
    -webkit-transform: rotateY(300deg) translateZ(200px);
}
.y_rot div img {
    height:235px;
    width:235px;
    -webkit-border-radius: 15px;
    -webkit-transition: .3s;
}
/* onhover effect */
.y_rot div#i1:hover,
.y_rot div#i2:hover,
.y_rot div#i3:hover,
.y_rot div#i4:hover,
.y_rot div#i5:hover,
.y_rot div#i6:hover {
    opacity: 1;
}
.y_rot div#i1:hover img,
.y_rot div#i2:hover img,
.y_rot div#i3:hover img,
.y_rot div#i4:hover img,
.y_rot div#i5:hover img,
.y_rot div#i6:hover  img{
    height:335px;
    width:335px;
    margin-left:-50px;
    margin-top:-50px;
}
/* pause main animation onhover */
.x_rot:hover {
    -webkit-animation-play-state: paused;
}
.y_rot:hover {
    -webkit-animation-play-state: paused;
}

Today, I omit styles of page layout (layout.css). This is not important right now. File will available in package.

今天，我省略了页面布局样式(layout.css)。 现在这并不重要。 文件将在包装中提供。

现场演示
下载结果

结论 (Conclusion)

Today we have made another great CSS3 photo slideshow. Just one little moment, as we have used CSS3 animation with 3D Transforms – this is supported only in Chrome and Safari browsers For more information – look here. Lets hope that coming versions of FF will support this too. Happy Holidays, and, you are welcome to leave your comments here!

今天，我们制作了另一个很棒CSS3照片幻灯片。 只需片刻，因为我们将CSS3动画与3D变换一起使用了-只有Chrome和Safari浏览器才支持此功能 。 希望FF的后续版本也能支持这一点。 节日快乐，也欢迎您在这里发表评论！

翻译自: https://www.script-tutorials.com/css3-animated-photo-slider/

css 滑块tab动画

cuken7684698822
关注
纯 css js 实现 tab 切换底部滑块跟随滑动效果
遗忘了的自己
05-08 1298
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tab 切换滑块跟随</title> <style> body { padding: 0; margin: 0; } .bar { width: 42px; border-bottom: 2px solid #489C9
tab动画 vue_Vue实现Tab标签路由效果并用Animate.css做转场动画效果的代码
weixin_39893274的博客
12-24 445
类似于浏览器窗口一样的路由切换逻辑，看着还是挺高大上的，本以为有很多高级的玩意儿，奈何复杂的东西总是由简单的东西拼接而成的，这个功能也不例外。本篇文章主要描述两个问题：如何实现这种Tab标签页的路由效果 如何为路由切换添加转场动画。该功能的开发主要使用到 AntDesignVue 组件库的Tab组件和 Animate.css效果如下：Tab标签页实现首先是该组件的模板部分， ContextMenu...
【css js vue】超详细！！实现 tab菜单 动态滑动效果
最新发布
qq_21138747的博客
03-04 718
重点是，需要用到CSS的positon:absolute为滑动门固定位置，每切换一次菜单，都会调整div的左边的间距。比如当我点击第一个菜单，这个滑动门的左间距是100px，点击第二个菜单，间距变成了200px，依此类推。需要把 滑动门的z-index设置的靠屏幕里，flexbox的z-index设置的靠屏幕外。上面这是我做的效果图，在查找了一些资料之后，发现实现起来并没有特别的麻烦，但是对于我这种CSS学的不是很好的人，前期看起来还是有点懵的，所以写篇文章记录下我最终实现的效果。
css 滑块开关动画_制作CSS动画图像滑块
cungui5726的博客
08-19 788
css 滑块开关动画Slider galleries have been around a long time, but until very recently they have almost exclusively been coded using JavaScript. CSS now gives us the ability to create the same effect native...
用CSS写的Tab滑动轮
10-24
纯属个人爱好,广泛被大众所采用,不得不相信自己是天才!!!!
CSS 实例系列 - 01 - Tab 滑动门
weixin_41806099的博客
01-12 2351
Hello 小伙伴们早上、中午、下午、晚上和深夜好，这里是 jsliang~本 CSS 系列文章：主推学以致用。结合面试题和工作实例，让小伙伴们深入体验 61 个工作常见的 CSS 属性和各种 CSS 知识。主推纯 CSS。尽可能使用 HTML + CSS 完成学习目的，但仍然有 “一小部分” 功能需要用到 JavaScript 知识，适合新人学习 + 大佬复习。如果文章在一些细节上没写清楚或者误...
JS+CSS实现滑动切换tab菜单效果
10-23
3. **CSS样式设置**： - 为了实现滑动效果，通常会设置菜单项和内容区域的初始显示状态。例如，菜单项默认不可见，当鼠标滑过时才变为可见。 - 利用CSS的:hover伪类选择器也可以实现类似的鼠标滑过效果。 - 使用...
HTML5+CSS3实现Tabs选项卡特效特效代码
03-20
特别是CSS3的过渡（transition）和动画（animation）属性，它们是实现下划线跟随动画的关键。通过定义时间和关键帧，可以创建出平滑的动画效果，使选项卡在切换时具有动态美感。 在具体实现过程中，HTML5可能会创建...
CSS3华丽的Tab菜单 带小图标动画
08-23
之前我们分享过一款非常出色的CSS3 Tab菜单HTML5 SVG Tab滑块菜单，结合SVG...今天我们要再来分享一款基于CSS3的华丽Tab菜单，这款Tab菜单的菜单项是一个个小图标，鼠标滑过时，菜单项展示对应文字，并出现展开的动画。
CSS3 3D滑块进度条拖动动画特效.zip
07-04
CSS3 3D滑块进度条拖动动画特效是一款基于html5 css3绘制的可缩放的3D滑块进度条拖动效果。
css3实现的tab标签切换效果
01-09
css3实现的tab标签切换效果
用CSS实现Tab页切换效果的示例代码
01-19
最近切一个页面的时候涉及到了一个tab切换的部分，因为不想用js想着能不能用纯CSS的选择器来实现切换效果。搜了一下大致有下面三种写法。 1、利用 :hover 选择器 缺点：只有鼠标在元素上面的时候才有效果，无法实现选中和默认显示某一个的效果 2、利用 a标签的锚点 + :target选择器 缺点：因为锚点会将选中的元素滚动到页面最上面，每次切换位置都要移动，体验极差。 3、利用 label和radio 的绑定关系和 radio选中时的:checked 来实现效果 缺点：HTML结构元素更复杂 经过实验发现第三种方法达到的效果最好。所以下面讲一下第三种实现的方法。 这种方法的写法不固定，我
html实现主题切换效果图,HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
weixin_36263314的博客
05-30 280
设计师给了一个 tab 切换的效果图。虽然是一个很小的功能，但是前端工程师在实现的时候还是有很多细节需要注意。我写了一个 demo 给大家参考。最终实现效果如下：为了 gif 动画能够展示细节，我将动画时间延长到了 3 秒代码分享地址：http://runjs.cn/detail/h2dqt3td实现思路间隔竖线，因为不是顶天立地的，所以不能用边框。我准备用伪元素实现。只有 3 个竖线，但是有 4...
CSS3滑块菜单
w1366352655的博客
12-05 290
CSS3滑块菜单 在线演示 本地下载 posted @ 2018-12-05 20:04 栖息地 阅读(...) 评论(...) 编辑 收藏
微信小程序自定义tabs切换，滑动动画
weixin_54828488的博客
02-06 3135
这里写自定义目录标题组件说明自定义组件js文件json文件wxml文件wxss文件如何使用最终效果不滚动横向滚动 组件说明 开发项目的时候想着把所有tabs切换的功能做成组件，方便调用 功能满足项目需求就行，没有做太多的功能。使用的时候可自己增加更多功能：例如：手势滑动切换等 组件代码非常简洁。 大致思路就是 1、调用组件的时候获取宽度并计算，然后把滑块的位置摆好 2、点击切换的时候将索引值更改，然后计算滑块位置并且计算滚动条的位置，超出屏幕宽度，将scrollLeft的值计算好，例如：点后面的tab，就滚
css：transition tab切换 动态滑动效果
sunluyi的博客
03-08 7874
<template> <view class="tab"> <view class="item" :class="{'ac':active == 1}" @click="active = 1">item1</view> <view class="item" :class="{'ac':active == 2}" @click="active = 2">item2</view> <view class="bg" :cl
学习总结——通过css设置上下滑出，左右滑出动画效果
热门推荐
u012439689的博客
04-07 1万+
【背景】小程序需求中涉及了一个actionsheet半屏菜单，和一个滚动时候需要隐藏一半的icon，所以要求添加从底部滑出，从右侧滑出的动画效果。需要从底部滑出的半屏菜单是带黑色遮罩的模态弹窗页面，需要从右侧滑出的是悬浮的icon，我们使用了uniapp的框架，所以模板部分写法和vue类似 【关键字】css的animation，我是文档的搬运工CSS animation 属性 【底部滑出】 模板部分——一般的模态窗会直接设置显示隐藏，但是需要底部滑出的动画效果，内容区域不能直接通过控制dom显示隐藏来
使用CSS3动画制作导航菜单
yuhaowen的博客
05-04 1923
使用CSS3动画制作导航菜单 1、使用定位属性把图片“赚”和“花”设置到相对应的位置上 2、使用animation属性给中间的“赚”和“花”图片设置动画，动画效果为鼠标移入“赚”图片的时候变为“赚积分”， 并且是从左到右缓慢展开的效 果 3、使用transition属性给右边的“论”图片设置动画，效果为鼠标移入旋转360° 效果展示 代码展示 <!DOCTYPE html> <html> <head> <meta charset="utf-8">
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1439
Document
微信表情图片CSS3旋转动画实现教程
资源摘要信息:"CSS3微信表情图片旋转动画" 知识点一：CSS3的基本概念 CSS3是层叠样式表（Cascading Style Sheets）的最新版本，它为网页设计带来了更多的样式和动画效果。CSS3在前一版本CSS2的基础上新增了多种选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值