优惠码标签

image.png

  1. <!--
  2.  * @Author: hhn
  3.  * @Date: 2020-09-01 09:12:41
  4.  * @lastEditTime: Do not edit
  5.  * @Description: 各种标签样式
  6.  * @FilePath: \codehub\study\studying\html\tag.html
  7. -->
  8. <!DOCTYPE html>
  9. <html lang="en">
  11. <head>
  12.     <meta charset="utf-8">
  13.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  14.     <meta name="viewport" content="width=device-width, initial-scale=1">
  15.     <title>标签</title>
  16.     <link href="https://fonts.googleapis.com/css?family=Lato:400,400i|Roboto:500" rel="stylesheet">
  17.     <!-- 为 Internet Explorer 支持而添加的 shiv -->
  18.     <!--[if lt IE 9]>
  19. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  20. <![endif]-->
  21.     <style>
  22.         .coupon-con.temp {
  23.             background: linear-gradient(328deg, rgba(241, 74, 35, 1) 0, rgba(255, 144, 65, 1) 100%);
  24.         }
  26.         a {
  27.             display: inline-block;
  28.             margin-left: 14px;
  29.             margin-top: 6px;
  30.             font-size: inherit;
  31.             text-decoration: none;
  32.             cursor: pointer;
  33.         }
  35.         .coupon-con {
  36.             top: 4px;
  37.             right: 110px;
  38.             width: 155px;
  39.             height: 30px;
  40.             font-size: 12px;
  41.             line-height: 30px;
  42.             background: linear-gradient(87deg, rgba(248, 227, 181, 1) 0, rgba(218, 178, 116, 1) 100%);
  43.             border-radius: 2px 15px 2px 15px;
  44.             color: #463d2f;
  45.             align-items: center;
  46.             overflow: hidden;
  47.             text-align: center;
  48.             font-weight: bold;
  49.         }
  51.         .activity-con {
  52.             cursor: url(data:image/png;base64,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) 22 0, auto !important;
  53.         }
  55.         .activity-con:before {
  56.             content: "";
  57.             position: absolute;
  58.             left: -400px;
  59.             top: -400px;
  60.             width: 100px;
  61.             height: 0;
  62.             background-color: rgba(255, 255, 255, .3);
  63.             -webkit-transform: rotate(-45deg);
  64.             -moz-transform: rotate(-45deg);
  65.             -ms-transform: rotate(-45deg);
  66.             -o-transform: rotate(-45deg);
  67.             transform: rotate(-45deg);
  68.             /* -webkit-animation: searchLights 1s ease-in 1s infinite;
  69.             -o-animation: searchLights 1s ease-in 1s infinite; */
  70.             animation: searchLights 1.5s ease-in 1s infinite;
  71.             box-shadow: 0 0 10px 10px rgba(255, 255, 255, .3);
  72.         }
  74.         .coupon-con span:nth-of-type(1) {
  75.             color: #fff;
  76.             width: 53px;
  77.             background: #494238;
  78.             float: left;
  79.         }
  81.         .coupon-con.temp span:nth-of-type(2) {
  82.             color: #fff;
  83.             float: right;
  84.             width: 102px;
  85.         }
  86.         /*  */
  88.         @-o-keyframes searchLights {
  89.             from {
  90.                 left: -100px;
  91.                 top: 0
  92.             }
  93.             to {
  94.                 left: 100%;
  95.                 top: 22px
  96.             }
  97.         }
  99.         @-moz-keyframes searchLights {
  100.             from {
  101.                 left: -100px;
  102.                 top: 0
  103.             }
  104.             to {
  105.                 left: 100%;
  106.                 top: 22px
  107.             }
  108.         }
  110.         @keyframes searchLights {
  111.             from {
  112.                 left: -100px;
  113.                 top: 0
  114.             }
  115.             to {
  116.                 left: 100%;
  117.                 top: 22px
  118.             }
  119.         }
  121.         @keyframes btnClick {
  122.             0% {
  123.                 transform: scale(1)
  124.             }
  125.             50% {
  126.                 transform: scale(.95)
  127.             }
  128.             100% {
  129.                 transform: scale(1)
  130.             }
  131.         }
  133.         @keyframes moveIn {
  134.             from {
  135.                 transform: scale(1) rotate(0)
  136.             }
  137.             to {
  138.                 transform: scale(0) rotate(360deg);
  139.                 right: 0;
  140.                 margin-right: 0;
  141.                 top: 30px;
  142.                 display: none
  143.             }
  144.         }
  146.         @keyframes gift {
  147.             0% {
  148.                 transform: rotate(0);
  149.                 transition-timing-function: cubic-bezier(.215, .61, .355, 1)
  150.             }
  151.             10% {
  152.                 transform: rotate(-12deg);
  153.                 transition-timing-function: cubic-bezier(.215, .61, .355, 1)
  154.             }
  155.             20% {
  156.                 transform: rotate(12deg);
  157.                 transition-timing-function: cubic-bezier(.215, .61, .355, 1)
  158.             }
  159.             28% {
  160.                 transform: rotate(-10deg);
  161.                 transition-timing-function: cubic-bezier(.215, .61, .355, 1)
  162.             }
  163.             36% {
  164.                 transform: rotate(10deg);
  165.                 transition-timing-function: cubic-bezier(.755, .5, .855, .06)
  166.             }
  167.             42% {
  168.                 transform: rotate(-8deg);
  169.                 transition-timing-function: cubic-bezier(.755, .5, .855, .06)
  170.             }
  171.             48% {
  172.                 transform: rotate(8deg);
  173.                 transition-timing-function: cubic-bezier(.755, .5, .855, .06)
  174.             }
  175.             52% {
  176.                 transform: rotate(-4deg);
  177.                 transition-timing-function: cubic-bezier(.755, .5, .855, .06)
  178.             }
  179.             56% {
  180.                 transform: rotate(4deg);
  181.                 transition-timing-function: cubic-bezier(.755, .5, .855, .06)
  182.             }
  183.             60% {
  184.                 transform: rotate(0);
  185.                 transition-timing-function: cubic-bezier(.755, .5, .855, .06)
  186.             }
  187.             100% {
  188.                 transform: rotate(0);
  189.                 transition-timing-function: cubic-bezier(.215, .61, .355, 1)
  190.             }
  191.         }
  192.     </style>
  193. </head>
  195. <body>
  196.     <a class="activity-con coupon-con temp">
  197.         <span>7.5折</span>
  198.         <span>优惠码限时领取</span>
  199.     </a>
  200. </body>
  202. </html>

