经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS3 » 查看文章
纯CSS3实现漂亮的input输入框动画样式库(Text input love)_css3_CSS
来源：jb51　　时间：2019/1/2 9:27:03　　对本文有异议

分享一个用纯 CSS3 实现的，漂亮的 input 输入框动画样式库-Text input love。

点击每个输入框都用不同的动画效果，始终显示标签label，并显示 placeholder（占位符）文本。

演示地址：https://codepen.io/MichaelArestad/full/ohLIa

HTML 代码：

  1. <div class="row">
  2.   <p>Click every input.</p>
  3. </div>
  4. <div class="row">
  5.   <span>
  6.     <input class="basic-slide" id="name" type="text" placeholder="Your best name" /><label for="name">Name</label>
  7.   </span>
  8.   <span>
  9.     <input class="basic-slide" id="email" type="text" placeholder="Your favorite email" /><label for="email">Email</label>
  10.   </span>
  11.   <span>
  12.     <input class="basic-slide" id="phone" type="text" placeholder="You can trust us" /><label for="phone">Phone</label>
  13.   </span>
  14. </div>
  15. <div class="row">
  16.   <span>
  17.     <input class="clean-slide" id="age" type="text" placeholder="Go for the high score!" /><label for="age">Age</label>
  18.   </span>
  19.   <span>
  20.     <input class="clean-slide" id="height" type="text" placeholder="Heels count" /><label for="height">Height</label>
  21.   </span>
  22.   <span>
  23.     <input class="clean-slide" id="weight" type="text" placeholder="Go ahead and lie" /><label for="weight">Weight</label>
  24.   </span>
  25. </div>
  26. <div class="row">
  27.   <span>
  28.     <input class="gate" id="class" type="text" placeholder="Wizard!" /><label for="class">Class</label>
  29.   </span>
  30.   <span>
  31.     <input class="gate" id="element" type="text" placeholder="Five to choose from" /><label for="element">Element</label>
  32.   </span>
  33.   <span>
  34.     <input class="gate" id="move" type="text" placeholder="Secret book attack!" /><label for="move">Move</label>
  35.   </span>
  36. </div>
  37. <div class="row">
  38.   <span>
  39.     <input class="skinny" id="english" type="text" placeholder="Do you speak it?" /><label for="english">English</label>
  40.   </span>
  41.   <span>
  42.     <input class="skinny" id="burger" type="text" placeholder="A Royale with cheese?" /><label for="burger">Burger</label>
  43.   </span>
  44.   <span>
  45.     <input class="skinny" id="wallet" type="text" placeholder="Bad Mother****er" /><label for="wallet">Wallet</label>
  46.   </span>
  47. </div>
  48. <div class="row">
  49.   <span>
  50.     <input class="slide-up" id="card" type="text" placeholder="Fund me!" /><label for="card">Credit Card</label>
  51.   </span>
  52.   <span>
  53.     <input class="slide-up" id="expires" type="text" placeholder="Month Day, Year" /><label for="expires">Expires</label>
  54.   </span>
  55.   <span>
  56.     <input class="slide-up" id="security" type="text" placeholder="Public" /><label for="security">Security Code</label>
  57.   </span>
  58. </div>
  59. <div class="row">
  60.   <span>
  61.     <input class="card-slide" id="knock" type="text" placeholder="Who's there?" /><label for="knock">Knock knock</label>
  62.   </span>
  63.   <span>
  64.     <input class="card-slide" id="max" type="text" placeholder="Max who?" /><label for="max">Max</label>
  65.   </span>
  66.   <span>
  67.     <input class="card-slide" id="out" type="text" placeholder="Sunuva..." /><label for="out">Maxed out card ;)</label>
  68.   </span>
  69. </div>
  70. <div class="row">
  71.   <span>
  72.     <input class="swing" id="artist" type="text" placeholder="BO$$" /><label for="artist">Artist</label>
  73.   </span>
  74.   <span>
  75.     <input class="swing" id="song" type="text" placeholder="I don't give a ****" /><label for="song">Song</label>
  76.   </span>
  77.   <span>
  78.     <input class="swing" id="eyes" type="text" placeholder="Crazy" /><label for="eyes">Eyes</label>
  79.   </span>
  80. </div>
  81. <div class="row">
  82.   <span>
  83.     <input class="balloon" id="state" type="text" placeholder="Liquid, solid, gaseous..." /><label for="state">State</label>
  84.   </span>
  85.   <span>
  86.     <input class="balloon" id="planet" type="text" placeholder="Probably Earth" /><label for="planet">Planet</label>
  87.   </span>
  88.   <span>
  89.     <input class="balloon" id="galaxy" type="text" placeholder="Milky Way?" /><label for="galaxy">Galaxy</label>
  90.   </span>
  91. </div>

