CSS 如何创建一个旋转木马

旋转木马在互联网上是众所周知的。网络旋转木马是一种优雅的方式，可以将类似的材料组织到一个可触摸的地方，同时保留了宝贵的网站空间。它们被用来展示照片，提供产品，并吸引新的访问者的兴趣。但它们的效果如何呢？有许多反对旋转木马的论点，也有使用旋转木马提高性能的研究。但是，旋转木马如何影响网页的可用性？

在这篇文章中，我们将讨论旋转木马的基础知识以及如何使用HTML和CSS创建一个旋转木马。

什么是旋转木马

旋转木马是一种显示一系列旋转横幅/图像的幻灯片。旋转木马通常出现在网站的首页。它可以改善你的网站的外观。网络旋转木马，也被称为滑块、画廊和幻灯片，_ 允许你在一个单一的动态、” 滑动 “块中显示文本、图形、图像，甚至是视频。它们是一个很好的设计选择，可以将内容和概念分组，让你在特定的内容之间建立视觉联系。

因此，网络旋转木马是在电子商务网站上推广相关产品的理想选择，在设计组合中展示特色项目，甚至在房地产网站上循环播放房屋的内部和外部图片。然而，它们并不总是最好的选择。

许多设计师批评它们拖慢了加载时间，破坏了设计的流程。然而，就像任何与设计有关的东西一样，如果做得正确，网页旋转木马可以以一种使其更容易穿越的方式来划分内容。

如何制作一个网页旋转木马

在这里，我们将看到如何在不使用Bootstrap等框架的情况下制作一个简单的网页旋转木马。

需要遵循的步骤

使用HTML创建旋转木马的基本结构，其中包含图片。在下面的例子中，我们已经为旋转木马添加了4张图片。此外，还有4个按钮，点击后会显示相应的图片。
首先，创建一个作为容器的div元素，包括标题和 内容。
现在， content div包含两个部分– carousel内容 （包含书面部分，在整个过渡过程中保持固定）和 slideshow （包含移动部分，即4张图片和按钮）。
使用CSS来设计旋转木马的图片和按钮。保持幻灯片的相对位置。
使用CSS动画使旋转木马中的图片平滑过渡。

例子

下面的例子演示了一个包含4张图片和控制图片显示的按钮的旋转木马。这些图片在一个固定的时间间隔内显示。

<!DOCTYPE html>
<html>
<head>
   <title> Web Carousel </title>
   <style>
      * {
         box-sizing: border-box;
         margin: 10px;
         padding: 3px;
      }
      body {
         background-color: rgb(195, 225, 235);
      }
      .box {
         width: 600px;
         height: 400px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         margin: auto;
      }
      .title {
         padding: 10px 0 10px 0;
         position: absolute;
         top: 10px;
      }
      .content {
         position: relative;
         top: 10%;
      }
      .carousel-content {
         position: absolute;
         top: 50%;
         left: 45%;
         transform: translate(-40%, -40%);
         text-align: center;
         z-index: 50;
      }
      .carousel-title {
         font-size: 48px;
         color: black;
         margin-bottom: 1rem;
         font-family: Times New Roman;
      }
      .slideshow {
         position: relative;
         height: 100%;
         overflow: hidden;
      }
      .wrapper {
         display: flex;
         width: 400%;
         height: 100%;
         top: 10%;
         border-radius: 30%;
         position: relative;
         animation: motion 20s infinite;
      }
      .slide {
         width: 80%;
         height: 200%;
         border-radius: 30%;
      }
      .img {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }
      @keyframes motion {
         0% {left: 0;}
         10% {left: 0;}
         15% {left: -100%;}
         25% {left: -100%;}
         30% {left: -200%;}
         40% {left: -200%;}
         45% {left: -300%;}
         55% {left: -300%;}
         60% {left: -200%;}
         70% {left: -200%;}
         75% {left: -100%;}
         85% {left: -100%;}
         90% {left: 0%;}
      }
      .button {
         position: absolute;
         bottom: 3%;
         left: 50%;
         width: 1.3rem;
         height: 1.3rem;
         background-color: red;
         border-radius: 50%;
         border: 0.2rem solid #d38800;
         outline: none;
         cursor: pointer;
         transform: translateX(-50%);
         z-index: 70;
      }
      .button-1 {
         left: 20%;
      }
      .button-2 {
         left: 25%;
      }
      .button-3 {
         left: 30%;
      }
      .button-4 {
         left: 35%;
      }
      .button-1:focus~.wrapper {
         animation: none;
         left: 0%;
      }
      .button-2:focus~.wrapper {
         animation: none;
         left: -100%;
      }
      .button-3:focus~.wrapper {
         animation: none;
         left: -200%;
      }
      .button-4:focus~.wrapper {
         animation: none;
         left: -300%;
      }
      .button:focus {
         background-color: black;
      }
   </style>
</head>
<body>
   <div class= "box">
      <h1 class= "title"> Responsive Carousel using CSS </h1>
      <div class= "content">
         <div class= "carousel-content">
         </div>
         <div class= "slideshow">
            <button class= "button button-1"> </button>
            <button class= "button button-2"> </button>
            <button class= "button button-3"> </button>
            <button class= "button button-4"> </button>
            <div class= "wrapper">
               <div class= "slide">
                  <img class= "img" src= "https://www.tutorialspoint.com/static/images/simply-easy-learning.jpg">
               </div>
               <div class= "slide">
                  <img class= "img" src="https://wallpapercave.com/wp/wp2782600.jpg">
               </div>
               <div class= "slide">
                  <img class= "img" src="https://i.insider.com/5fd90e7ef773c90019ff1293?width=700">
               </div>
               <div class= "slide">
                  <img class= "img" src="https://wallpaperaccess.com/full/1164582.jpg">
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

CSS转换属性

要修改视觉格式化模型所使用的坐标空间，可以使用CSS中的变换属性。在这样做的时候，可以将倾斜、旋转和平移等效果应用到元素上。

语法

transform: none| transform-functions| initial| inherit;

Values

translate(x, y) – 这个函数定义了一个沿X和Y坐标的平移。
translate3d(x, y, z) – 这个函数提供了一个沿X、Y和Z坐标的平移。
initial – 将元素设置为其默认值。
inherit – 它采用其父元素的值。

CSS动画

CSS的动画属性允许我们在一定的时间间隔内改变一个元素的各种样式属性，使其具有动画效果。

动画的一些属性如下

Animation-name – 它使我们能够指定动画的名称，随后@keyframes会使用这个名称来指定该动画所要执行的CSS规则。
Animation-duration – 设置动画的时间长度
Animation-timing-function - 表示动画的速度曲线，也就是动画从一组CSS自定义属性变化到另一组的时间间隔。
Animation-delay – 在给定的时间间隔内对开始值进行延迟

@keyframes 用来指定在给定的时间间隔内需要在动画中执行哪些代码。这是通过说明动画中某些特定 “帧 “的CSS属性来完成的，百分比从0%（动画的开始）到100%（动画的结束）。

CSS 如何创建一个旋转木马

CSS 如何创建一个旋转木马

什么是旋转木马

如何制作一个网页旋转木马

需要遵循的步骤

例子

CSS转换属性

语法

Values

CSS动画

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

CSS 教程

回顶部