CSS

1、弹动效果实现

代码实现

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <meta name="viewport" content= 
  6.         "width=device-width, initial-scale=1.0" /> 
  7.     <title> 
  8.        CSS个人博客样式特效实例 
  9.     </title> 
  11.     <style> 
  12.       .shake{
  13.         width:40px;
  14.         height:40px;
  15.         display:block;
  16.         background:lightgreen;
  17.         border-radius:50%;
  18.         margin:5px;
  19.         color:#fff;
  20.         font-size:24px;
  21.         text-align:center;
  22.         line-height:40px;
  23.         cursor:pointer;
  24.         -webkit-transition:all 0.25s;
  25.       }
  26.       .shake:hover{
  27.         -webkit-animation:shake 0.25s;
  28.         background: lightblue;
  29.       }
  30.       @-webkit-keyframes shake{
  31.         0%,10%,55%,90%,94%,98%,100%{
  32.           -webkit-transform:scale(1,1);
  33.         }
  34.         30%{
  35.           -webkit-transform:scale(1.14,0.86);
  36.         }
  37.         75%{
  38.           -webkit-transform:scale(0.92,1.08);
  39.         }
  40.         92%{
  41.           -webkit-transform:scale(1.04,0.96);
  42.         }
  43.         96%{
  44.           -webkit-transform:scale(1.02,0.98);
  45.         }
  46.         99%{
  47.           -webkit-transform:scale(1.01,0.99);
  48.         }
  49.       }
  50. </style> 
  51. </head> 
  53. <body> 
  54.     <span class="shake">弹</span>
  55. </body> 
  57. </html>

效果

GIF 2020-9-11-星期五 21-38-39.gif

2、搜索框输入时拉伸

代码实现

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <meta name="viewport" content= 
  6.         "width=device-width, initial-scale=1.0" /> 
  7.     <title> 
  8.        CSS个人博客样式特效实例 
  9.     </title> 
  11.     <style> 
  12.       .search{
  13.         width:80px;
  14.         height:40px;
  15.         border-radius:40px;
  16.         border:2px solid lightblue;
  17.         position: absolute;
  18.         right:200px;
  19.         outline:none;
  20.         text-indent:12px;
  21.         color:#666;
  22.         font-size:16px;
  23.         padding:0;
  24.         -webkit-transition:width 0.5s;
  25.       }
  26.       .search:focus{
  27.         width:200px;
  28.       }
  29. </style> 
  30. </head> 
  32. <body> 
  33.     <input class="search" type="text" placeholder="搜索...">
  34. </body> 
  36. </html>

效果

GIF 2020-9-11-星期五 21-41-29.gif

3、旋转条样式

代码实现

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <meta name="viewport" content= 
  6.         "width=device-width, initial-scale=1.0" /> 
  7.     <title> 
  8.        CSS个人博客样式特效实例 
  9.     </title> 
  11.     <style> 
  12.       .banner{
  13.         width:234px;
  14.         height:34px;
  15.         border-radius:34px;
  16.         position:absolute;
  17.         top:400px;
  18.         left:200px;
  19.       }
  20.       .banner a{
  21.         display:inline-block;
  22.         width:30px;
  23.         height:30px;
  24.         line-height:30px;
  25.         border-radius:50%;
  26.         border:2px solid lightblue;
  27.         position:absolute;
  28.         left:0px;top:0px;
  29.         background:lightgreen;
  30.         color:#fff;
  31.         text-align:center;
  32.         text-decoration:none;
  33.         cursor:pointer;
  34.         z-index:2;
  35.       }
  36.       .banner a:hover + span{
  37.         -webkit-transform:rotate(360deg);
  38.         opacity:1;
  39.       }
  40.       .banner span{
  41.         display:inline-block;
  42.         width:auto;
  43.         padding:0 20px;
  44.         height:34px;
  45.         line-height:34px;
  46.         background:lightblue;
  47.         border-radius:34px;
  48.         text-align: center;
  49.         position:absolute;
  50.         color:#fff;
  51.         text-indent:25px;
  52.         opacity:0;
  53.         -webkit-transform-origin:8% center;
  54.         -webkit-transition:all 1s;
  55.       }
  56. </style> 
  57. </head> 
  59. <body> 
  60.     <div class="banner">
  61.         <a href="javascript:;">博</a>
  62.         <span>这是我的个人博客</span>
  63.     </div>
  64. </body> 
  66. </html>

效果

GIF 2020-9-11-星期五 21-46-07.gif

4、右进右出条样式