SCSS 代码：

Sass 代码:

  1. @import "compass/css3";
  2.  
  3. @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300,800);
  4.  
  5. * {
  6.   box-sizing: border-box;
  7. }
  8. html,
  9. body {
  10.   overflow-x: hidden;
  11.   font-family: "Open Sans", sans-serif;
  12.   font-weight: 300;
  13.   color: #fff;
  14.   background: #efefef;
  15. }
  16. @mixin epic-sides() { // https://codepen.io/MichaelArestad/pen/qltuk
  17.     position: relative;
  18.     z-index: 1;
  19.  
  20.     &:before {
  21.         position: absolute;
  22.         content: "";
  23.         display: block;
  24.         top: 0;
  25.         left: -5000px;
  26.         height: 100%;
  27.         width: 15000px;
  28.         z-index: -1;
  29.         @content;
  30.     }
  31. }
  32. .row {
  33.   max-width: 800px;
  34.   margin: 0 auto;
  35.   padding: 60px 30px;
  36.   background: #032429;
  37.   @include epic-sides() {background: inherit;}
  38.   text-align: center;
  39.   
  40.   &:first-child {
  41.     padding: 40px 30px;
  42.   }
  43.   &:nth-child(2),
  44.   &:nth-child(8),
  45.   &:nth-child(10){
  46.     background: #134A46;
  47.   }
  48.   &:nth-child(3),
  49.   &:nth-child(7) {
  50.     background: #377D6A;
  51.   }
  52.   &:nth-child(4),
  53.   &:nth-child(6) {
  54.     background: #7AB893;
  55.   }
  56.   &:nth-child(5) {
  57.     background: #B2E3AF;
  58.   }
  59.   
  60.   span {
  61.     position: relative;
  62.     display: inline-block;
  63.     margin: 30px 10px;
  64.   }
  65. }
  66. .basic-slide {
  67.   display: inline-block;
  68.   width: 215px;
  69.   padding: 10px 0 10px 15px;
  70.   font-family: "Open Sans", sans;
  71.   font-weight: 400;
  72.   color: #377D6A;
  73.   background: #efefef;
  74.   border: 0;
  75.   border-radius: 3px;
  76.   outline: 0;
  77.   text-indent: 70px; // Arbitrary.
  78.   transition: all .3s ease-in-out;
  79.   
  80.   &::-webkit-input-placeholder {
  81.     color: #efefef;
  82.     text-indent: 0;
  83.     font-weight: 300;
  84.   }
  85.  
  86.   + label {
  87.     display: inline-block;
  88.     position: absolute;
  89.     top: 0;
  90.     left: 0;
  91.     padding: 10px 15px;
  92.     text-shadow: 0 1px 0 rgba(19,74,70,.4);
  93.     background: #7AB893;
  94.     transition: all .3s ease-in-out;
  95.     border-top-left-radius: 3px;
  96.     border-bottom-left-radius: 3px;
  97.   }
  98. }
  99. .basic-slide:focus,
  100. .basic-slide:active {
  101.   color: #377D6A;
  102.   text-indent: 0;
  103.   background: #fff;
  104.   border-top-left-radius: 0;
  105.   border-bottom-left-radius: 0;
  106.   
  107.   &::-webkit-input-placeholder {
  108.     color: #aaa;
  109.   }
  110.   + label {
  111.     transform: translateX(-100%);
  112.   }
  113. }
  114. .clean-slide {
  115.   position: relative;
  116.   display: inline-block;
  117.   width: 215px;
  118.   padding: 10px 0 10px 15px;
  119.   font-family: "Open Sans", sans;
  120.   font-weight: 400;
  121.   color: #377D6A;
  122.   background: #efefef;
  123.   border: 0;
  124.   border-radius: 3px;
  125.   outline: 0;
  126.   text-indent: 60px; // Arbitrary.
  127.   transition: all .3s ease-in-out;
  128.   
  129.   &::-webkit-input-placeholder {
  130.     color: #efefef;
  131.     text-indent: 0;
  132.     font-weight: 300;
  133.   }
  134.  
  135.   + label {
  136.     display: inline-block;
  137.     position: absolute;
  138.     transform: translateX(0);
  139.     top: 0;
  140.     left: 0;
  141.     bottom: 0;
  142.     padding: 13px 15px;
  143.     font-size: 11px;
  144.     font-weight: 700;
  145.     text-transform: uppercase;
  146.     color: #032429;
  147.     text-align: left;
  148.     text-shadow: 0 1px 0 rgba(255,255,255,.4);
  149.     transition: all .3s ease-in-out, color .3s ease-out;
  150.     border-top-left-radius: 3px;
  151.     border-bottom-left-radius: 3px;
  152.     overflow: hidden;
  153.     
  154.     &:after {
  155.       content: "";
  156.       position: absolute;
  157.       top: 0;
  158.       right: 100%;
  159.       bottom: 0;
  160.       width: 100%;
  161.       background: #7AB893;
  162.       z-index: -1;
  163.       transform: translate(0);
  164.       transition: all .3s ease-in-out;
  165.       border-top-left-radius: 3px;
  166.       border-bottom-left-radius: 3px;
  167.     }
  168.   }
  169. }
  170. .clean-slide:focus,
  171. .clean-slide:active {
  172.   color: #377D6A;
  173.   text-indent: 0;
  174.   background: #fff;
  175.   border-top-left-radius: 0;
  176.   border-bottom-left-radius: 0;
  177.   
  178.   &::-webkit-input-placeholder {
  179.     color: #aaa;
  180.   }
  181.   + label {
  182.     color: #fff;
  183.     text-shadow: 0 1px 0 rgba(19,74,70,.4);
  184.     transform: translateX(-100%);
  185.     
  186.     &:after {
  187.       transform: translate(100%);
  188.     }
  189.   }
  190. }
  191. .gate {
  192.   display: inline-block;
  193.   width: 215px;
  194.   padding: 10px 0 10px 15px;
  195.   font-family: "Open Sans", sans;
  196.   font-weight: 400;
  197.   color: #377D6A;
  198.   background: #efefef;
  199.   border: 0;
  200.   border-radius: 3px;
  201.   outline: 0;
  202.   text-indent: 65px; // Arbitrary.
  203.   transition: all .3s ease-in-out;
  204.   
  205.   &::-webkit-input-placeholder {
  206.     color: #efefef;
  207.     text-indent: 0;
  208.     font-weight: 300;
  209.   }
  210.  
  211.   + label {
  212.     display: inline-block;
  213.     position: absolute;
  214.     top: 0;
  215.     left: 0;
  216.     padding: 10px 15px;
  217.     text-shadow: 0 1px 0 rgba(19,74,70,.4);
  218.     background: #7AB893;
  219.     transition: all .4s ease-in-out;
  220.     border-top-left-radius: 3px;
  221.     border-bottom-left-radius: 3px;
  222.     transform-origin: left bottom;
  223.     z-index: 99;
  224.     
  225.     &:before,
  226.     &:after {
  227.       content: "";
  228.       position: absolute;
  229.       top: 0;
  230.       right: 0;
  231.       bottom: 0;
  232.       left: 0;
  233.       border-radius: 3px;
  234.       background: #377D6A;
  235.       transform-origin: left bottom;
  236.       transition: all .4s ease-in-out;
  237.       pointer-events: none;
  238.       z-index: -1;
  239.     }
  240.     &:before {
  241.       background: rgba(3,36,41,.2);
  242.       z-index: -2;
  243.       right: 20%;
  244.     }
  245.   }
  246. }
  247. span:nth-child(2) .gate {
  248.   text-indent: 85px;
  249. }
  250. span:nth-child(2) .gate:focus,
  251. span:nth-child(2) .gate:active{
  252.   text-indent: 0;
  253. }
  254. .gate:focus,
  255. .gate:active {
  256.   color: #377D6A;
  257.   text-indent: 0;
  258.   background: #fff;
  259.   border-top-right-radius: 3px;
  260.   border-bottom-right-radius: 3px;
  261.   
  262.   &::-webkit-input-placeholder {
  263.     color: #aaa;
  264.   }
  265.   + label {
  266.     transform: rotate(-66deg);
  267.     border-radius: 3px;
  268.     
  269.     &:before {
  270.       transform: rotate(10deg);
  271.     }
  272.   }
  273. }
  274. .skinny {
  275.   display: inline-block;
  276.   width: 215px;
  277.   padding: 10px 0 10px 15px;
  278.   font-family: "Open Sans", sans;
  279.   font-weight: 400;
  280.   color: #377D6A;
  281.   background: #efefef;
  282.   border: 0;
  283.   border-radius: 3px;
  284.   outline: 0;
  285.   text-indent: 75px; // Arbitrary.
  286.   transition: all .3s ease-in-out;
  287.   
  288.   &::-webkit-input-placeholder {
  289.     color: #efefef;
  290.     text-indent: 0;
  291.     font-weight: 300;
  292.   }
  293.  
  294.   + label {
  295.     display: inline-block;
  296.     position: absolute;
  297.     transform: translateX(0);
  298.     top: 0;
  299.     left: 0;
  300.     padding: 10px 15px;
  301.     text-shadow: 0 1px 0 rgba(19,74,70,.4);
  302.     transition: all .3s ease-in-out;
  303.     border-top-left-radius: 3px;
  304.     border-bottom-left-radius: 3px;
  305.     overflow: hidden;
  306.  
  307.     &:before,
  308.     &:after {
  309.       content: "";
  310.       position: absolute;
  311.       right: 0;
  312.       left: 0;
  313.       z-index: -1;
  314.       transition: all .3s ease-in-out;
  315.     }
  316.     &:before {
  317.       // Skinny bit here
  318.       top: 5px;
  319.       bottom: 5px;
  320.       background: #377D6A; // change this to #134A46
  321.       border-top-left-radius: 3px;
  322.       border-bottom-left-radius: 3px;
  323.     }
  324.     &:after {
  325.       top: 0;
  326.       bottom: 0;
  327.       background: #377D6A;
  328.     }
  329.   }
  330. }
  331. .skinny:focus,
  332. .skinny:active {
  333.   color: #377D6A;
  334.   text-indent: 0;
  335.   background: #fff;
  336.   
  337.   &::-webkit-input-placeholder {
  338.     color: #aaa;
  339.   }
  340.   + label {
  341.     transform: translateX(-100%);
  342.     
  343.     &:after {
  344.       transform: translateX(100%);
  345.     }
  346.   }
  347. }
  348. .slide-up {
  349.   display: inline-block;
  350.   width: 215px;
  351.   padding: 10px 0 10px 15px;
  352.   font-family: "Open Sans", sans;
  353.   font-weight: 400;
  354.   color: #377D6A;
  355.   background: #efefef;
  356.   border: 0;
  357.   border-radius: 3px;
  358.   outline: 0;
  359.   text-indent: 80px; // Arbitrary.
  360.   transition: all .3s ease-in-out;
  361.   
  362.   &::-webkit-input-placeholder {
  363.     color: #efefef;
  364.     text-indent: 0;
  365.     font-weight: 300;
  366.   }
  367.  
  368.   + label {
  369.     display: inline-block;
  370.     position: absolute;
  371.     transform: translateX(0);
  372.     top: 0;
  373.     left: 0;
  374.     padding: 10px 15px;
  375.     text-shadow: 0 1px 0 rgba(19,74,70,.4);
  376.     transition: all .3s ease-in-out;
  377.     border-top-left-radius: 3px;
  378.     border-bottom-left-radius: 3px;
  379.     overflow: hidden;
  380.  
  381.     &:before,
  382.     &:after {
  383.       content: "";
  384.       position: absolute;
  385.       right: 0;
  386.       left: 0;
  387.       z-index: -1;
  388.       transition: all .3s ease-in-out;
  389.     }
  390.     &:before {
  391.       // Skinny bit here
  392.       top: 6px;
  393.       left: 5px;
  394.       right: 5px;
  395.       bottom: 6px;
  396.       background: #377D6A; // change this to #134A46
  397.     }
  398.     &:after {
  399.       top: 0;
  400.       bottom: 0;
  401.       background: #377D6A;
  402.     }
  403.   }
  404. }
  405. span:nth-child(1) .slide-up {
  406.   text-indent: 105px;
  407. }
  408. span:nth-child(3) .slide-up {
  409.   text-indent: 125px;
  410. }
  411. span:nth-child(1) .slide-up:focus,
  412. span:nth-child(1) .slide-up:active,
  413. span:nth-child(3) .slide-up:focus,
  414. span:nth-child(3) .slide-up:active {
  415.   text-indent: 0;
  416. }
  417. .slide-up:focus,
  418. .slide-up:active {
  419.   color: #377D6A;
  420.   text-indent: 0;
  421.   background: #fff;
  422.   
  423.   &::-webkit-input-placeholder {
  424.     color: #aaa;
  425.   }
  426.   + label {
  427.     transform: translateY(-100%);
  428.  
  429.     &:before {
  430.       border-radius: 5px;
  431.     }
  432.     &:after {
  433.       transform: translateY(100%);
  434.     }
  435.   }
  436. }
  437. .card-slide {
  438.   display: inline-block;
  439.   width: 215px;
  440.   padding: 10px 0 10px 15px;
  441.   font-family: "Open Sans", sans;
  442.   font-weight: 400;
  443.   color: #377D6A;
  444.   background: #efefef;
  445.   border: 0;
  446.   border-radius: 3px;
  447.   outline: 0;
  448.   text-indent: 115px; // Arbitrary.
  449.   transition: all .3s ease-in-out;
  450.   
  451.   &::-webkit-input-placeholder {
  452.     color: #efefef;
  453.     text-indent: 0;
  454.     font-weight: 300;
  455.   }
  456.  
  457.   + label {
  458.     display: block;
  459.     position: absolute;
  460.     top: 0;
  461.     left: 0;
  462.     padding: 10px 15px;
  463.     text-shadow: 0 1px 0 rgba(19,74,70,.4);
  464.     background: #7AB893;
  465.     transition: all .3s ease-in-out;
  466.     border-top-left-radius: 3px;
  467.     border-bottom-left-radius: 3px;
  468.     transform-origin: right center;
  469.     transform: perspective(300px) scaleX(1) rotateY(0deg);
  470.   }
  471. }
  472. span:nth-child(2) .card-slide {
  473.   text-indent: 55px;
  474. }
  475. span:nth-child(3) .card-slide {
  476.   text-indent: 150px;
  477. }
  478. span:nth-child(2) .card-slide:focus,
  479. span:nth-child(2) .card-slide:active,
  480. span:nth-child(3) .card-slide:focus,
  481. span:nth-child(3) .card-slide:active {
  482.   text-indent: 0;
  483. }
  484. .card-slide:focus,
  485. .card-slide:active {
  486.   color: #377D6A;
  487.   text-indent: 0;
  488.   background: #fff;
  489.   border-top-left-radius: 0;
  490.   border-bottom-left-radius: 0;
  491.   
  492.   &::-webkit-input-placeholder {
  493.     color: #aaa;
  494.   }
  495.   + label {
  496.     transform: perspective(600px) translateX(-100%) rotateY(80deg);
  497.   }
  498. }
  499. .swing {
  500.   display: inline-block;
  501.   width: 215px;
  502.   padding: 10px 0 10px 15px;
  503.   font-family: "Open Sans", sans;
  504.   font-weight: 400;
  505.   color: #377D6A;
  506.   background: #efefef;
  507.   border: 0;
  508.   border-radius: 3px;
  509.   outline: 0;
  510.   text-indent: 60px; // Arbitrary.
  511.   transition: all .3s ease-in-out;
  512.   
  513.   &::-webkit-input-placeholder {
  514.     color: #efefef;
  515.     text-indent: 0;
  516.     font-weight: 300;
  517.   }
  518.  
  519.   + label {
  520.     display: inline-block;
  521.     position: absolute;
  522.     top: 0;
  523.     left: 0;
  524.     padding: 10px 15px;
  525.     text-shadow: 0 1px 0 rgba(19,74,70,.4);
  526.     background: #7AB893;
  527.     border-top-left-radius: 3px;
  528.     border-bottom-left-radius: 3px;
  529.     transform-origin: 2px 2px;
  530.     transform: rotate(0);
  531.     // There should be a better way
  532.     animation: swing-back .4s 1 ease-in-out;
  533.   }
  534. }
  535. @keyframes swing {
  536.   0% {
  537.     transform: rotate(0);
  538.   }
  539.   20% {
  540.     transform: rotate(116deg);
  541.   }
  542.   40% {
  543.     transform: rotate(60deg);
  544.   }
  545.   60% {
  546.     transform: rotate(98deg);
  547.   }
  548.   80% {
  549.     transform: rotate(76deg);
  550.   }
  551.   100% {
  552.     transform: rotate(82deg);
  553.   }
  554. }
  555. @keyframes swing-back {
  556.   0% {
  557.     transform: rotate(82deg);
  558.   }
  559.   100% {
  560.     transform: rotate(0);
  561.   }
  562. }
  563. .swing:focus,
  564. .swing:active {
  565.   color: #377D6A;
  566.   text-indent: 0;
  567.   background: #fff;
  568.   border-top-left-radius: 0;
  569.   border-bottom-left-radius: 0;
  570.   
  571.   &::-webkit-input-placeholder {
  572.     color: #aaa;
  573.   }
  574.   + label {
  575.     animation: swing 1.4s 1 ease-in-out;
  576.     transform: rotate(82deg);
  577.   }
  578. }
  579. .balloon {
  580.   // As suggested by https://twitter.com/dbox/status/365888496486985728
  581.   display: inline-block;
  582.   width: 215px;
  583.   padding: 10px 0 10px 15px;
  584.   font-family: "Open Sans", sans;
  585.   font-weight: 400;
  586.   color: #377D6A;
  587.   background: #efefef;
  588.   border: 0;
  589.   border-radius: 3px;
  590.   outline: 0;
  591.   text-indent: 60px; // Arbitrary.
  592.   transition: all .3s ease-in-out;
  593.   
  594.   &::-webkit-input-placeholder {
  595.     color: #efefef;
  596.     text-indent: 0;
  597.     font-weight: 300;
  598.   }
  599.  
  600.   + label {
  601.     display: inline-block;
  602.     position: absolute;
  603.     top: 8px;
  604.     left: 0;
  605.     bottom: 8px;
  606.     padding: 5px 15px;
  607.     color: #032429;
  608.     font-size: 11px;
  609.     font-weight: 700;
  610.     text-transform: uppercase;
  611.     text-shadow: 0 1px 0 rgba(19,74,70,0);
  612.     transition: all .3s ease-in-out;
  613.     border-radius: 3px;
  614.     background: rgba(122,184,147,0);
  615.     
  616.     &:after {
  617.       position: absolute;
  618.       content: "";
  619.       width: 0;
  620.       height: 0;
  621.       top: 100%;
  622.       left: 50%;
  623.       margin-left: -3px;
  624.       border-left: 3px solid transparent;
  625.       border-right: 3px solid transparent;
  626.       border-top: 3px solid rgba(122,184,147,0);
  627.       transition: all .3s ease-in-out;
  628.     }
  629.   }
  630. }
  631. .balloon:focus,
  632. .balloon:active {
  633.   color: #377D6A;
  634.   text-indent: 0;
  635.   background: #fff;
  636.   
  637.   &::-webkit-input-placeholder {
  638.     color: #aaa;
  639.   }
  640.   + label {
  641.     color: #fff;
  642.     text-shadow: 0 1px 0 rgba(19,74,70,.4);
  643.     background: rgba(122,184,147,1);
  644.     transform: translateY(-40px);
  645.     
  646.     &:after {
  647.       border-top: 4px solid rgba(122,184,147,1);
  648.     }
  649.   }
  650. }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS3热门文章

  • CSS3选择器新增问题的实现_css3_CSS
  • CSS3实现列表无限滚动/轮播效果_css3_CSS
  • CSS3 Tab动画实例之背景切换动态效果_css3_CSS
  • Github上流行的CSS3动画效果库 animate.css
  • CSS3通过var()和calc()函数实现动画特效_css3_CSS
  • CSS3动画之DIY Loading动画
  • CSS中这个函数你会用吗？垂直居中都可以设置
  • 巧用 CSS3的webkit-box-reflect 倒影实现各类动效_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3过渡旋转透视2d3d动画等效果的实例代码_css3_CSS

    • CSS3推荐文章

  • 【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究
  • 可视化学习：如何生成简单动画让图形动起来
  • 【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果
  • 【动画进阶】神奇的背景，生化危机4日食 Loading 动画还原
  • 【动画进阶】神奇的 3D 磨砂玻璃透视效果
  • 快速构建页面结构的 3D Visualization
  • 详解CSS3.0(Cascading Style Sheet) 层叠级联样式表_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3实现的侧滑菜单_css3_CSS
  • CSS3常见动画的实现方式_css3_CSS

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号