[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 all, ease, 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;
}
复制代码

 

posted @   Zhentiw  阅读(282)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae