1. <!DOCTYPE html>
  2. <html lang="zh">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>.</title>
  8.     <link rel="stylesheet" type="text/css" href="css/normalize.css" />
  9.     <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css" />
  10.     <link
  11.       href="https://fonts.googleapis.com/css?family=Lato:400,300,700,900"
  12.       rel="stylesheet"
  13.       type="text/css"
  14.     />
  15.     <link rel="stylesheet" type="text/css" href="css/style.css" />
  16.     <!--[if IE]>
  17.       <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
  18.     <![endif]-->
  19.     <style>
  20.       body {
  21.         font-family: Lato, "Open Sans", sans-sarif;
  22.         font-size: 16px;
  23.       }
  24.       * {
  25.         margin: 0;
  26.         padding: 0;
  27.         box-sizing: border-box;
  28.       }
  29.       .container {
  30.         margin: 0 auto;
  31.         max-width: 1000px;
  32.       }
  33.       .row {
  34.         width: 103%;
  35.         float: left;
  36.         margin: 110px -1.5%;
  37.       }
  38.  
  39.       /*= common css to all effects =*/
  40.       .single-member {
  41.         width: 280px;
  42.         float: left;
  43.         margin: 30px 2.5%;
  44.         background-color: #fff;
  45.         text-align: center;
  46.         position: relative;
  47.       }
  48.       .member-image img {
  49.         max-width: 100%;
  50.         vertical-align: middle;
  51.       }
  52.       h3 {
  53.         font-size: 24px;
  54.         font-weight: normal;
  55.         margin: 10px 0 0;
  56.         text-transform: uppercase;
  57.       }
  58.       h5 {
  59.         font-size: 16px;
  60.         font-weight: 300;
  61.         margin: 0 0 15px;
  62.         line-height: 22px;
  63.       }
  64.       p {
  65.         font-size: 14px;
  66.         font-weight: 300;
  67.         line-height: 22px;
  68.         padding: 0 30px;
  69.         margin-bottom: 10px;
  70.       }
  71.       .social-touch a {
  72.         display: inline-block;
  73.         width: 27px;
  74.         height: 26px;
  75.         vertical-align: middle;
  76.         margin: 0 2px;
  77.         background-image: url(111.png);
  78.         background-repeat: no-repeat;
  79.         opacity: 0.7;
  80.         transition: 0.3s;
  81.       }
  82.       .social-touch a:hover {
  83.         opacity: 1;
  84.         transition: 0.3s;
  85.       }
  86.       .fb-touch {
  87.         background-position: 0 0;
  88.       }
  89.       .tweet-touch {
  90.         background-position: -35px 0;
  91.       }
  92.       .linkedin-touch {
  93.         background-position: -71px 0;
  94.       }
  95.       .icon-colored .fb-touch {
  96.         background-position: 0 -27px;
  97.       }
  98.       .icon-colored .tweet-touch {
  99.         background-position: -35px -27px;
  100.       }
  101.       .icon-colored .linkedin-touch {
  102.         background-position: -71px -27px;
  103.       }
  104.       /*= common css to all effects end =*/
  105.  
  106.       /*= effect-1 css =*/
  107.       .effect-1 {
  108.         border-radius: 5px 5px 0 0;
  109.         padding-bottom: 40px;
  110.       }
  111.       .effect-1 .member-image {
  112.         border: 2px solid #fff;
  113.         border-radius: 60px 0;
  114.         display: inline-block;
  115.         margin-top: -72px;
  116.         overflow: hidden;
  117.         transition: 0.3s;
  118.       }
  119.       .effect-1 .social-touch {
  120.         background-color: #e13157;
  121.         position: absolute;
  122.         left: 0;
  123.         bottom: 0;
  124.         height: 5px;
  125.         overflow: hidden;
  126.         padding: 5px 0 0;
  127.         width: 100%;
  128.         transition: 0.3s;
  129.       }
  130.       .effect-1 .member-image img {
  131.         transition: 0.3s;
  132.         border-radius: 60px 0;
  133.       }
  134.       .effect-1:hover .member-image {
  135.         border-color: #e13157;
  136.         transition: 0.3s;
  137.         border-radius: 50%;
  138.       }
  139.       .effect-1:hover .social-touch {
  140.         padding: 6px 0;
  141.         height: 38px;
  142.         transition: 0.3s;
  143.       }
  144.       /*= effect-1 css end =*/
  145.  
  146.       /*= effect-2 css =*/
  147.       .effect-2 {
  148.         max-height: 302px;
  149.         min-height: 302px;
  150.         overflow: hidden;
  151.       }
  152.       .effect-2 h3 {
  153.         padding-top: 7px;
  154.         line-height: 33px;
  155.       }
  156.       .effect-2 .member-image {
  157.         border-bottom: 5px solid #1fb554;
  158.         height: 212px;
  159.         overflow: hidden;
  160.         width: 100%;
  161.         transition: 0.4s;
  162.         display: inline-block;
  163.         float: none;
  164.         vertical-align: middle;
  165.       }
  166.       .effect-2 .member-info {
  167.         transition: 0.4s;
  168.       }
  169.       .effect-2 .member-image img {
  170.         width: 100%;
  171.         vertical-align: bottom;
  172.       }
  173.       .effect-2 .social-touch {
  174.         background-color: #1fb554;
  175.         float: left;
  176.         left: 0;
  177.         bottom: 0;
  178.         overflow: hidden;
  179.         padding: 5px 0;
  180.         width: 100%;
  181.         transition: 0.4s;
  182.       }
  183.       .effect-2:hover .member-image {
  184.         height: 81px;
  185.         transition: 0.4s;
  186.       }
  187.       /*= effect-2 css end =*/
  188.  
  189.       /*= effect-3 css =*/
  190.       .effect-3 {
  191.         max-height: 302px;
  192.         min-height: 302px;
  193.         overflow: hidden;
  194.       }
  195.       .effect-3 h3 {
  196.         padding-top: 7px;
  197.         line-height: 33px;
  198.       }
  199.       .effect-3 .member-image {
  200.         border-bottom: 5px solid #e5642b;
  201.         transition: 0.4s;
  202.         height: 212px;
  203.         width: 100%;
  204.         display: inline-block;
  205.         float: none;
  206.         vertical-align: middle;
  207.       }
  208.       .effect-3 .member-info {
  209.         transition: 0.4s;
  210.       }
  211.       .effect-3 .member-image img {
  212.         width: 100%;
  213.         vertical-align: bottom;
  214.       }
  215.       .effect-3 .social-touch {
  216.         background-color: #e5642b;
  217.         float: left;
  218.         left: 0;
  219.         bottom: 0;
  220.         overflow: hidden;
  221.         padding: 5px 0;
  222.         width: 100%;
  223.         transition: 0.4s;
  224.       }
  225.       .effect-3:hover .member-image {
  226.         border-bottom: 0;
  227.         border-radius: 0 0 50px 50px;
  228.         height: 81px;
  229.         display: inline-block;
  230.         overflow: hidden;
  231.         width: 109px;
  232.         transition: 0.4s;
  233.       }
  234.       /*= effect-3 css end =*/
  235.  
  236.       /*= effect-4 css =*/
  237.       .effect-4 {
  238.         max-height: 289px;
  239.         min-height: 289px;
  240.         overflow: hidden;
  241.       }
  242.       .effect-4 h3 {
  243.         line-height: 35px;
  244.       }
  245.       .effect-4 .member-image {
  246.         position: absolute;
  247.         width: 100%;
  248.         transition: 0.4s;
  249.       }
  250.       .effect-4 .member-image img {
  251.         width: 100%;
  252.       }
  253.       .effect-4 .more-info {
  254.         height: 0;
  255.         transition: 0.4s;
  256.         overflow: hidden;
  257.         z-index: 9;
  258.         position: relative;
  259.         background-color: #fff;
  260.       }
  261.       .effect-4:hover .more-info {
  262.         height: 208px;
  263.         transition: 0.4s;
  264.       }
  265.       /*= effect-4 css end =*/
  266.  
  267.       /*= effect-5 css =*/
  268.       .effect-5 {
  269.         max-height: 289px;
  270.         min-height: 289px;
  271.         overflow: hidden;
  272.       }
  273.       .effect-5 .member-info {
  274.         background-color: #fff;
  275.         position: absolute;
  276.         width: 100%;
  277.         top: 0;
  278.         left: 0;
  279.         height: 82px;
  280.         transition: 0.3s;
  281.         z-index: 2;
  282.       }
  283.       .effect-5 .member-image {
  284.         margin-top: 82px;
  285.         float: left;
  286.         width: 100%;
  287.         position: relative;
  288.         transition: 0.3s;
  289.         z-index: 4;
  290.       }
  291.       .effect-5 .member-image img {
  292.         width: 100%;
  293.       }
  294.       .effect-5 .member-info:before {
  295.         border-left: 140px solid transparent;
  296.         border-right: 140px solid transparent;
  297.         border-top: 15px solid #fff;
  298.         bottom: -15px;
  299.         content: "";
  300.         left: 0;
  301.         position: absolute;
  302.         z-index: 9;
  303.       }
  304.       .effect-5:hover .member-info {
  305.         height: 215px;
  306.         transition: 0.3s;
  307.         z-index: 6;
  308.       }
  309.       .effect-5:hover .member-image {
  310.         margin-top: 200px;
  311.         transition: 0.3s;
  312.       }
  313.       /*= effect-5 css end =*/
  314.  
  315.       /*= effect-6 css =*/
  316.       .effect-6 {
  317.         max-height: 289px;
  318.         min-height: 289px;
  319.         overflow: hidden;
  320.       }
  321.       .effect-6 .member-info {
  322.         background-color: #fff;
  323.         position: absolute;
  324.         width: 100%;
  325.         top: 0;
  326.         left: 0;
  327.         height: 82px;
  328.         transition: 0.3s;
  329.         z-index: 2;
  330.       }
  331.       .effect-6 .member-image {
  332.         margin-top: 82px;
  333.         float: left;
  334.         width: 100%;
  335.         position: relative;
  336.         transition: 0.3s;
  337.         z-index: 4;
  338.         overflow: hidden;
  339.       }
  340.       .effect-6 .member-image img {
  341.         width: 100%;
  342.       }
  343.       .effect-6:hover .member-info {
  344.         height: 215px;
  345.         transition: 0.3s;
  346.         z-index: 6;
  347.         border-radius: 0 0 50% 50%;
  348.         overflow: hidden;
  349.       }
  350.       .effect-6:hover .member-image {
  351.         margin-top: 100px;
  352.         transition: 0.3s;
  353.         border-radius: 0;
  354.       }
  355.       /*= effect-6 css end =*/
  356.  
  357.       /*= effect-7 css =*/
  358.       .effect-7 {
  359.         max-height: 289px;
  360.         min-height: 289px;
  361.         overflow: hidden;
  362.       }
  363.       .effect-7 h3 {
  364.         line-height: 35px;
  365.       }
  366.       .effect-7 .member-image {
  367.         position: absolute;
  368.         bottom: 0;
  369.         width: 100%;
  370.         transition: 0.4s;
  371.         z-index: 1;
  372.       }
  373.       .effect-7 .member-image img {
  374.         width: 100%;
  375.         transition: 0.4s;
  376.         opacity: 1;
  377.         height: 100%;
  378.       }
  379.       .effect-7 .more-info {
  380.         height: 208px;
  381.         transition: 0.4s;
  382.         overflow: hidden;
  383.         position: relative;
  384.         background-color: #fff;
  385.       }
  386.       .effect-7:hover .member-image {
  387.         bottom: 40%;
  388.       }
  389.       .effect-7:hover .member-image img {
  390.         width: 0;
  391.         height: 0;
  392.         transition: 0.4s;
  393.         opacity: 0;
  394.       }
  395.       /*= effect-7 css end =*/
  396.  
  397.       /*= effect-8 css =*/
  398.       .effect-8 {
  399.         max-height: 289px;
  400.         min-height: 289px;
  401.         overflow: hidden;
  402.         perspective: 800px;
  403.       }
  404.       .effect-8 h3 {
  405.         line-height: 35px;
  406.       }
  407.       .effect-8 .member-image {
  408.         position: absolute;
  409.         bottom: 0;
  410.         width: 100%;
  411.         transition: 0.4s;
  412.         z-index: 1;
  413.       }
  414.       .effect-8 .member-image img {
  415.         width: 100%;
  416.         transition: 0.4s;
  417.         height: 100%;
  418.       }
  419.       .effect-8 .more-info {
  420.         height: 208px;
  421.         transition: 0.4s;
  422.         overflow: hidden;
  423.         position: relative;
  424.         background-color: #fff;
  425.       }
  426.       .effect-8:hover .member-image {
  427.         transform: rotateX(82deg);
  428.         transform-origin: center bottom 0;
  429.         transition: 0.4s;
  430.       }
  431.       /*= effect-8 css end =*/
  432.  
  433.       /*= effect-9 css =*/
  434.       .effect-9 {
  435.         max-height: 289px;
  436.         min-height: 289px;
  437.         overflow: hidden;
  438.         perspective: 800px;
  439.       }
  440.       .effect-9 h3 {
  441.         line-height: 35px;
  442.       }
  443.       .effect-9 .member-image {
  444.         position: absolute;
  445.         bottom: 0;
  446.         width: 100%;
  447.         transition: 0.4s;
  448.         z-index: 1;
  449.       }
  450.       .effect-9 .member-image img {
  451.         width: 100%;
  452.         transition: 0.4s;
  453.         height: 100%;
  454.       }
  455.       .effect-9 .more-info {
  456.         height: 208px;
  457.         transition: 0.4s;
  458.         overflow: hidden;
  459.         position: relative;
  460.         background-color: #fff;
  461.       }
  462.       .effect-9:hover .member-image {
  463.         transform: translateY(100%);
  464.         transition: 0.4s;
  465.       }
  466.       /*= effect-9 css end =*/
  467.  
  468.       /*= Media Query
  469. =============== */
  470.       @media only screen and (max-width: 980px) {
  471.         .row {
  472.           width: 100%;
  473.           margin: 110px 0;
  474.         }
  475.         .team-members {
  476.           text-align: center;
  477.         }
  478.         .single-member {
  479.           float: none;
  480.           display: inline-block;
  481.           vertical-align: bottom;
  482.         }
  483.       }
  484.       /*= Media Query End
  485. =================== */
  486.     </style>
  487.   </head>
  488.   <body>
  489.     <div class="htmleaf-container">
  490.       <header class="htmleaf-header">
  491.         <h1>9种纯CSS3人物信息卡片动态展示效果<span></span></h1>
  492.       </header>
  493.       <div class="full-length">
  494.         <div class="container">
  495.           <div class="team-members row">
  496.             <div class="single-member effect-1">
  497.               <div class="member-image">
  498.                 <img src="bg.jpg" alt="Member" />
  499.               </div>
  500.               <div class="member-info">
  501.                 <h3>Sophia</h3>
  502.                 <h5>ShowGilr</h5>
  503.                 <p>
  504.                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
  505.                   do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  506.                 </p>
  507.                 <div class="social-touch">
  508.                   <a class="fb-touch" href="#"></a>
  509.                   <a class="tweet-touch" href="#"></a>
  510.                   <a class="linkedin-touch" href="#"></a>
  511.                 </div>
  512.               </div>
  513.             </div>
  514.  
  515.             <div class="single-member effect-2">
  516.               <div class="member-image">
  517.                 <img src="bg.jpg" alt="Member" />
  518.               </div>
  519.               <div class="member-info">
  520.                 <h3>Sophia</h3>
  521.                 <h5>ShowGilr</h5>
  522.                 <p>
  523.                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
  524.                   do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  525.                 </p>
  526.                 <div class="social-touch">
  527.                   <a class="fb-touch" href="#"></a>
  528.                   <a class="tweet-touch" href="#"></a>
  529.                   <a class="linkedin-touch" href="#"></a>
  530.                 </div>
  531.               </div>
  532.             </div>
  533.  
  534.             <div class="single-member effect-3">
  535.               <div class="member-image">
  536.                 <img src="bg.jpg" alt="Member" />
  537.               </div>
  538.               <div class="member-info">
  539.                 <h3>Sophia</h3>
  540.                 <h5>ShowGilr</h5>
  541.                 <p>
  542.                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
  543.                   do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  544.                 </p>
  545.                 <div class="social-touch">
  546.                   <a class="fb-touch" href="#"></a>
  547.                   <a class="tweet-touch" href="#"></a>
  548.                   <a class="linkedin-touch" href="#"></a>
  549.                 </div>
  550.               </div>
  551.             </div>
  552.  
  553.             <div class="single-member effect-4">
  554.               <div class="member-info">
  555.                 <h3>Sophia</h3>
  556.                 <h5>ShowGilr</h5>
  557.               </div>
  558.               <div class="member-image">
  559.                 <img src="bg.jpg" alt="Member" />
  560.               </div>
  561.               <div class="more-info">
  562.                 <p>
  563.                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
  564.                   do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  565.                   Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do
  566.                   eiusmod tempor incididunt.
  567.                 </p>
  568.                 <div class="social-touch icon-colored">
  569.                   <a class="fb-touch" href="#"></a>
  570.                   <a class="tweet-touch" href="#"></a>
  571.                   <a class="linkedin-touch" href="#"></a>
  572.                 </div>
  573.               </div>
  574.             </div>
  575.  
  576.             <div class="single-member effect-5">
  577.               <div class="member-image">
  578.                 <img src="bg.jpg" alt="Member" />
  579.               </div>
  580.               <div class="member-info">
  581.                 <h3>Sophia</h3>
  582.                 <h5>ShowGilr</h5>
  583.                 <p>
  584.                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
  585.                   do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  586.                 </p>
  587.                 <div class="social-touch icon-colored">
  588.                   <a class="fb-touch" href="#"></a>
  589.                   <a class="tweet-touch" href="#"></a>
  590.                   <a class="linkedin-touch" href="#"></a>
  591.                 </div>
  592.               </div>
  593.             </div>
  594.  
  595.             <div class="single-member effect-6">
  596.               <div class="member-image">
  597.                 <img src="bg.jpg" alt="Member" />
  598.               </div>
  599.               <div class="member-info">
  600.                 <h3>Sophia</h3>
  601.                 <h5>ShowGilr</h5>
  602.                 <p>
  603.                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
  604.                   do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  605.                 </p>
  606.                 <div class="social-touch icon-colored">
  607.                   <a class="fb-touch" href="#"></a>
  608.                   <a class="tweet-touch" href="#"></a>
  609.                   <a class="linkedin-touch" href="#"></a>
  610.                 </div>
  611.               </div>
  612.               <div class="border-green"></div>
  613.             </div>
  614.  
  615.             <div class="single-member effect-7">
  616.               <div class="member-info">
  617.                 <h3>Sophia</h3>
  618.                 <h5>ShowGilr</h5>
  619.               </div>
  620.               <div class="member-image">
  621.                 <img src="bg.jpg" alt="Member" />
  622.               </div>
  623.               <div class="more-info">
  624.                 <p>
  625.                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
  626.                   do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  627.                   Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do
  628.                   eiusmod tempor incididunt.
  629.                 </p>
  630.                 <div class="social-touch icon-colored">
  631.                   <a class="fb-touch" href="#"></a>
  632.                   <a class="tweet-touch" href="#"></a>
  633.                   <a class="linkedin-touch" href="#"></a>
  634.                 </div>
  635.               </div>
  636.             </div>
  637.  
  638.             <div class="single-member effect-8">
  639.               <div class="member-info">
  640.                 <h3>Sophia</h3>
  641.                 <h5>ShowGilr</h5>
  642.               </div>
  643.               <div class="member-image">
  644.                 <img src="bg.jpg" alt="Member" />
  645.               </div>
  646.               <div class="more-info">
  647.                 <p>
  648.                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
  649.                   do eiusmod tempor incididunt ut labore et dolore magna aliqua,
  650.                   Lorem ipsum dolor sit amet.
  651.                 </p>
  652.                 <div class="social-touch icon-colored">
  653.                   <a class="fb-touch" href="#"></a>
  654.                   <a class="tweet-touch" href="#"></a>
  655.                   <a class="linkedin-touch" href="#"></a>
  656.                 </div>
  657.               </div>
  658.             </div>
  659.  
  660.             <div class="single-member effect-9">
  661.               <div class="member-info">
  662.                 <h3>Sophia</h3>
  663.                 <h5>ShowGilr</h5>
  664.               </div>
  665.               <div class="member-image">
  666.                 <img src="bg.jpg" alt="Member" />
  667.               </div>
  668.               <div class="more-info">
  669.                 <p>
  670.                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
  671.                   do eiusmod tempor incididunt ut labore et dolore magna aliqua,
  672.                   Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do
  673.                   eiusmod tempor incididunt.
  674.                 </p>
  675.                 <div class="social-touch icon-colored">
  676.                   <a class="fb-touch" href="#"></a>
  677.                   <a class="tweet-touch" href="#"></a>
  678.                   <a class="linkedin-touch" href="#"></a>
  679.                 </div>
  680.               </div>
  681.             </div>
  682.           </div>
  683.         </div>
  684.       </div>
  685.     </div>
  686.   </body>
  687. </html>

