我正在为自己的网站工作,我不知道如何解决这个动画部分。
我有一个常规菜单,在右上角我有一个三角形,一个白色三角形,位置绝对,0到右边。三角形的尖端朝向左侧。
我想为它设置动画(增加左侧的大小)并到达菜单中所选元素的左侧。
你可以在下一张图片上看到我在说什么
[![实施例] [1]] [1]
另外,我想在悬停时动画它而不是单击,如果你停止悬停一个元素我希望它回到初始位置。我有html / css结构,但不知道如何设置它的动画以准确到达菜单元素的左角。
HTML
<div id="sectionHeader">
<div id="sectionHeaderTriangle"></div>
<div id="sectionHeaderCentralizer">
<img id="sectionHeaderLogo" src="images/logo.svg"/>
<nav>
<ul>
<li><a href="#">How it Works?</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Login</a></li>
</ul>
</nav>
<div id="sectionHeaderContentBox">
<div class="text1">PAGE TEST</div>
<div class="text2">Some Temporal Text goes here...</div>
</div>
</div>
</div>
CSS
body {
margin: 0 auto;
background-color: #fff;
text-align: center;
}
/* Section Header */
#sectionHeader {
position: relative;
width: 100%;
height: auto;
background-color: #29251f;
}
#sectionHeaderCentralizer {
position: relative;
width: 1200px;
height: 450px;
left: 50%;
transform: translateX(-50%);
padding: 10px;
background-color: ;
}
#sectionHeaderLogo {
position: absolute;
left: 30px;
top: 30px;
}
#sectionHeaderContentBox {
position: absolute;
width: auto;
height: auto;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: ;
}
#sectionHeaderTriangle {
width: 0;
height: 0;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
border-right: 40px solid white;
position: absolute;
right: 0;
top: 20px;
}
/*primero en el móvil (mobile first)*/
nav {
position: absolute;
right: 30px;
top: 45px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: auto;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li a {
color: white;
display: block;
text-decoration: none;
padding: .5em 1em;
}
nav li a:hover {
color: #13baff;
transition: all 0.2s ease-in-out;
}
.text1 {
font-family: 'Fjalla One', sans-serif;
font-size: 65px;
color: #fff;
}
.text2 {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
color: #fff;
width: 650px;
}
/* @media-query */
@media screen and (min-width: 480px) {
nav ul {
display: flex;
}
nav li{
/*la caja puede crecer para ocupar todo el espacio disponible */
flex-grow:1;
text-align:center;
}
}
有人可以指导我吗? :)谢谢!
[1]: https://i.stack.imgur.com/NOyQa.png