بىلىملەر مۇنبىرى

 پارول قايتۇرىۋېلىش
 تىزىملىتىڭ
جەمئىي مىكروبلوگ 258 تال  

مىكروبلوگ[ يېڭى | 24 سائەت | 7 كۈن | 30 كۈن ]

كۆرۈش: 288|ئىنكاس: 1

[HTML/CSS] css تىكى كۆپ قوللىنىلىدىغان ئالاھىدە ئۈنۈملەر 2-قىسىم

[ئۇلانما كۆچۈرۈش]

بىكەتكە ئەزا نامىڭىز بىلەن كىرسىڭىز تېخىمۇ كۆپ ئۇچۇرلارنى كۆرەلەيسىز

مۇنبىرىمىزگە تىزىملىتىپ كىرسىڭىز ئاندىن قوشۇمچە ھۆججەتنى كۆرەلەيسىز ياكى چۈشۈرەلەيسىز . تېخى تىزىملاتمىغانمۇ؟ تىزىملىتىڭ

x
سالام بىلىملەر مۇنبىرىدىكى تورداشلار، مەن بۈگۈنمۇ html/css تە چىقىرىلغان ھەركەتلىك ئالاھىدە ئۈنۈملەرنى ئېلىپ كەلدىم، سىلەرگە ئەز قېتىپ قالسا ئەجەپ ئەمەس.

مائۇسنى ئۈستىگە ئەكەلگەندە كۇنۇپكىنىڭ ئۈستىدە سۈزۈك بىر نۇر ئۇچۇپ ئۈتىدىغان ئۈنۈم،  كودى تۆۋەندىكىدەك
  1. <!DOCTYPE html>

  2. <head>
  3.    <title>yankut</title>
  4.    <style>
  5.        .shiny-shadow {
  6.            display: flex;
  7.            align-items: center;
  8.            justify-content: center;
  9.            height: 100vh;
  10.            background-color: #031628;
  11.       }
  12.       
  13.        button {
  14.            border: 2px solid white;
  15.            background: transparent;
  16.            text-transform: uppercase;
  17.            color: white;
  18.            padding: 15px 50px;
  19.            outline: none;
  20.            overflow: hidden;
  21.            position: relative;
  22.       }
  23.       
  24.        span {
  25.            z-index: 20;
  26.       }
  27.       
  28.        button:after {
  29.            content: "";
  30.            display: block;
  31.            position: absolute;
  32.            top: -36px;
  33.            left: -100px;
  34.            background: white;
  35.            width: 50px;
  36.            height: 125px;
  37.            opacity: 20%;
  38.            transform: rotate(-45deg);
  39.       }
  40.       
  41.        button:hover:after {
  42.            left: 120%;
  43.            transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
  44.            -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
  45.       }
  46.    </style>
  47. </head>

  48. <body>
  49.    <div class="shiny-shadow">
  50.        <button><span>Hover me</span></button>
  51.    </div>
  52. </body>

  53. </html>
مەزمۇننى كۆچۈرۈۋېلىش

مائۇسنى ئۈستىگە ئەكەلگەندە تەگلىكى سولدىن ئوڭغا ئاستا سۈرۈلۈپ پەيدا بولۇپ، مائۇسنى ئەكەتكەندە يوقاپ كىتىدىغان ئۈنۈم.  كودى تۆۋەندىكىدەك.
  1. <!DOCTYPE html>

  2. <head>
  3.    <title>yankut</title>
  4.    <style>
  5.        .loading-btn {
  6.            display: flex;
  7.            align-items: center;
  8.            justify-content: center;
  9.            height: 100vh;
  10.            background-color: #031628;
  11.       }
  12.       
  13.        button {
  14.            background: transparent;
  15.            border: 0;
  16.            border-radius: 0;
  17.            text-transform: uppercase;
  18.            font-weight: bold;
  19.            font-size: 20px;
  20.            padding: 15px 50px;
  21.            position: relative;
  22.       }
  23.       
  24.        button:before {
  25.            transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);
  26.            content: '';
  27.            width: 1%;
  28.            height: 100%;
  29.            background: #ff5964;
  30.            position: absolute;
  31.            top: 0;
  32.            left: 0;
  33.       }
  34.       
  35.        button span {
  36.            color: #ff0036;
  37.       }
  38.       
  39.        button:hover:before {
  40.            background: #ff5964;
  41.            width: 100%;
  42.       }
  43.       
  44.        button:hover span {
  45.            mix-blend-mode: darken;
  46.       }
  47.    </style>
  48. </head>

  49. <body>
  50.    <div class="loading-btn">
  51.        <button><span>Hover me</span></button>
  52.    </div>
  53. </body>

  54. </html>
مەزمۇننى كۆچۈرۈۋېلىش

چىرايلىق رامكا ئۈنۈمى،  كودى تۆۋەندىكىدەك.
  1. <!DOCTYPE html>

  2. <head>
  3.    <title>yankut</title>
  4.    <style>
  5.        .container {
  6.            display: flex;
  7.            justify-content: center;
  8.            align-items: center;
  9.            width: 100%;
  10.            height: 100vh;
  11.            background-color: #f7f8fa;
  12.       }
  13.       
  14.        .card {
  15.            display: flex;
  16.            justify-content: center;
  17.            align-items: center;
  18.            padding: 24px;
  19.            background-color: #fff;
  20.            border-radius: 12px;
  21.            box-shadow: 0 8px 12px #ebedf0;
  22.            width: 300px;
  23.            height: 200px;
  24.       }
  25.    </style>
  26. </head>

  27. <body>
  28.    <div class="container">
  29.        <div class="card">
  30.           我是卡片
  31.        </div>
  32.    </div>
  33. </body>

  34. </html>
مەزمۇننى كۆچۈرۈۋېلىش


بۈگۈن مۇشۇنچىلىك يولاپ تۇراي، يەنە داۋاملىق بىلىملەر مۇنبىرىگە ۋە سالونىمغا توربىكەر ياساش ۋە باشقا it تېخنىكىلىرىغا مۇناسىۋەتلىك تىمىلارنى يوللاپ تۇرىمەن، سالونىمغا كۈندە بىر قىسىمدىن JavaScript دەرىسلىكىنى يازمىچە شەكىلدە يولاۋاتىمەن، قىزىقىدىغانلار بولسا سالونىمغا كىرىۋاساڭلا بولىدۇ، ئىزدەش نامى yankut ياكى ئاستىدىكى ئىككىلىك كودنى سىكانىرلاپ كىرىۋاساڭلارمۇ بولىدۇ.
38d5ada9c3a1b7f0967eaad364b39f9.jpg
بىلمىگەننى بىلىملەردىن بىل!
ۋاقتى: 2021-2-19 15:28:42 | ھەممە قەۋەتنى كۆرۈش
كودلارنىڭ ئۈنۈم رەسىمىنىمۇ قوشۇپ قويسىڭىز ياخشى بولاتتى، ھەركەتلىك رەسىم قىلىپ
بىلمىگەننى بىلىملەردىن بىل!
كىرگەندىن كېيىن ئىنكاس يازالايسىز كىرىش | تىزىملىتىڭ

سەھىپە جۇغلانما قائىدىسى

QQ|قاماقخانا|رەسىمسىز ھالەت|يانفۇن| بىلىملەر تورى ( 沪ICP备19027845号-8 )   

GMT+8, 2021-2-27 13:55 , Processed in 0.089556 second(s), 28 queries .

Powered by Discuz! X3.2(NurQut Team)

© 2001-2013 Comsenz Inc.

تېز ئىنكاس چوققىغا قايتىش سەھىپىگە قايتىش