内容来自https://www.jianshu.com/p/4050f8ed6b1b

9种纯CSS3人物信息卡片动态展示效果的更多相关文章

  1. 纯CSS3实现的动感菜单效果

    1. [代码] 纯CSS3实现的动感菜单效果 <!DOCTYPE html><head><meta http-equiv="Content-Type" ...

  2. Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果，一款强大的扁平化长投影制造器。

    Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器. Long Shadows Generate 彩蛋爆料直击现场 Long Shadow ...

  3. 纯CSS3实现常见多种相册效果

    本文包含 1.CSS3中2D转换和3D转换的介绍. 2.在相册中的应用实例. CSS3中的转换效果和动画效果十分强大好用,可以实现一些常见的动态效果. 如此一来,CSS3便可以代替许多jQuery的功 ...

  4. 纯CSS3实现轮播切换效果

    使用纯css3实现与轮播器一样的功能. HTML代码: <div class="slide-container"> <input type="radio ...

  5. web CSS3 实现3D动态翻牌效果

    使用纯CSS3 实现翻牌效果  需要注意要给子盒子使用绝对定位,这样两个盒子可以完全重合在一起,需要给父盒子一个 transform-style: preserve-3d;让子盒子翻转时保持3D效果, ...

  6. 纯css3实现文字间歇滚动效果

    场景: 假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据.效果如图: 用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客.考虑到项目中经常使用V ...

  7. 纯css3代码写无缝滚动效果

    主要用到css3中的动画 @keyframes, animation. 布局是外层一个div宽固定,然后overflow hidden 绝对定位,里面的ul 固定定位.通过对ul添加动画来实现效果.具 ...

  8. 纯Css3手工打造网页图片效果

    .rotate-demo { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("http://i ...

  9. CSS3特效----图片动态提示效果

    需掌握的知识点: 1.掌握两个HTML5新标签figure以及figcaption的用法 2.掌握transform的属性特点,并能熟练运用 3.学会通过transition及transform配合, ...

随机推荐

  1. The import javax.websocket cannot be resolved的解决问题

    在eclipse中导入项目的时候出现了这个问题,废了我半天劲,才搞明白,把问题记录下来,方便大家以后遇到这问题好处理.提供参考. 出现的问题截图: 因为我用的是tomcat8, 大体步骤:项目上点右键 ...

  2. Python面试常考点之深入浅出链表操作

    Python面试常考点之深入浅出链表操作 在Python开发的面试中,我们经常会遇到关于链表操作的问题.链表作为一个非常经典的无序列表结构,也是一个开发工程师必须掌握的数据结构之一.在本文中,我将针对 ...

  3. k-means算法处理聚类标签不足的异常

    k-means算法在人群聚类场景中,是一个非常实用的工具.(该算法的原理可以参考K-Means算法的Python实现) 常见调用方式 该算法常规的调用方式如下: # 从sklearn引包 from s ...

  4. BZOJ 4835: 遗忘之树

    传送门 首先设 $f[x]$ 表示点分树上 $x$ 的子树内的方案数 发现对于 $x$ 的每个儿子 $v$ ,$x$ 似乎可以向 $v$ 子树内的每个节点连边,因为不管怎么连重心都不会变 显然是错的, ...

  5. O038、Shelve Instance 操作详解

    参考https://www.cnblogs.com/CloudMan6/p/5524751.html   Instance 被 Suspend 后虽然处于 shutdown 状态,但 Hypervis ...

  6. cookie、sessionStorage和localStorage区别

    // 数据存储 cookie:生命周期一般是手动设置失效的时间,大小为4k,易用性不高,需要自己封装(封装请看上一篇博客) sessionStorage:生命周期是浏览器关闭接失效,大小为5m或者更大 ...

  7. tensorflow-解决3个问题

    问题一:对特征归一化 Min-Max Scaling: X′=a+(X−Xmin)(b−a)/(Xmax−Xmin) # Problem 1 - Implement Min-Max scaling f ...

  8. REST easy with kbmMW #1

    kbmMW 5.0支持REST服务器的开发,并且非常简单,下面看看如何实作一个REST服务器. 首先我们制作一个服务器应用程序,增加一个简单的Form,并放置kbmMW组件. 在Delphi中单击Fi ...

  9. Linux服务器开发：工具

    预处理 将所有#defined删除,并且展开 处理所有条件预处理指令 处理#include,将被包含的文件插入到该预编译指令的位置 过滤所有的//./**/ 保留所有#pragma编译指令 编译 词法 ...

  10. Phoenix批量提交优化，官网的demo

    1 Phoenix的批量insert官网代码,最佳实践 try (Connection conn = DriverManager.getConnection(url)) { conn.setAutoC ...