CSS - transition

最新推荐文章于 2023-03-01 15:03:06 发布

howlowl

最新推荐文章于 2023-03-01 15:03:06 发布

阅读量307

点赞数

分类专栏： WebDev

WebDev 专栏收录该内容

71 篇文章 0 订阅

订阅专栏

rollover

https://www.w3schools.com/howto/howto_css_dropdown.asp

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  /* An element with position: absolute; is positioned relative to the nearest positioned ancestor 
  (instead of positioned relative to the viewport, like fixed). */
  position: absolute; 
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

moving sprites

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        body {
        background: #24aecd;
        }

        .monster {
        width: 190px;
        height: 240px;
        margin: 2% auto;
        background: url('monster.png') left center;
        animation: play 1s steps(10) infinite;
        }

        @keyframes play {
            100% { background-position: -1900px; }
        }        
    </style>
    <link rel="stylesheet" href="">

</head>

<body>
    <div class="monster"></div>
</body>
<script src=""></script>
</html>

<!-- 
To achieve the desired frame-by-frame animation effect, we’ll need to include the steps() timing function 
in the animation value. Since the sprite sheet contains 10 image sprites, we can say that it’s made up of 
10 frames––or steps. So let’s define 10 steps in our animation sequence:

.monster {
  ...
  animation: play 0.8s steps(10);
}
Now the animation will run 10 frames in its .8s duration – it uses the background position animation 
to run through each sprite image as a step.    
-->

swap

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        /* Select the image and make it absolute to the container */
        .swap-on-hover img {
        position: absolute;
        top:0;
        left:0;
            /* Sets the width and height for the images*/
        width: 400px;
        height: 300px;
        }

        /* 
            We set z-index to be higher than the back image, so it's alwyas on the front.

        We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. 
        */
        .swap-on-hover .swap-on-hover__front-image {
        z-index: 9999;
        transition: opacity .5s linear;
        cursor: pointer;
        }

        /* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */
        .swap-on-hover:hover > .swap-on-hover__front-image{
        opacity: 0;
        }      
    </style>
    <link rel="stylesheet" href="">

</head>

<body>
    <figure class="swap-on-hover">
        <img  class="swap-on-hover__front-image" src="https://c402277.ssl.cf1.rackcdn.com/photos/1620/images/carousel_small/bengal-tiger-why-matter_7341043.jpg?1345548942"/>
        <img class="swap-on-hover__back-image" src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg"/>
    </figure>
</body>
<script src=""></script>
</html>

howlowl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS - transition

rolloverhttps://www.w3schools.com/howto/howto_css_dropdown.asp<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style&...
复制链接

扫一扫

专栏目录