点击查看【codepen】

标签装饰

  1. <!DOCTYPE html>
  2. <html lang="en">
  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">
  8.     <title>adorn 点缀</title>
  9.     <style>
  10.       body {
  11.         display: flex;
  12.         justify-content: space-around;
  13.         flex-wrap: wrap;
  14.       }
  16.       .card,
  17.       .card-head,
  18.       .card-body,
  19.       .card-boot {
  20.         position: relative;
  21.       }
  23.       .card-body {
  24.         width: 262px;
  25.         height: 147px;
  26.         color: #FFFFFF;
  27.         text-align: center;
  28.         overflow: hidden;
  29.         position: relative;
  30.         display: flex;
  31.         justify-content: center;
  32.         align-items: center;
  33.       }
  35.       .adorn {
  36.         position: absolute;
  37.       }
  39.       .course-periods {
  40.         /* 层级在card-border上 */
  41.         z-index: 2;
  42.         position: absolute;
  43.         display: block;
  44.         left: 0px;
  45.         top: 0px;
  46.         font-size: 10px;
  47.         color: #FFFFFF;
  48.         width: 50px;
  49.         height: 25px;
  50.         text-align: center;
  51.         line-height: 25px;
  52.       }
  54.       .course-periods:after {
  55.         z-index: -1;
  56.         content: '';
  57.         display: block;
  58.         position: absolute;
  59.         top: 0;
  60.         left: -10px;
  61.         width: 60px;
  62.         height: 25px;
  63.         transform: skewX(-15deg);
  64.         background: rgba(0, 0, 0, 0.3);
  65.         border-radius: 0 0 6px 0;
  66.       }
  68.       .card-body img.bg-cover {
  69.         position: absolute;
  70.         right: 0px;
  71.         top: 0px;
  72.         display: block;
  73.         width: 100%;
  74.       }
  76.       .card-body .card-border::after {
  77.         position: absolute;
  78.         top: 10px;
  79.         left: 10px;
  80.         right: 10px;
  81.         bottom: 10px;
  82.         z-index: 2;
  83.         display: inline-block;
  84.         border: 2px solid #fff;
  85.         content: "";
  86.       }
  88.       .card-body .title {
  89.         z-index: 1;
  90.         max-width: 170px;
  91.         max-height: 60px;
  92.         font-size: 20px;
  93.         font-weight: 700;
  94.         line-height: 1.5;
  95.         color: #fff;
  96.         display: -webkit-box;
  97.         -webkit-box-orient: vertical;
  98.         -webkit-line-clamp: 2;
  99.         overflow: hidden;
  100.       }
  101.     </style>
  102.   </head>
  104.   <body>
  105.     <div class="card">
  106.       <div class="card-head">
  108.       </div>
  109.       <div class="card-body">
  110.         <img class="bg-cover" src="./basic_doc.png" />
  111.         <div class="card-border"></div>
  112.         <span class="course-periods">50篇</span>
  113.         <div class="title">独在异乡<br>为异客</div>
  114.       </div>
  115.       <div class="card-boot">
  117.       </div>
  118.     </div>
  120.     <div class="card">
  121.       <div class="card-head">
  123.       </div>
  124.       <div class="card-body ">
  125.         <img class="bg-cover" src="./basic_feature.png" />
  126.         <span class="course-periods">50篇</span>
  127.         <div class="title">独在异乡<br>为异客</div>
  128.       </div>
  129.       <div class="card-boot">
  131.       </div>
  132.     </div>
  134.     <div class="card">
  135.       <div class="card-head">
  137.       </div>
  138.       <div class="card-body ">
  139.         <img class="bg-cover" src="./basic_pdf.png" />
  140.         <span class="course-periods">50篇</span>
  141.         <div class="title">独在异乡<br>为异客</div>
  142.       </div>
  143.       <div class="card-boot">
  145.       </div>
  146.     </div>
  148.     <div class="card">
  149.       <div class="card-head">
  151.       </div>
  152.       <div class="card-body ">
  153.         <img class="bg-cover" src="./basic_ppt.png" />
  154.         <span class="course-periods">50篇</span>
  155.         <div class="title">独在异乡<br>为异客</div>
  156.       </div>
  157.       <div class="card-boot">
  159.       </div>
  160.     </div>
  162.     <div class="card">
  163.       <div class="card-head">
  165.       </div>
  166.       <div class="card-body">
  167.         <img class="bg-cover" src="./basic_xls.png" />
  168.         <span class="course-periods">50篇</span>
  169.         <div class="title">独在异乡<br>为异客</div>
  170.       </div>
  171.       <div class="card-boot">
  173.       </div>
  174.     </div>
  176.     <div class="card">
  177.       <div class="card-head">
  179.       </div>
  180.       <div class="card-body ">
  181.         <img class="bg-cover" src="./ep_live.png" />
  182.         <span class="course-periods">50篇</span>
  183.         <div class="title" style="color:#4f26ef">独在异乡<br>为异客</div>
  184.       </div>
  185.       <div class="card-boot">
  187.       </div>
  188.     </div>
  190.     <div class="card">
  191.       <div class="card-head">
  193.       </div>
  194.       <div class="card-body ">
  195.         <img class="bg-cover" src="./5654.png" />
  196.         <div class="card-border"></div>
  197.         <span class="course-periods">50篇</span>
  198.         <div class="title">独在异乡<br>为异客</div>
  199.       </div>
  200.       <div class="card-boot">
  202.       </div>
  203.     </div>
  204.   </body>
  206. </html>

