色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何在標(biāo)題中添加帶有過渡時間的懸停徽標(biāo)圖像？

CSS
錢浩然2年前7瀏覽0評論

我試圖創(chuàng)建一個項目組合，在這種情況下，我在標(biāo)題上工作，我想把一個圖像作為一個標(biāo)志。

然而，為了遵循標(biāo)題中其他元素的懸停樣式，我想對圖像做同樣的事情，嘗試放置兩個圖像，當(dāng)您將鼠標(biāo)懸停在它們上面時，它們會交換位置。

我做了上面的，我的問題是我想在標(biāo)題中遵循完全相同的懸停風(fēng)格，這意味著5s的過渡時間，這對我不起作用，我還沒有能夠?qū)崿F(xiàn)。

我的HTML文件是:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta name="description" content="Portfolio of Systems and Computing Engineer and Mechatronic Engineer, Neyan Montes">
        <meta name="keywords" content="portfolio, computing, systems, mechatronic, engineer, computing engineer, systems engineer, mechatronic engineer">
        <meta name="autor" content="Neyan Montes">

        <title>Portfolio</title>

        <!-- My Shortcut Icon -->
        <link rel="shortcut icon" type="image/x-icon" href="light.ico" />
        
        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

        <!-- My Styles -->
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>

    <body>
        <!-- Header -->
        <header>
            <div class="left-info">
                <div class="imagen">
                    <a href="#home">
                        <img src="light.ico" alt="logo">
                    </a>
                </div>
          
                <div class="info">
                    <a href="">+57 312 589 7211</a>
                    <p>/</p>
                    <a href="">neyanmontes611@gmail.com</a>
                </div>
            </div>
          
            <nav>
                <ul class="links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#skill">Skills</a></li>
                    <li><a href="#project">Projects</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            
                <div class="toggle-btn">
                    <i class="fa-solid fa-bars"></i>
                </div>
            </nav>
        </header>          

        <!-- Home Section -->
        <section id="home">

        </section>

        <!-- About Section -->
        <section id="about">

        </section>

        <!-- Skill Section -->
        <section id="skill">

        </section>

        <!-- Project Section -->
        <section id="project">

        </section>

        <!-- Contact Section -->
        <section id="contact">

        </section>

        <!-- Footer -->
        <footer>

        </footer>

        <!-- My Scripts -->
        <script src="scripts.js"></script>
    </body>
</html>

我的CSS文件是:

/* GOOGLE FONT */


/* CONSTANT VALUE */
:root{
    --dark: #2C3639;
    --intermedium: #A27B5C;
    --light: #DCD7C9;
}

/* CSS RESET */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-style: italic;
    background-color: var(--dark);
}

/* HEADER */
header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1% 2% 1% 2%;
}

header .left-info{
    display: flex;
    align-items: center;
}

header .left-info .imagen img {
    transition: all .5s ease-in-out;
}

header .left-info .imagen:hover img {
    content: url('intermedium.ico');
}

header .left-info .info{
    display: flex;
    width: 500px;
    align-items: center;
    justify-content: space-between;
    margin-left: 20%;
}

header .left-info .info a{
    color: var(--light);
}

header .left-info .info p{
    color: var(--light);
}

header .left-info .info a:hover{
    color: var(--intermedium);
    transition: .5s;
}

header nav .links{
    display: flex;
    gap: 2rem;
}

header nav .links li{
    list-style: none;
}

header nav .links a{
    color: var(--light);
}

header nav .links a:hover{
    color: var(--intermedium);
    transition: .5s;
}

header nav .toggle-btn{
    color: var(--light);
    font-size: 1.5rem;
    cursor: pointer;
    display: none;
}

header .dropdown-menu{
    position: absolute;
    right: 2rem;
    top: 60px;
    width: 300px;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(15px) !important;
    border-radius: 10px !important; 
    overflow: hidden !important;
}

/* RESPONSIVE HEADER */
@media (max-width: 1070px){
    header nav .links{
        display: none;
    }

    header nav .toggle-btn{
        display: block;
    }
}

@media (max-width: 730px){
    header nav .links,
    header .left-info .info{
        display: none;
    }

    header nav .toggle-btn{
        display: block;
    }
}

我嘗試過修改html并把2張圖片放在里面，然后修改css，這樣當(dāng)指針懸停時隱藏其中一張圖片，然后顯示出來，但是這在圖片頭中產(chǎn)生了沖突，把圖片留在了框外。

我也嘗試過實現(xiàn)js，但還是不行。

正如你在代碼中看到的，它是有效的，我只是想做一個過渡，而不是讓另一個圖像突然出現(xiàn)。

使用絕對定位和不透明度來隱藏懸停時顯示的圖像

.imagen {position: relative}

.imagen .hover {
  position: absolute;
  left: 0;
  opacity: 0;
  transition: all .5s ease-in-out;
  }

.imagen:hover .hover {opacity: 1}

<div class="imagen">
    <a>
        <img class="logo" src="https://i.stack.imgur.com/kFy3n.png?s=64&g=1" alt="XNeyMo's user avatar">
        <img class="hover" src="https://i.stack.imgur.com/QXwi3.png?s=64&g=1" alt="Tim R's user avatar">
    </a>
</div>

我不確定它是否適用于動畫(因為我還沒有接觸過CSS動畫)，但是嘗試在懸停時改變徽標(biāo)的z-index

你試過用關(guān)鍵幀制作不透明度動畫嗎？通過這種方式，可以使元素從“不顯示”變?yōu)椤翱梢婏@示”值。

小代碼示例:

.main {
    display: flex;
    height: 300px;
    justify-content: center;
    align-items: center;
}

.container:hover > .logo2 {
    display: block;
}

.container:hover > .logo {
    display: none;
}

.logo, .logo2 {
    animation: opac 0.5s ease-in-out
}

.logo2 {
    display: none;
}

@keyframes opac {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

<div class='main'>
  <div class='container'>
    <p class='logo'>
      default image
    </p>
    <p class='logo2'>
      hovering image
    </p>  
  </div>
</div>