故宫网页设计与制作HTML代码

嶽673

已于 2023-06-18 10:32:38 修改

阅读量495

点赞数

分类专栏：网页设计与制作文章标签： html 前端

于 2023-06-18 01:01:28 首次发布

本文链接：https://blog.csdn.net/qq_62929511/article/details/131266796

版权

这段代码展示了用于故宫网页的一个响应式内容滑动组件，采用CSS动画实现图片的左右滑动效果，同时包含了页面加载时的加载指示器样式和滑块控制按钮的样式定义。代码还考虑了不同屏幕尺寸下的显示优化，确保在移动设备上也能有良好的用户体验。

摘要由CSDN通过智能技术生成

故宫网页演示

页面跳转，文字浮动代码：

/**
*
* slippry v1.3.1 - Responsive content slider for jQuery
* http://slippry.com
*
* Authors: Lukas Jakob Hafner - @saftsaak
* Thomas Hurd - @SeenNotHurd
*
* Copyright 2015, booncon oy - http://booncon.com
*
*
* Released under the MIT license - http://opensource.org/licenses/MIT
*/

/* kenBurns animations, very basic */

@-webkit-keyframes left-right {
   0% {
       -moz-transform: translateY(-20%) translateX(-10%);
       -ms-transform: translateY(-20%) translateX(-10%);
       -webkit-transform: translateY(-20%) translateX(-10%);
       transform: translateY(-20%) translateX(-10%);
   }
   100% {
       -moz-transform: translateY(0%) translateX(10%);
       -ms-transform: translateY(0%) translateX(10%);
       -webkit-transform: translateY(0%) translateX(10%);
       transform: translateY(0%) translateX(10%);
   }
}

@-moz-keyframes left-right {
   0% {
       -moz-transform: translateY(-20%) translateX(-10%);
       -ms-transform: translateY(-20%) translateX(-10%);
       -webkit-transform: translateY(-20%) translateX(-10%);
       transform: translateY(-20%) translateX(-10%);
   }
   100% {
       -moz-transform: translateY(0%) translateX(10%);
       -ms-transform: translateY(0%) translateX(10%);
       -webkit-transform: translateY(0%) translateX(10%);
       transform: translateY(0%) translateX(10%);
   }
}

@-ms-keyframes left-right {
   0% {
       -moz-transform: translateY(-20%) translateX(-10%);
       -ms-transform: translateY(-20%) translateX(-10%);
       -webkit-transform: translateY(-20%) translateX(-10%);
       transform: translateY(-20%) translateX(-10%);
   }
   100% {
       -moz-transform: translateY(0%) translateX(10%);
       -ms-transform: translateY(0%) translateX(10%);
       -webkit-transform: translateY(0%) translateX(10%);
       transform: translateY(0%) translateX(10%);
   }
}

@keyframes left-right {
   0% {
       -moz-transform: translateY(-20%) translateX(-10%);
       -ms-transform: translateY(-20%) translateX(-10%);
       -webkit-transform: translateY(-20%) translateX(-10%);
       transform: translateY(-20%) translateX(-10%);
   }
   100% {
       -moz-transform: translateY(0%) translateX(10%);
       -ms-transform: translateY(0%) translateX(10%);
       -webkit-transform: translateY(0%) translateX(10%);
       transform: translateY(0%) translateX(10%);
   }
}

@-webkit-keyframes right-left {
   0% {
       -moz-transform: translateY(0%) translateX(10%);
       -ms-transform: translateY(0%) translateX(10%);
       -webkit-transform: translateY(0%) translateX(10%);
       transform: translateY(0%) translateX(10%);
   }
   100% {
       -moz-transform: translateY(-20%) translateX(-10%);
       -ms-transform: translateY(-20%) translateX(-10%);
       -webkit-transform: translateY(-20%) translateX(-10%);
       transform: translateY(-20%) translateX(-10%);
   }
}

@-moz-keyframes right-left {
   0% {
       -moz-transform: translateY(0%) translateX(10%);
       -ms-transform: translateY(0%) translateX(10%);
       -webkit-transform: translateY(0%) translateX(10%);
       transform: translateY(0%) translateX(10%);
   }
   100% {
       -moz-transform: translateY(-20%) translateX(-10%);
       -ms-transform: translateY(-20%) translateX(-10%);
       -webkit-transform: translateY(-20%) translateX(-10%);
       transform: translateY(-20%) translateX(-10%);
   }
}

@-ms-keyframes right-left {
   0% {
       -moz-transform: translateY(0%) translateX(10%);
       -ms-transform: translateY(0%) translateX(10%);
       -webkit-transform: translateY(0%) translateX(10%);
       transform: translateY(0%) translateX(10%);
   }
   100% {
       -moz-transform: translateY(-20%) translateX(-10%);
       -ms-transform: translateY(-20%) translateX(-10%);
       -webkit-transform: translateY(-20%) translateX(-10%);
       transform: translateY(-20%) translateX(-10%);
   }
}

@keyframes right-left {
   0% {
       -moz-transform: translateY(0%) translateX(10%);
       -ms-transform: translateY(0%) translateX(10%);
       -webkit-transform: translateY(0%) translateX(10%);
       transform: translateY(0%) translateX(10%);
   }
   100% {
       -moz-transform: translateY(-20%) translateX(-10%);
       -ms-transform: translateY(-20%) translateX(-10%);
       -webkit-transform: translateY(-20%) translateX(-10%);
       transform: translateY(-20%) translateX(-10%);
   }
}

/* added to the original element calling slippry */

.sy-box.sy-loading {
   background: url("../images/sy-loader.gif") 50% 50% no-repeat;
   -moz-background-size: 32px;
   -o-background-size: 32px;
   -webkit-background-size: 32px;
   background-size: 32px;
   min-height: 40px;
}

.sy-box.sy-loading .sy-slides-wrap,
.sy-box.sy-loading .sy-pager {
visibility: hidden;
}

/* element that wraps the slides */

.sy-slides-wrap {
   position: relative;
   height: 100%;
   width: 100%;
}

.sy-slides-wrap:hover .sy-controls {
display: block;
}

/* element that crops the visible area to the slides */

.sy-slides-crop {
   height: 100%;
   width: 100%;
   position: absolute;
   overflow: hidden;
}

/* list containing the slides */

.sy-list {
   width: 100%;
   height: 100%;
   list-style: none;
   margin: 0;
   padding: 0;
   position: absolute;
}

.sy-list.horizontal {
   -moz-transition: left ease;
   -o-transition: left ease;
   -webkit-transition: left ease;
   transition: left ease;
}

.sy-list.vertical {
   -moz-transition: top ease;
   -o-transition: top ease;
   -webkit-transition: top ease;
   transition: top ease;
}

/* single slide */

.sy-slide {
   position: absolute;
   width: 100%;
   z-index: 2;
}

.sy-slide.kenburns {
width: 140%;
left: -20%;
}

.sy-slide.kenburns.useCSS {
   -moz-transition-property: opacity;
   -o-transition-property: opacity;
   -webkit-transition-property: opacity;
   transition-property: opacity;
}

.sy-slide.kenburns.useCSS.sy-ken:nth-child(1n) {
   -webkit-animation-name: left-right;
   -webkit-animation-fill-mode: forwards;
   -moz-animation-name: left-right;
   -moz-animation-fill-mode: forwards;
   -o-animation-name: left-right;
   -o-animation-fill-mode: forwards;
   animation-name: left-right;
   animation-fill-mode: