当前位置： 文江博客话题详情

我正在尝试让转换属性在我的代码中工作

发布于 2025-01-11 15:54:49 字数 8135 浏览 0 评论 0原文

我开始开发一个作品集网站，结果 CSS 转换减慢了我的速度，因为它没有响应我的悬停功能，当我将鼠标悬停在 Facebook、GitHub、Twitter、邮件和电话链接上时，它不会转换。这是我的源代码我能做些什么来修复它。

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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100&family=Roboto:ital@1&family=Tangerine:wght@700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;600&family=Raleway:wght@600&family=Roboto:ital@1&family=Tangerine:wght@700&display=swap" rel="stylesheet">    
    <script src="https://kit.fontawesome.com/22c578ae8f.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./styles.css">
    <title>Personal Portfolio</title>
</head>
<body>
    <section id="welcome-section">
        <nav id="navbar">
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        </nav>
        <h1>Hey I am Oni Oluwatobiloba</h1>
        <p>a web developer</p>
    </section>
    <section id="projects">
        <h2>These are some of my projects</h2>
        <div class="grid-container">
        <div class="grid-item">
            <a href="../Projects/Login/Login.html">
            <img src="./images/Login page.png" alt="Login page"><p>Login page</p></a>
        </div>
        <div class="grid-item">
            <a href="../Projects/Tribute Page/index.html"><img src="./images/Tribute.png" alt="Tribute">
            <p>Tribute Page</p></a>
        </div>
        <div class="grid-item">
            <a href="../Projects/Survey Form/index.html"><img src="./images/Survey.png" alt="Survey"><p>Survey Form</p></a>
        </div>
        <div class="grid-item">
            <a href="../Projects/Product Landing Page/index.html">
            <img src="./images/Product Landing Page.png" alt="Product Landing Page"><p>Product Landing Page</p></a>
        </div>
        <div class="grid-item">
            <a href="../Projects/Technical Documentation/index.html">
            <img src="./images/Technical Documentation.png" alt="Technical Documentation"><p>Technical Documentation</p></a>
        </div>
        </div>
    </section>
    <section class="contact">
        <div>
            <h1><b>Let's work together...</b></h1>
            <p><i> How do you take your tea?</i></p>
        </div>
        <div>
            <a class="facebook" href=""><i class="fa-brands fa-facebook-square"></i>Facebook</a>
            <a class="github" href=""><i class="fa-brands fa-github"></i>GitHub</a>
            <a class="twitter" href=""><i class="fa-brands fa-twitter"></i>Twitter</a>
            <a class="mail" href=""><i class="fa-solid fa-at"></i>Send a mail</a>
            <a class="call" href=""><i class="fa-solid fa-mobile-screen-button"></i>Call me</a>
        </div>
    </section>
    <section class="footer">
        <p>**This is my first personal portfolio, No contact details was used.</p>
        <p><span>&copy;</span>Created by Oni Oluwatobiloba</p>
    </section>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&family=Roboto:ital@1&family=Tangerine:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;600&family=Raleway:wght@600&family=Roboto:ital@1&family=Tangerine:wght@700&display=swap');
