owsieman
关注
23021 号成员,2018-06-27 20:39:56 加入
745
个人主页 浏览
  • 通过 Markdown+CSS 实现文章的动画效果

    2018-07-01 15:16

    忘记给出代码了:在这里补上

    <style>
    
    .container {
      width: 280px;
      margin: 0 auto;
      padding: 40px 0;
      background-color: #f0f3f9;
      animation: width 2s infinite alternate;
    }
    
    @keyframes width {
      from { width: 200px; }
      to { width: 280px; }
    }
    
    .textarea {
      padding: 9px 8px;
      border: 1px solid #d0d0d5;
      border-radius: 4px;
      background-color: #fff;  
    }
    
    .textarea > textarea {
      width: 100%;
      line-height: 20px;
      padding: 0;
      border: 0 none;
      outline: 0 none;
      background: none;
      resize: none;
    }
    </style>
    <div class="container">
      <div class="textarea">
        <textarea rows="5" placeholder="这里是代码:<style>
    .container {
      width: 280px;
      margin: 0 auto;
      padding: 40px 0;
      background-color: #f0f3f9;
      animation: width 2s infinite alternate;
    }
    
    @keyframes width {
      from { width: 200px; }
      to { width: 280px; }
    }
    
    .textarea {
      padding: 9px 8px;
      border: 1px solid #d0d0d5;
      border-radius: 4px;
      background-color: #fff;  
    }
    
    .textarea > textarea {
      width: 100%;
      line-height: 20px;
      padding: 0;
      border: 0 none;
      outline: 0 none;
      background: none;
      resize: none;
    }
    </style>
    <div class="container">
    
      <div class="textarea">
    
        <textarea rows="5" placeholder="文本内容,这里可以输入文本"><textarea>
      <div>
    <div>