图片：https://www.yuque.com/southerly/images/artboards/71945
image.png

badge 徽章 花朵

  1. <!DOCTYPE html>
  2. <html lang="en">
  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">
  8.     <title>zhui-badge</title>
  9.     <style>
  10.         .zhui-badge {
  11.             font-family: STKaiti;
  12.             position: relative;
  13.             display: inline-block;
  14.             transform: scale(6);
  15.         }
  17.         .zhui-badge-wrapper {
  18.             position: absolute;
  19.             top: 5px;
  20.             right: 15px;
  21.             z-index: 1
  22.         }
  24.         .zhui-badge-content {
  25.             -webkit-box-pack: center;
  26.             -ms-flex-pack: center;
  27.             justify-content: center;
  28.             -webkit-box-align: center;
  29.             -ms-flex-align: center;
  30.             align-items: center;
  31.             top: -11px;
  32.             left: 7px;
  33.             width: 16px;
  34.             height: 16px;
  35.             font-size: 12px;
  36.             background: #fecc11;
  37.             color: #fff;
  38.             border-radius: 50%;
  39.             -webkit-transform: scale(.8);
  40.             transform: scale(.8)
  41.         }
  43.         .zhui-badge-content,
  44.         .zhui-badge-leaf {
  45.             position: absolute;
  46.             display: -webkit-box;
  47.             display: -ms-flexbox;
  48.             display: flex
  49.         }
  51.         .zhui-badge-leaf {
  52.             top: -15px;
  53.             right: -15px
  54.         }
  56.         .zhui-badge-leaf,
  57.         .zhui-badge-leaf:after {
  58.             height: 12px;
  59.             width: 12px;
  60.             background: #fff;
  61.             border-radius: 2px 20px;
  62.             -webkit-transform-origin: bottom right;
  63.             transform-origin: bottom right
  64.         }
  66.         .zhui-badge-leaf:after {
  67.             content: "";
  68.             position: absolute;
  69.             top: 0;
  70.             left: 0
  71.         }
  73.         .zhui-badge-leaf-outer:after {
  74.             -webkit-transform: rotate(60deg);
  75.             transform: rotate(60deg)
  76.         }
  78.         .zhui-badge-leaf-inner,
  79.         .zhui-badge-leaf-inner:after {
  80.             -webkit-box-shadow: -5px -5px 10px 3px rgba(0, 0, 0, .06);
  81.             box-shadow: -5px -5px 10px 3px rgba(0, 0, 0, .06)
  82.         }
  84.         .zhui-badge-leaf-inner:after {
  85.             -webkit-transform: rotate(60deg);
  86.             transform: rotate(60deg)
  87.         }
  89.         .zhui-badge-leaf-outer:first-child {
  90.             -webkit-transform: rotate(0deg);
  91.             transform: rotate(0deg)
  92.         }
  94.         .zhui-badge-leaf-outer:nth-child(2) {
  95.             -webkit-transform: rotate(120deg);
  96.             transform: rotate(120deg)
  97.         }
  99.         .zhui-badge-leaf-outer:nth-child(3) {
  100.             -webkit-transform: rotate(240deg);
  101.             transform: rotate(240deg)
  102.         }
  104.         .zhui-badge-leaf-inner:nth-child(4) {
  105.             -webkit-transform: rotate(30deg);
  106.             transform: rotate(30deg)
  107.         }
  109.         .zhui-badge-leaf-inner:nth-child(5) {
  110.             -webkit-transform: rotate(150deg);
  111.             transform: rotate(150deg)
  112.         }
  114.         .zhui-badge-leaf-inner:nth-child(6) {
  115.             -webkit-transform: rotate(270deg);
  116.             transform: rotate(270deg)
  117.         }
  119.         body {
  120.             background-color: aliceblue;
  121.             padding: 400px;
  122.         }
  123.     </style>
  124. </head>
  126. <body>
  127.     <div class="zhui-badge">
  128.         <span style="display: block; width: 50px; height: 50px; background: rgb(221, 221, 221);"></span>
  129.         <div class="zhui-badge-wrapper">
  130.             <span class="zhui-badge-leaf zhui-badge-leaf-outer"></span>
  131.             <span class="zhui-badge-leaf zhui-badge-leaf-outer"></span>
  132.             <span class="zhui-badge-leaf zhui-badge-leaf-outer"></span>
  133.             <span class="zhui-badge-leaf zhui-badge-leaf-inner"></span>
  134.             <span class="zhui-badge-leaf zhui-badge-leaf-inner"></span>
  135.             <span class="zhui-badge-leaf zhui-badge-leaf-inner"></span>
  136.             <span class="zhui-badge-content">99</span>
  137.         </div>
  138.     </div>
  139. </body>
  141. </html>

image.png