zoukankan      html  css  js  c++  java
  • [CSS] Transition

    .btn {
      background-color: #00A0D6;
      color: #FFF;
      transition: all 0.4s;
    }
    
    .btn:active,
    .btn:focus,
    .btn:hover {
      background-color: #007DA7;
      color: #E3E3E3;
    }

    When creating a transition, technically all that needs to be specified is the duration. The rest will have defaults, like allease, and 0.

    Transition Position:

    .btn {
      transition: all 0.4s;
    }
    
    .top.content {
    top: 0px;
      
    }
    .bottom.content {
    top: 50px;
    }
    .btn:hover .top {
    top: -50px;
    }
    .btn:hover .bottom {
    top: 0px;
    }
    .btn .content {
    transition: top 0.5s;
    }

    <!DOCTYPE>
    <html lang='en'>
      <head>
        <meta charset='utf-8'>
        <title>Cosplay Happenings</title>
        <link href='level1.css' rel='stylesheet' type='text/css'>
      </head>
      <body>
        <!-- Nav -->
        <nav class='nav'>
          <div class='cell'>
            <a class='nav-logo' href='/'>
              <div class='shing'>
                <img src='logo.png' alt='Sweet Lands' />
              </div>
            </a>
            <ul class='nav-menu'>
              <li><a href='#retweets'>Retweets</a></li>
              <li><a href='#pictures'>Pictures</a></li>
              <li><a href='#event'>Upcoming</a></li>
            </ul>
          </div>
        </nav>
    
        <!-- Header -->
        <header class='header'>
          <div class='cell well'>
            <h1 class='header-title'>Cosplay Happenings</h1>
            <p class='header-subtitle'>Welcome to our candy-coated community!</p>
          </div>
        </header>
    
        <!-- Most Retweeted -->
        <section class='retweets' id='retweets'>
          <div class='cell well'>
            <h2>Most Retweeted</h2>
            <div class='retweet group'>
              <img src='unicorn.jpg' alt='Unicorn' width='200' height='200' />
              <p>
                Sparkles the Unicorn saunters down the Lemony Brick Road and
                prances past the Soda Pop River! Her majestic horn points the way
                to the Frosting Fortress, as her glittery mane and tail sway in the
                bubblegum breeze.
              </p>
            </div>
            <div class='retweet group'>
              <img src='fairy.jpg' alt='Fairy' width='200' height='200' />
              <p>
                Who’s that there in the Candy Corn Fields? Why, it’s Sarsaparilla
                the Sherbet Sprite! He’s thoughtfully pondering which treat to
                partake of next. The Lollipop Forest is in the distance, in case he
                needs a place to rest his sweet head.
              </p>
            </div>
          </div>
        </section>
    
        <!-- Purchase -->
        <section class='pictures' id='pictures'>
          <div class='cell well'>
            <h2>Pictures</h2>
            <ul class='pictures-list group'>
              <li><img src='group-01.jpg' alt='Group' width='200' height='200' /></li>
              <li><img src='cupcake.jpg' alt='Cupcake' width='200' height='200' /></li>
              <li><img src='rainbow.jpg' alt='Rainbow' width='200' height='200' /></li>
              <li><img src='donut.jpg' alt='Donut' width='200' height='200' /></li>
              <li><img src='dog.jpg' alt='Dog' width='200' height='200' /></li>
              <li><img src='fairy.jpg' alt='Fairy' width='200' height='200' /></li>
              <li><img src='unicorn.jpg' alt='Unicorn' width='200' height='200' /></li>
              <li><img src='group-02.jpg' alt='Group' width='200' height='200' /></li>
            </ul>
          </div>
        </section>
    
        <!-- Contact -->
        <section class='event'  id='event'>
          <div class='cell well'>
            <h2>Upcoming Event</h2>
            <div class='event-content'>
              <img src='sweetlandia.png' alt='SweetLandia' width='200' />
              <h3>SweetLandia</h3>
              <p>
                Once upon a time, there was a magical place called Sweet Lands — a
                world we may now only travel to in our imaginations. But one
                weekend every year, when the sugar cane stalks bend toward the east
                and the cotton candy is at its swirliest, the Sweetlandia
                convention brings this wondrous world within reach! So join
                Sparkles, Pierre, and the rest of the gang for a meeting of the
                sweet-minded in sunny Omaha, Nebraska! It’s sure to be your
                sweetest adventure yet.
              </p>
              <div class='event-action'>
                <a href='#' class='btn buy-button'>
                  <span class='top content'>Register Now!</span>
                  <span class='bottom content'>Hurry, Limited Space!</span>
                </a>
              </div>
            </div>
          </div>
        </section>
    
        <!-- Register Modal -->
        <div class='modal-overlay'></div>
        <div class='modal'>
          <div class='modal-header'>
            <a class='modal-close' href='#' aria-label='Close'>&times;</a>
            <h3>Register</h3>
          </div>
          <div class='modal-content'>
            <form class='form' action=''>
              <fieldset class='form-field'>
                <!-- <label class='form-label' for='type'>CC Type</label> -->
                <select class='cs-select cs-skin-elastic' name='type'>
                  <option value='visa'>Visa</option>
                  <option value='mastercard'>MasterCard</option>
                  <option value='american_express'>American Express</option>
                </select>
              </fieldset>
              <fieldset class='form-field'>
                <label class='form-label' for='number'>CC Number</label>
                <input class='form-input' type='text' id='number' />
              </fieldset>
              <fieldset class='form-field'>
                <label class='form-label' for='expiration'>CC Expiration</label>
                <input class='form-input' type='text' id='expiration' />
              </fieldset>
              <div class='form-submit'>
                <input class='btn' type='Submit' value='Submit' />
              </div>
            </form>
          </div>
        </div>
        <script src='application.min.js'></script>
      </body>
    </html>
    .btn {
      transition: all .4s;
    }
    .btn .content {
      transition: all .3s;
    }
    .top.content {
      top: 0px;
    }
    .bottom.content {
      top: 50px;
    }
    .btn:hover .top {
      top: -50px;
    }
    .btn:hover .bottom {
      top: 0px;
    }
    
    .modal,
    .modal-overlay {
      visibility: hidden;
      opacity: 0;
      transition: all 0.5s;
    }
    
    .modal.active,
    .modal-overlay.active {
      visibility: visible;
      opacity: 1;
    }

    --------------------

    <!DOCTYPE>
    <html lang='en'>
      <head>
        <meta charset='utf-8'>
        <title>Cosplay Happenings</title>
        <link href='level1.css' rel='stylesheet' type='text/css'>
      </head>
      <body>
        <!-- Nav -->
        <nav class='nav'>
          <div class='cell'>
            <a class='nav-logo' href='/'>
              <div class='shing'>
                <img src='logo.png' alt='Sweet Lands' />
              </div>
            </a>
            <ul class='nav-menu'>
              <li><a href='#retweets'>Retweets</a></li>
              <li><a href='#pictures'>Pictures</a></li>
              <li><a href='#event'>Upcoming</a></li>
            </ul>
          </div>
        </nav>
    
        <!-- Header -->
        <header class='header'>
          <div class='cell well'>
            <h1 class='header-title'>Cosplay Happenings</h1>
            <p class='header-subtitle'>Welcome to our candy-coated community!</p>
          </div>
        </header>
    
        <!-- Most Retweeted -->
        <section class='retweets' id='retweets'>
          <div class='cell well'>
            <h2>Most Retweeted</h2>
            <div class='retweet group'>
              <img src='unicorn.jpg' alt='Unicorn' width='200' height='200' />
              <p>
                Sparkles the Unicorn saunters down the Lemony Brick Road and
                prances past the Soda Pop River! Her majestic horn points the way
                to the Frosting Fortress, as her glittery mane and tail sway in the
                bubblegum breeze.
              </p>
            </div>
            <div class='retweet group'>
              <img src='fairy.jpg' alt='Fairy' width='200' height='200' />
              <p>
                Who’s that there in the Candy Corn Fields? Why, it’s Sarsaparilla
                the Sherbet Sprite! He’s thoughtfully pondering which treat to
                partake of next. The Lollipop Forest is in the distance, in case he
                needs a place to rest his sweet head.
              </p>
            </div>
          </div>
        </section>
    
        <!-- Purchase -->
        <section class='pictures' id='pictures'>
          <div class='cell well'>
            <h2>Pictures</h2>
            <ul class='pictures-list group'>
              <li><img src='group-01.jpg' alt='Group' width='200' height='200' /></li>
              <li><img src='cupcake.jpg' alt='Cupcake' width='200' height='200' /></li>
              <li><img src='rainbow.jpg' alt='Rainbow' width='200' height='200' /></li>
              <li><img src='donut.jpg' alt='Donut' width='200' height='200' /></li>
              <li><img src='dog.jpg' alt='Dog' width='200' height='200' /></li>
              <li><img src='fairy.jpg' alt='Fairy' width='200' height='200' /></li>
              <li><img src='unicorn.jpg' alt='Unicorn' width='200' height='200' /></li>
              <li><img src='group-02.jpg' alt='Group' width='200' height='200' /></li>
            </ul>
          </div>
        </section>
    
        <!-- Contact -->
        <section class='event'  id='event'>
          <div class='cell well'>
            <h2>Upcoming Event</h2>
            <div class='event-content'>
              <img src='sweetlandia.png' alt='SweetLandia' width='200' />
              <h3>SweetLandia</h3>
              <p>
                Once upon a time, there was a magical place called Sweet Lands — a
                world we may now only travel to in our imaginations. But one
                weekend every year, when the sugar cane stalks bend toward the east
                and the cotton candy is at its swirliest, the Sweetlandia
                convention brings this wondrous world within reach! So join
                Sparkles, Pierre, and the rest of the gang for a meeting of the
                sweet-minded in sunny Omaha, Nebraska! It’s sure to be your
                sweetest adventure yet.
              </p>
              <div class='event-action'>
                <a href='#' class='btn buy-button'>
                  <span class='top content'>Register Now!</span>
                  <span class='bottom content'>Hurry, Limited Space!</span>
                </a>
              </div>
            </div>
          </div>
        </section>
    
        <!-- Register Modal -->
        <div class='modal-overlay'></div>
        <div class='modal'>
          <div class='modal-header'>
            <a class='modal-close' href='#' aria-label='Close'>&times;</a>
            <h3>Register</h3>
          </div>
          <div class='modal-content'>
            <form class='form' action=''>
              <fieldset class='form-field'>
                <!-- <label class='form-label' for='type'>CC Type</label> -->
                <select class='cs-select cs-skin-elastic' name='type'>
                  <option value='visa'>Visa</option>
                  <option value='mastercard'>MasterCard</option>
                  <option value='american_express'>American Express</option>
                </select>
              </fieldset>
              <fieldset class='form-field'>
                <label class='form-label' for='number'>CC Number</label>
                <input class='form-input' type='text' id='number' />
              </fieldset>
              <fieldset class='form-field'>
                <label class='form-label' for='expiration'>CC Expiration</label>
                <input class='form-input' type='text' id='expiration' />
              </fieldset>
              <div class='form-submit'>
                <input class='btn' type='Submit' value='Submit' />
              </div>
            </form>
          </div>
        </div>
        <script src='application.min.js'></script>
      </body>
    </html>
    .shing {
      position: relative;
    }
    
    .shing::after {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      top: 0;
      content: '';
    
      box-shadow: inset 0 2px #FFF;
      background: -50px center no-repeat;
      background-image: linear-gradient(125deg,rgba(255,255,255,0) 30%,#FFF 30%,#FFF 50%,rgba(255,255,255,0) 50%);
      background-clip: padding-box;
      opacity: .3;
      transition: background-position 0.07s ease 0.4s;
    }
    
    .shing:hover:after {
      background-position: 100px center;
    }
  • 相关阅读:
    thinkphp5日期时间查询比较和whereTime使用方法
    Bootstrap 标签
    MySQL 查询当天、周、月,最近一周、一月的数据,以及当年每月的统计数据
    把字符串解析到变量,数组变量中的函数 PHP parse_str() 函数
    PHP 数组转字符串,与字符串转数组
    php 获取最近一周,一个月,一年
    linux达人养成计划学习笔记(六)—— 挂载命令
    linux达人养成计划学习笔记(五)—— 关机和重启命令
    linux达人养成计划学习笔记(四)—— 压缩命令
    linux达人养成计划学习笔记(三)—— 帮助命令
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4765231.html
Copyright © 2011-2022 走看看