devbox
正经夜光杯
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

纯CSS简单案例合集（折扇效果，资料卡，定格轮播，菜单三角形）_纯css实现扇形菜单

作者：正经夜光杯 | 2024-07-19 20:36:12

赞

踩

纯css实现扇形菜单

目录

①折扇效果（2d动画）

 ②资料卡

 ③定格轮播（鼠标移上去会暂停）

度数，速度，颜色之类的可以自己再调整

效果图如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.     *{margin: 0;padding: 0;}
  11.     ul{list-style-type:none;}
  12.     ul{
  13.         margin: 10px auto;
  14.          width: 600px;
  15.          height: 400px;
  16.          border: 4px solid gray;
  17.          position: relative;    
  18.     }
  19.     li{
  20.         width: 50px;
  21.         height: 200px;
  22.         position: absolute;
  23.         left: 50%;
  24.         margin-left: -30px;
  25.         bottom: 30px;
  26.         text-align: center;
  27.         transform-origin: bottom center;
  28.         transition: all 3s linear;
  29.         border-radius: 5px;
  30.         box-shadow: 2px 2px 2px black;
  31.     }   
  32.     ul li:nth-child(1),ul li:nth-child(13){ 
  33.         background-color: purple;
  34.     }
  35.     ul li:nth-child(2),ul li:nth-child(12){ 
  36.         background-color:blueviolet;
  37.     }
  38.     ul li:nth-child(3),ul li:nth-child(11){ 
  39.         background-color:rgb(226, 43, 226);
  40.     }
  41.     ul li:nth-child(4),ul li:nth-child(10){ 
  42.         background-color:pink;
  43.     }
  44.     ul li:nth-child(5),ul li:nth-child(9){ 
  45.         background-color:rgb(233, 108, 129);
  46.     }
  47.     ul li:nth-child(6),ul li:nth-child(8){ 
  48.         background-color:rgb(228, 66, 93);
  49.     }
  50.     ul li:nth-child(7){ 
  51.         background-color:rgb(167, 49, 69);
  52.     }
  53.     ul:hover li:nth-child(13){
  54.     transform: rotate(-85deg);
  55.     }
  56.     ul:hover li:nth-child(12){
  57.     transform: rotate(-75deg);
  58.     }
  59.     ul:hover li:nth-child(11){
  60.     transform: rotate(-60deg);
  61.     }
  62.     ul:hover li:nth-child(10){
  63.     transform: rotate(-45deg);
  64.     }
  65.     ul:hover li:nth-child(9){
  66.     transform: rotate(-30deg);
  67.     }
  68.     ul:hover li:nth-child(8){
  69.     transform: rotate(-15deg);
  70.     }
  71.     ul:hover li:nth-child(6){
  72.     transform: rotate(15deg);
  73.     }
  74.     ul:hover li:nth-child(5){
  75.     transform: rotate(30deg);
  76.     }
  77.     ul:hover li:nth-child(4){
  78.     transform: rotate(45deg);
  79.     }
  80.     ul:hover li:nth-child(3){
  81.     transform: rotate(60deg);
  82.     }
  83.     ul:hover li:nth-child(2){
  84.     transform: rotate(75deg);
  85.     }
  86.     ul:hover li:nth-child(1){
  87.     transform: rotate(85deg);
  88.     }
  89.     </style>
  90. </head>
  91. <body>
  92.       <ul>
  93.           <li></li>
  94.           <li></li>
  95.           <li></li>
  96.           <li></li>
  97.           <li></li>
  98.           <li></li>
  99.           <li></li>
  100.           <li></li>
  101.           <li></li>
  102.           <li></li>
  103.           <li></li>
  104.           <li></li>
  105.           <li></li>
  106.       </ul>
  107. </body>
  108. </html>

 ②资料卡

  

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         img{
  14.             display: block;
  15.         }
  16.         .box{
  17.             width: 350px;
  18.             overflow: hidden;
  19.             margin: 0 auto;
  20.             position: relative;
  21.         }
  22.         .box img{
  23.             width: 100%;
  24.             transition: all 1s
  25.         }
  26.         .box:hover img{
  27.             transform: translateX(50px);
  28.             opacity: 0.5;            
  29.         }
  30.         .box h2{
  31.             position:absolute;
  32.             left: 50px;
  33.             top: 10px;
  34.             color: wheat;
  35.             transition: all 1s 0.3s;
  36.         }
  37.         .box:hover h2{
  38.             transform: translateX(100px);
  39.         }
  40.         .box p{
  41.             position: absolute;
  42.             left:50px;
  43.             width: 100px;
  44.             color: white;
  45.             background: rgb(108, 108, 190);
  46.         }
  47.         .box .p1{
  48.             top: 60px;
  49.             transform: translateY(300px);
  50.             transition: all 1s;
  51.         }
  52.         .box:hover .p1{
  53.             transform: translateY(0px);            
  54.         }
  55.         .box .p2{
  56.             top: 110px;
  57.             transform: translateY(400px);
  58.             transition: all 1s;
  59.         }
  60.         .box:hover .p2{
  61.             transform: translateY(0px);
  62.             
  63.         }
  64.         .box .p3{
  65.             top:160px;
  66.             transform: translateY(400px);
  67.             transition: all 1s;
  68.         }
  69.         .box:hover .p3{
  70.             transform: translateY(0px);         
  71.         }
  72.     </style>
  73. </head>
  74. <body>
  75.     <div class="box">
  76.         <img src="../tu/7.jpg" alt="">
  77.         <h2>aespa</h2>
  78.         <p class="p1">black manba</p>
  79.         <p class="p2">savage</p>
  80.         <p class="p3">forever</p>
  81.     </div>
  82. </body>
  83. </html>

 ③定格轮播（鼠标移上去会暂停）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <!-- 原理    一个大容器里面一个很长的盒子，盒子里装了浮动的图片，不断改变长盒子的位置实现轮播,图片可以再根据需要增删-->
  10.     <style>
  11.         * {
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  15.  
  16.         .container {
  17.             /* 固定高宽 */
  18.             width: 640px;
  19.             height: 300px;
  20.             margin: 0 auto;
  21.             overflow: hidden;
  22.         }
  23.  
  24.         .swiper img {
  25.             width: 640px;
  26.             height: 300px;
  27.         }
  28.  
  29.         .slider {
  30.             float: left;
  31.         }
  32.  
  33.         .swiper {
  34.             width: 5000px;
  35.             /* 只要大于图片加起来的宽度就行 */
  36.             animation: swipers 8s linear infinite;
  37.         }
  38.  
  39.         @keyframes swipers {
  40.  
  41.             /* 10,43,76实现图片定格*/
  42.             0% {
  43.                 transform: translateX(0);
  44.             }
  45.             10% {
  46.                 transform: translateX(-640px);
  47.             }
  48.             33% {
  49.                 transform: translateX(-640px);
  50.             }
  51.             43% {
  52.                 transform: translateX(-1280px);
  53.             }
  54.             66% {
  55.                 transform: translateX(-1280px);
  56.             }
  57.             76% {
  58.                 transform: translateX(-1920px);
  59.             }
  60.             100% {
  61.                 transform: translateX(-1920px);
  62.             }
  63.         }
  64.         .swiper:hover{
  65.             animation-play-state: paused;
  66.         }
  67.     </style>
  68. </head>
  69. <body>
  70.     <div class="container">
  71.         <div class="swiper">
  72.             <div class="slider">
  73.                 <img src="../tu/5.jpg" alt="">
  74.             </div>
  75.             <div class="slider">
  76.                 <img src="../tu/6.jpg" alt="">
  77.             </div>
  78.             <div class="slider">
  79.                 <img src="../tu/7.jpg" alt="">
  80.             </div>
  81.             <!-- 实现无缝轮播，第一张和最后一张图片一样 -->
  82.             <div class="slider">
  83.                 <img src="../tu/5.jpg" alt="">
  84.             </div>
  85.         </div>
  86.     </div>
  87. </body>
  88.  
  89. </html>

④三角形菜单栏

实现原理：先定义一个盒子，设置宽高，将border设置成不同的宽度和颜色

​​​​​​​

 

会出现以上效果 ，可以想象，当每个色彩栏中间的宽度不断缩小，就变成了三角形，当div的高宽变成0时，就变成了如图所示，将其他颜色改变为背景色是不可取的，如果背景色改变一眼就能看出，将其他改为transparent即可

效果图

 

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <style>
  7.         .box {
  8.             width: 100px;
  9.             height: 50px;
  10.             line-height: 50px;
  11.             text-align: center;
  12.             background: lightblue;
  13.             color: white;
  14.         }
  15.  
  16.         span {
  17.             width: 0;
  18.             height: 0;
  19.             display: inline-block;
  20.             border: 5px solid transparent;  /*  变三角形 */
  21.             border-top: 5px solid white;
  22.             position: relative;   /*给三角形一个固定位置变化*/
  23.             top: 2.5px;  
  24.             transition: 0.3s; /* 0.3s变化*/
  25.         }
  26.  
  27.         .box:hover span {
  28.             border: 5px solid transparent;/*  变三角形 */
  29.             border-bottom: 5px solid white;
  30.             position: relative;/*给三角形一个固定位置变化*/
  31.             top: -2px;
  32.         }
  33.     </style>
  34. </head>
  35.  
  36. <body>
  37.     <div class="box"> 导航
  38.         <span></span>
  39.     </div>
  40. </body>
  41.  
  42. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/正经夜光杯/article/detail/853382
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号