代码实现

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <meta name="viewport" content= 
  6.         "width=device-width, initial-scale=1.0" /> 
  7.     <title> 
  8.        CSS个人博客样式特效实例 
  9.     </title> 
  11.     <style> 
  12.       .banner{
  13.         width:234px;
  14.         height:34px;
  15.         border-radius:40px;
  16.         position:absolute;
  17.         top:400px;
  18.         left:600px;
  19.       }
  20.       .banner a{
  21.         display:inline-block;
  22.         width:30px;
  23.         height:30px;
  24.         line-height:30px;
  25.         border-radius:50%;
  26.         border:2px solid lightblue;
  27.         position:absolute;
  28.         left:0px;top:0px;
  29.         background:lightgreen;
  30.         color:#fff;
  31.         text-align:center;
  32.         text-decoration:none;
  33.         cursor:pointer;
  34.         z-index:2;
  35.       }
  36.       .banner a:hover + span{
  37.         -webkit-transform:translateX(40px);
  38.         opacity:1;
  39.       }
  40.       .banner span{
  41.         display:inline-block;
  42.         width:auto;
  43.         padding:0 20px;
  44.         height:30px;line-height:30px;
  45.         background:lightblue;
  46.         border-radius:30px;
  47.         text-align: center;
  48.         color:#fff;
  49.         position:absolute;
  50.         top:2px;
  51.         opacity:0;
  52.         -webkit-transition:all 1s;
  53.         -webkit-transform:translateX(80px);
  54.       }
  55. </style> 
  56. </head> 
  58. <body> 
  59.     <div class="banner">
  60.         <a href="javascript:;">博</a>
  61.         <span>这是我的个人博客</span>
  62.     </div>
  63. </body> 
  65. </html>

效果

GIF 2020-9-11-星期五 21-50-36.gif

5、旋转标签

代码实现

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8" /> 
  5.     <meta name="viewport" content= 
  6.         "width=device-width, initial-scale=1.0" /> 
  7.     <title> 
  8.        CSS个人博客样式特效实例 
  9.     </title> 
  11.     <style> 
  12.       .wrapper{
  13.         width:100px;
  14.         height:100px;
  15.         background:lightblue;
  16.         border-radius:50%;
  17.         border:2px solid lightgreen;
  18.         position: absolute;
  19.         top:200px;
  20.         left:400px;
  21.         cursor:pointer;
  22.       }
  23.       .wrapper:after{
  24.         content:'你猜';
  25.         display:inline-block;
  26.         width:100px;
  27.         height:100px;
  28.         line-height:100px;
  29.         border-radius:50%;
  30.         text-align:center;
  31.         color:#fff;
  32.         font-size:24px;
  33.       }
  34.       .wrapper:hover .round{
  35.         -webkit-transform:scale(1);
  36.         opacity:1;
  37.         -webkit-animation:rotating 6s 1.2s linear infinite alternate;
  38.       }
  39.       @-webkit-keyframes rotating{
  40.         0%{
  41.           -webkit-transform:rotate(0deg);
  42.         }
  43.         100%{
  44.           -webkit-transform:rotate(180deg);
  45.         }
  46.       }
  47.       .round{
  48.         width:240px;
  49.         height:240px;
  50.         border:2px solid lightgreen;
  51.         border-radius:50%;
  52.         position: absolute;
  53.         top:-70px;
  54.         left:-70px;
  55.         -webkit-transition:all 1s;
  56.         -webkit-transform:scale(0.35);
  57.         opacity:0;
  58.       }
  59.       .round span{
  60.         width:40px;
  61.         height:40px;
  62.         line-height:40px;
  63.         display:inline-block;
  64.         border-radius:50%;
  65.         background:lightblue;
  66.         border:2px solid lightgreen;
  67.         color:#fff;
  68.         text-align:center;
  69.         position:absolute;
  70.       }
  71.       .round span:nth-child(1){
  72.         right:-22px;
  73.         top:50%;
  74.         margin-top:-22px;
  75.       }
  76.       .round span:nth-child(2){
  77.         left:-22px;
  78.         top:50%;
  79.         margin-top:-22px;
  80.       }
  81.       .round span:nth-child(3){
  82.         left:50%;
  83.         bottom:-22px;
  84.         margin-left:-22px;
  85.       }
  86.       .round span:nth-child(4){
  87.         left:50%;
  88.         top:-22px;
  89.         margin-left:-22px;
  90.       }
  91. </style> 
  92. </head> 
  94. <body> 
  95.     <div class="wrapper">
  96.         <div class="round">
  97.             <span>东邪</span>
  98.             <span>西毒</span>
  99.             <span>南乞</span>
  100.             <span>北丐</span>
  101.         </div>
  102.     </div>
  103. </body> 
  105. </html>

效果

GIF 2020-9-11-星期五 21-53-50.gif