gpt4 book ai didi

html - 无法应用过渡来变换比例

转载 作者:太空宇宙 更新时间:2023-11-04 08:51:19 25 4
gpt4 key购买 nike

我目前正在为一家本地企业开发一个网站,到目前为止我有一个菜单栏,但是我在 transform: scale(1.2) 上设置的过渡不起作用,我已经寻找了几个小时的解决方案但是无济于事。据我所知,我的代码应该工作得很好,但过渡不适用,如果我只是在悬停时调整 li 的大小而不使用变换,它会移动它周围的其他元素,尽管过渡是这样工作的,结果看起来很难看,菜单是全尺寸的,还没有响应,所以在小屏幕上看起来不好看,这是我的代码。

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
Pacific Cay
</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="container">
<div class="menu">
<ul>
<a href="#"><li class="about2">About Us</li></a>
<a href="#"><li>About Us</li></a>
<a href="home.html"><li id="logobox"><span id="hiddenoverlay">About us.
</span></li></a>
<a href="#"><li>About Us</li></a>
<a href="#"><li class="about">About Us</li></a>
</ul>

</div>
</div>
</body>
</html>



body
{
background-image: url("banner.jpg");
background-repeat: no-repeat;
background-size: cover;
}

ul
{
list-style: none;
padding: 5px;
margin: 0px;
padding-left: 3.3em;
padding-top: 2em;
}

ul li
{
margin-left: 0.7em;
font-size: 55px;
display: block;
position: relative;
float: left;
border-top: 5px outset #3333ff;
border-bottom: 5px outset #3333ff;
border-radius: 20px;
}

li ul
{
display: none;
}

ul a li
{
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;color: #fff;
transition: transform 1s;
transition: background-color 0.5s;
transition: box-shadow 0.5s;
box-shadow: 0px 0px 0px 0px #000000;
}

ul a li:hover
{
transform: scale(1.2);
box-shadow: 0px 10px 20px 0px #000000;
background: #c0c0c0;
}

li:hover ul
{
display: block;
position: absolute;
}

li:hover li
{
float: none;
}

a:hover li
{
background: #f00;
}

li:hover a li:hover
{
background: #000;
}

#drop-nav li ul li
{
border-top: 0px;
}

.menu
{
position: absolute;
background: #7777ff;
width: 100%;
top: 0;
left: 0;
height: 10em;
border-bottom: 1px outset #3333ff;
}

#logobox
{
background-image: url("logo.png");
height: 1.7em;
background-repeat: no-repeat;
margin-top: -0.3em;
font-size: 60px;
}

#hiddenoverlay
{
opacity: 0;
}

.about2
{
margin-left: -0.7em;
}

Here is a jsfiddle: https://jsfiddle.net/0k62nz1w/

最佳答案

您可以使用以逗号分隔的单个 transition 定义多个转换。 https://jsfiddle.net/0k62nz1w/1/

body {
background-image: url("banner.jpg");
background-repeat: no-repeat;
background-size: cover;
}

ul {
list-style: none;
padding: 5px;
margin: 0px;
padding-left: 3.3em;
padding-top: 2em;
}

ul li {
margin-left: 0.7em;
font-size: 55px;
display: block;
position: relative;
float: left;
border-top: 5px outset #3333ff;
border-bottom: 5px outset #3333ff;
border-radius: 20px;
}

li ul {
display: none;
}

ul a li {
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
transition: transform 1s, background-color 0.5s, box-shadow 0.5s;
box-shadow: 0px 0px 0px 0px #000000;
}

ul a li:hover {
transform: scale(1.2);
box-shadow: 0px 10px 20px 0px #000000;
background: #c0c0c0;
}

li:hover ul {
display: block;
position: absolute;
}

li:hover li {
float: none;
}

a:hover li {
background: #f00;
}

li:hover a li:hover {
background: #000;
}

#drop-nav li ul li {
border-top: 0px;
}

.menu {
position: absolute;
background: #7777ff;
width: 100%;
top: 0;
left: 0;
height: 10em;
border-bottom: 1px outset #3333ff;
}

#logobox {
background-image: url("logo.png");
height: 1.7em;
background-repeat: no-repeat;
margin-top: -0.3em;
font-size: 60px;
}

#hiddenoverlay {
opacity: 0;
}

.about2 {
margin-left: -0.7em;
}
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
Pacific Cay
</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div class="container">
<div class="menu">
<ul>
<a href="#">
<li class="about2">About Us</li>
</a>
<a href="#">
<li>About Us</li>
</a>
<a href="home.html">
<li id="logobox"><span id="hiddenoverlay">About us.</span></li>
</a>
<a href="#">
<li>About Us</li>
</a>
<a href="#">
<li class="about">About Us</li>
</a>
</ul>

</div>
</div>
</body>

</html>

关于html - 无法应用过渡来变换比例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43433251/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com