先看大图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Sliding Image Panels with CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Sliding Image Panels with CSS3" />
<meta name="keywords" content="sliding, background-image, css3, panel, images, slider" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
</head>
<body>
<div class="container">
<header>
<h1>Sliding Image Panels <span>with CSS3</span></h1>
<p class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
</p>
</header>
<section class="cr-container">
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
<label for="select-img-1" class="cr-label-img-1">1</label>
<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
<label for="select-img-2" class="cr-label-img-2">2</label>
<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
<label for="select-img-3" class="cr-label-img-3">3</label>
<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
<label for="select-img-4" class="cr-label-img-4">4</label>
<div class="clr"></div>
<div class="cr-bgimg">
<div>
<span>Slice 1 - Image 1</span>
<span>Slice 1 - Image 2</span>
<span>Slice 1 - Image 3</span>
<span>Slice 1 - Image 4</span>
</div>
<div>
<span>Slice 2 - Image 1</span>
<span>Slice 2 - Image 2</span>
<span>Slice 2 - Image 3</span>
<span>Slice 2 - Image 4</span>
</div>
<div>
<span>Slice 3 - Image 1</span>
<span>Slice 3 - Image 2</span>
<span>Slice 3 - Image 3</span>
<span>Slice 3 - Image 4</span>
</div>
<div>
<span>Slice 4 - Image 1</span>
<span>Slice 4 - Image 2</span>
<span>Slice 4 - Image 3</span>
<span>Slice 4 - Image 4</span>
</div>
</div>
<div class="cr-titles">
<h3><span>Serendipity</span><span>What you've been dreaming of</span></h3>
<h3><span>Adventure</span><span>Where the fun begins</span></h3>
<h3><span>Nature</span><span>Unforgettable eperiences</span></h3>
<h3><span>Serenity</span><span>When silence touches nature</span></h3>
</div>
</section>
</div>
</body>
</html>
.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: 100%;
position: relative;
float: left;
overflow: hidden;
background-repeat: no-repeat;
}
.cr-bgimg div span{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: -150px;
z-index: 2;
text-indent: -9000px;
}
.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;
}
}
更多内容 请参考我的个人博客 http://ismartstudio.com/
相关推荐
车库和车库 CFD 模型 CFD 分析可用于分析模型。
henn-produktfolder-thermalmanagement-2024
39 Android源代码定时情景模式切换.zip
基于单 神经 元PID控制器的四旋 翼 飞 行 器 航 迹控制.pdf
内容概要：本文详细介绍了如何使用西门子S7-200 SMART PLC与三台台达MS300变频器进行Modbus RTU通讯的具体步骤和技术要点。首先，文章强调了正确的硬件连接方法，包括PLC与变频器之间的485总线连接以及终端电阻的设置。接着，深入讲解了变频器的关键参数配置，确保通讯稳定可靠。然后，展示了核心程序的设计思路，特别是轮询机制的应用，通过定时中断实现对三台变频器的状态监测和控制。此外，还提供了触摸屏的配置方法，使操作更加直观便捷。最后，分享了一些常见的调试经验和避坑指南，帮助解决实际应用中可能遇到的问题。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是对PLC与变频器通讯感兴趣的读者。 使用场景及目标：适用于需要将多台变频器集成到PLC控制系统中的工程项目，旨在提高系统的稳定性和可靠性，同时降低维护成本。 其他说明：文中提供的代码片段和配置建议均基于作者的实际经验，具有较高的实用价值。对于初学者来说，建议先理解基本概念再逐步深入实践。
文档支持目录章节跳转同时还支持阅读器左侧大纲显示和章节快速定位，文档内容完整、条理清晰。文档内所有文字、图表、函数、目录等元素均显示正常，无任何异常情况，敬请您放心查阅与使用。文档仅供学习参考，请勿用作商业用途。 Rust 以内存安全、零成本抽象和并发高效的特性，重塑编程体验。无需垃圾回收，却能通过所有权与借用检查机制杜绝空指针、数据竞争等隐患。从底层系统开发到 Web 服务构建，从物联网设备到高性能区块链，它凭借出色的性能和可靠性，成为开发者的全能利器。拥抱 Rust，解锁高效、安全编程新境界！
互联网大厂裁员背后的经济规律与增长天花板.mp4
2025年交换原理与技术.zip
内容概要：本文详细介绍了基于PLC（可编程逻辑控制器）的智能农业温室大棚控制系统的各个方面。主要内容涵盖IO分配、梯形图程序编写、接线图绘制和组态画面设计。通过合理的IO分配，PLC能够准确获取环境数据并控制相关设备；梯形图程序实现了对温度、湿度等环境因素的自动化控制；接线图确保了硬件连接的准确性；组态画面提供了用户友好的操作界面。此外，还分享了一些实际应用场景和技术细节，如温度控制梯形图实战、接线冷知识、组态画面设计技巧以及调试现场的经验。 适合人群：从事农业自动化、工业控制领域的工程师和技术人员，特别是对PLC编程和智能农业感兴趣的读者。 使用场景及目标：适用于希望提高农业生产效率和智能化水平的农场主和农业企业。通过引入PLC控制系统，可以实现对温室环境的精准控制，减少人工干预，提升作物产量和质量。 其他说明：文中不仅提供了理论知识，还包括了许多实践经验，帮助读者更好地理解和应用PLC技术于智能农业中。
基于TypeScript+three.js 实现的三维地质模型剖切，以及剖面的补充+源码+项目文档，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用，详情见md文档 基于TypeScript+three.js 实现的三维地质模型剖切，以及剖面的补充+源码+项目文档，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用，详情见md文档~ 基于TypeScript+three.js 实现的三维地质模型剖切，以及剖面的补充+源码+项目文档，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用，详情见md文档 基于TypeScript+three.js 实现的三维地质模型剖切，以及剖面的补充+源码+项目文档，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用，详情见md文档 基于TypeScript+three.js 实现的三维地质模型剖切，以及剖面的补充+源码+项目文档，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用，详情见md文档
内容概要：本文详细介绍了基于三菱FX3U PLC和MCGS组态软件构建的四皮带运输机控制系统。首先阐述了系统的IO分配规则，强调了关键输入输出信号的选择依据及其重要性。接着深入解析了梯形图编程技巧，展示了如何通过定时器、比较器等指令实现皮带的顺序启动和速度同步控制。随后探讨了MCGS组态界面的设计，包括动态皮带模拟、报警提示以及历史数据记录等功能。最后分享了一些常见故障处理经验和系统优化方法，如合理的接线方式、滤波处理和联锁逻辑设计。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是对PLC编程和组态软件有一定了解的人群。 使用场景及目标：适用于需要设计和维护复杂皮带传输系统的工厂环境，旨在提高生产效率并确保设备安全可靠运行。 其他说明：文中提供了大量实际案例和调试经验，有助于读者更好地理解和掌握相关技术和最佳实践。
详细介绍及样例数据：https://blog.csdn.net/T0620514/article/details/147722861
文档支持目录章节跳转同时还支持阅读器左侧大纲显示和章节快速定位，文档内容完整、条理清晰。文档内所有文字、图表、函数、目录等元素均显示正常，无任何异常情况，敬请您放心查阅与使用。文档仅供学习参考，请勿用作商业用途。 编译闪电般迅速，并发性能卓越，部署轻松简单！Go 语言以极简设计理念和出色工程性能，成为云原生时代的首选编程语言。从 Docker 到 Kubernetes，全球顶尖科技企业都在采用 Go。点击了解 Go 语言的核心优势、实战窍门和未来走向，开启高效编程的全新体验！
基于NB-IoT的智能渔业养殖综合控制系统设计.pdf
内容概要：本文详细介绍了利用MCGS通用监控系统和西门子S7-300 PLC实现饮料灌装生产流水线的自动化控制方法。首先阐述了IO分配的具体规则，明确各输入输出端口的功能及其所连接的外部设备；接着展示了梯形图程序的设计思路，解释了启动停止控制、传送带控制和灌装控制三个关键环节的工作流程；然后描述了接线图原理图的内容，说明了PLC与外部设备间的物理连接方式；最后讲解了MCGS组态画面的应用，强调了其在人机交互方面的作用。通过这些内容，全面揭示了如何构建一套稳定高效的饮料灌装生产系统。 适合人群：从事工业自动化领域的工程师和技术人员，尤其是对PLC编程及MCGS组态有一定了解的专业人士。 使用场景及目标：适用于需要优化现有饮料灌装生产线的企业，旨在提高生产效率、降低人工成本的同时保证产品质量的一致性和稳定性。通过对文中介绍的技术手段的学习和应用，可以更好地理解和掌握现代工业自动化控制系统的构建方法。 其他说明：文中不仅提供了理论性的指导，还有具体的实例分析，如针对可能出现的问题提出解决方案，使得读者能够在实践中灵活运用所学知识。此外，还提到了一些调试经验和技巧，有助于解决实际工作中遇到的各种挑战。
文档支持目录章节跳转同时还支持阅读器左侧大纲显示和章节快速定位，文档内容完整、条理清晰。文档内所有文字、图表、函数、目录等元素均显示正常，无任何异常情况，敬请您放心查阅与使用。文档仅供学习参考，请勿用作商业用途。 编译闪电般迅速，并发性能卓越，部署轻松简单！Go 语言以极简设计理念和出色工程性能，成为云原生时代的首选编程语言。从 Docker 到 Kubernetes，全球顶尖科技企业都在采用 Go。点击了解 Go 语言的核心优势、实战窍门和未来走向，开启高效编程的全新体验！
内容概要：本文详细介绍了使用PyTorch实现UNet架构进行皮肤病分割的方法和技术要点。首先讨论了数据准备，包括图像尺寸统一、数据增强以及归一化处理。接着深入探讨了UNet模型的具体实现，包括双卷积块、跳跃连接、上采样和下采样的设计。文中还特别强调了损失函数的选择，推荐使用Dice Loss来应对小目标分割问题，并提出了混合损失函数以提高模型稳定性。此外，文章还涉及了训练过程中的一些注意事项，如内存优化、类别不平衡处理以及后处理方法，如形态学开运算和阈值处理。最终，该系统在ISIC2018数据集上达到了约89%的Dice系数。 适合人群：具备一定深度学习基础的研究人员和开发者，尤其是对医学影像处理感兴趣的从业者。 使用场景及目标：适用于需要精确分割皮肤病灶的应用场景，如辅助诊断工具的开发。主要目标是提高皮肤病灶分割的准确性，减少人工标注的工作量并提升诊断效率。 其他说明：文章提供了详细的代码片段和实践经验分享，帮助读者更好地理解和应用UNet模型。同时，作者指出实际部署时需要注意模型对毛发等干扰因素的敏感性，并提出了一些改进措施。
实验室智能监控系统的实现.pdf
文档支持目录章节跳转同时还支持阅读器左侧大纲显示和章节快速定位，文档内容完整、条理清晰。文档内所有文字、图表、函数、目录等元素均显示正常，无任何异常情况，敬请您放心查阅与使用。文档仅供学习参考，请勿用作商业用途。 编译闪电般迅速，并发性能卓越，部署轻松简单！Go 语言以极简设计理念和出色工程性能，成为云原生时代的首选编程语言。从 Docker 到 Kubernetes，全球顶尖科技企业都在采用 Go。点击了解 Go 语言的核心优势、实战窍门和未来走向，开启高效编程的全新体验！