body{
    margin: 0px !important;
}
#navbar{
    text-align: right;
    background-color: rgb(82, 85, 100);
    width: 100%;
    height: 66px;
    position: fixed;
    top: 0;
    left: 0;
}
#navbar>ul>li>a:hover{
    background-color: lightslategray;
}
ul{
    position: relative;
    bottom: 63px;
    display: inline;
}
ul>li{
    position: relative;
    top: 60px;
    display: inline;
    list-style-type: none;
}
ul>li>a{
    margin: -5px;
    padding: 20px;
    text-align: right;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 22px;
    color: white;
    box-sizing: border-box;
}
#welcome-section{
    display: flex;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: black;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    background-image: linear-gradient(180deg, rgb(55, 68, 79), rgb(90, 115, 123));
}
h1,p{
    margin: 0px;
}
#projects{
    display: flex;
    width: 100%;
    height: 140vh;
    flex-direction: column;
    align-items: center;
    color: white;
    font-family: 'Poppins', sans-serif;
    background-color: rgb(157, 70, 66);   
}
section[id="projects"]>h2{
    display: inline-block;
    font-family: sans-serif;
    font-weight: 300;
    font-size: 40px;
    border-bottom: 3px solid black;
}
.grid-container{
    display: grid;
    grid-template-columns: 460px 460px 460px;
    grid-template-rows:  400px 390px;
    gap: 20px;
    row-gap: 90px;
}
img{
    width: 400px;
    height: 390px;
    margin: 10px;
}
.grid-item>a{
    text-decoration: none;
}
.grid-item>a>p{
    width: 400px;
    background-color: rgb(50, 52, 64);
    box-shadow: 3px black;
    padding: 20px 5px;
    color: white;
    text-decoration: none;
    font-size: 24px;
    text-align: center;
    margin-top: -15px;
    margin-left: 10px;
    box-sizing: border-box;
    box-shadow: 1px 0px 2px black;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
img{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 1px 0px 3px black;
}
.contact{
    display: flex;
    width: 100%;
    height: 80vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Poppins', sans-serif;
    background-image: linear-gradient(180deg, rgb(55, 68, 79), rgb(90, 115, 123));
}
.contact h1{
    font-family: 'Raleway', sans-serif;
    font-size: 60px;
    font-weight: 600;
}
.contact a{
    display: inline;
    text-decoration: none;
    color: white;
    font-size: 32px;
    font-weight: bold;
    text-shadow: 1px 1px 5px black;
    justify-content: space-between;
    padding: 10px 20px;
    transition-duration: 5s;
}
.contact a:hover{
    transform: translateY(20px);  
}
.contact p{
    font-size: 20px;
    font-weight: 300;
    text-align: center;
}
.footer{
    display: flex;
    width: 100%;
    height: 20vh;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: bolder;
    background-image: linear-gradient(360deg, rgb(55, 68, 79), rgb(90, 115, 123));
    border-top: 7px solid rgb(157, 70, 66);
}
.fa-brands,.fa-solid{
    margin: 5px;
    text-shadow: 1px 1px 5px black;
}

非常感谢有关解决此问题的任何帮助....................................... ............

原文

I started developing a portfolio website only to have the CSS transition slow me down because it is not responding to my hover function, when I hover my mouse over Facebook, GitHub, Twitter, mail and phone link its doesn't transition. This is my source code what can I do to fix it.

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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100&family=Roboto:ital@1&family=Tangerine:wght@700&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;600&family=Raleway:wght@600&family=Roboto:ital@1&family=Tangerine:wght@700&display=swap" rel="stylesheet">    
    <script src="https://kit.fontawesome.com/22c578ae8f.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./styles.css">
    <title>Personal Portfolio</title>
</head>
<body>
    <section id="welcome-section">
        <nav id="navbar">
        <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        </nav>
        <h1>Hey I am Oni Oluwatobiloba</h1>
        <p>a web developer</p>
    </section>
    <section id="projects">
        <h2>These are some of my projects</h2>
        <div class="grid-container">
        <div class="grid-item">
            <a href="../Projects/Login/Login.html">
            <img src="./images/Login page.png" alt="Login page"><p>Login page</p></a>
        </div>
        <div class="grid-item">
            <a href="../Projects/Tribute Page/index.html"><img src="./images/Tribute.png" alt="Tribute">
            <p>Tribute Page</p></a>
        </div>
        <div class="grid-item">
            <a href="../Projects/Survey Form/index.html"><img src="./images/Survey.png" alt="Survey"><p>Survey Form</p></a>
        </div>
        <div class="grid-item">
            <a href="../Projects/Product Landing Page/index.html">
            <img src="./images/Product Landing Page.png" alt="Product Landing Page"><p>Product Landing Page</p></a>
        </div>
        <div class="grid-item">
            <a href="../Projects/Technical Documentation/index.html">
            <img src="./images/Technical Documentation.png" alt="Technical Documentation"><p>Technical Documentation</p></a>
        </div>
        </div>
    </section>
    <section class="contact">
        <div>
            <h1><b>Let's work together...</b></h1>
            <p><i> How do you take your tea?</i></p>
        </div>
        <div>
            <a class="facebook" href=""><i class="fa-brands fa-facebook-square"></i>Facebook</a>
            <a class="github" href=""><i class="fa-brands fa-github"></i>GitHub</a>
            <a class="twitter" href=""><i class="fa-brands fa-twitter"></i>Twitter</a>
            <a class="mail" href=""><i class="fa-solid fa-at"></i>Send a mail</a>
            <a class="call" href=""><i class="fa-solid fa-mobile-screen-button"></i>Call me</a>
        </div>
    </section>
    <section class="footer">
        <p>**This is my first personal portfolio, No contact details was used.</p>
        <p><span>©</span>Created by Oni Oluwatobiloba</p>
    </section>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100&family=Roboto:ital@1&family=Tangerine:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;600&family=Raleway:wght@600&family=Roboto:ital@1&family=Tangerine:wght@700&display=swap');
body{
    margin: 0px !important;
}
#navbar{
    text-align: right;
    background-color: rgb(82, 85, 100);
    width: 100%;
    height: 66px;
    position: fixed;
    top: 0;
    left: 0;
}
#navbar>ul>li>a:hover{
    background-color: lightslategray;
}
ul{
    position: relative;
    bottom: 63px;
    display: inline;
}
ul>li{
    position: relative;
    top: 60px;
    display: inline;
    list-style-type: none;
}
ul>li>a{
    margin: -5px;
    padding: 20px;
    text-align: right;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 22px;
    color: white;
    box-sizing: border-box;
}
#welcome-section{
    display: flex;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: black;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    background-image: linear-gradient(180deg, rgb(55, 68, 79), rgb(90, 115, 123));
}
h1,p{
    margin: 0px;
}
#projects{
    display: flex;
    width: 100%;
    height: 140vh;
    flex-direction: column;
    align-items: center;
    color: white;
    font-family: 'Poppins', sans-serif;
    background-color: rgb(157, 70, 66);   
}
section[id="projects"]>h2{
    display: inline-block;
    font-family: sans-serif;
    font-weight: 300;
    font-size: 40px;
    border-bottom: 3px solid black;
}
.grid-container{
    display: grid;
    grid-template-columns: 460px 460px 460px;
    grid-template-rows:  400px 390px;
    gap: 20px;
    row-gap: 90px;
}
img{
    width: 400px;
    height: 390px;
    margin: 10px;
}
.grid-item>a{
    text-decoration: none;
}
.grid-item>a>p{
    width: 400px;
    background-color: rgb(50, 52, 64);
    box-shadow: 3px black;
    padding: 20px 5px;
    color: white;
    text-decoration: none;
    font-size: 24px;
    text-align: center;
    margin-top: -15px;
    margin-left: 10px;
    box-sizing: border-box;
    box-shadow: 1px 0px 2px black;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
img{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 1px 0px 3px black;
}
.contact{
    display: flex;
    width: 100%;
    height: 80vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Poppins', sans-serif;
    background-image: linear-gradient(180deg, rgb(55, 68, 79), rgb(90, 115, 123));
}
.contact h1{
    font-family: 'Raleway', sans-serif;
    font-size: 60px;
    font-weight: 600;
}
.contact a{
    display: inline;
    text-decoration: none;
    color: white;
    font-size: 32px;
    font-weight: bold;
    text-shadow: 1px 1px 5px black;
    justify-content: space-between;
    padding: 10px 20px;
    transition-duration: 5s;
}
.contact a:hover{
    transform: translateY(20px);  
}
.contact p{
    font-size: 20px;
    font-weight: 300;
    text-align: center;
}
.footer{
    display: flex;
    width: 100%;
    height: 20vh;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: bolder;
    background-image: linear-gradient(360deg, rgb(55, 68, 79), rgb(90, 115, 123));
    border-top: 7px solid rgb(157, 70, 66);
}
.fa-brands,.fa-solid{
    margin: 5px;
    text-shadow: 1px 1px 5px black;
}

Any help on fixing this is very appreciated.......................................................

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

卷耳 2025-01-18 15:54:49

问题在于您的 Display 属性，“inline”不适用于转换属性，因此您需要将其更改为“inline-block”并且它应该可以工作。

.contant a{
    display:inline-block;
}

The problem is with your Display property, "inline" doesn't work with transform property, so you need to change it to "inline-block" and it should work.

.contant a{
    display:inline-block;
}
回复 原文
囍笑 2025-01-18 15:54:49

尝试将过渡属性放在悬停点 exp 中：

.contact a:hover{
    transform: translateY(20px); 
    transition: 2s; 
}

Try putting the transition property in the hover spot exp:

.contact a:hover{
    transform: translateY(20px); 
    transition: 2s; 
}
回复 原文
~没有更多了~

关于作者

寄意

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

卷耳

文章 0 评论 0

佚名

文章 0 评论 0

℉服软

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

凉宸

文章 0 评论 0

gyhjy

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文