标签:矩形 top san gre targe hover for justify none
原文地址:https://segmentfault.com/a/1190000015020964
感想:简简单单的动画特效,位置,动画。
HTML代码:
<nav> <ul> <li>Home</li> <li>Products</li> <li>Services</li> <li>Contact</li> </ul> </nav> <nav> <ul> <li>Home</li> <li>Products</li> <li>Services</li> <li>Contact</li> </ul> </nav> <nav> <ul> <li>Home</li> <li>Products</li> <li>Services</li> <li>Contact</li> </ul> </nav>
CSS代码:
html, body { margin: 0; padding: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } nav{ --h: 3em; } nav:nth-child(1){ --rate: 1.5; --bgcolor: black; } nav:nth-child(2){ --rate: 1.732; --bgcolor: brown; } nav:nth-child(3){ --rate: 2; --bgcolor: green; } nav ul{ padding: 0; } nav ul li{ position: relative; list-style-type: none; width: calc(var(--h) * var(--rate)); height: var(--h); line-height: var(--h); margin: 2em; background-color: var(--bgcolor); color: white; font-family: sans-serif; text-align: center; } /* 用伪元素增加2个倾斜的矩形 */ nav ul li::before, nav ul li::after{ position: absolute; top: 0; left: 0; content: ‘‘; /* inherit : 继承 */ width: inherit; height: inherit; background-color: var(--bgcolor); z-index: -1; filter: opacity(0); transition: 0.3s; } nav ul li::before{ /* 角度 位置 */ transform: rotate(60deg) translateX(calc(var(--h) * -2)); } nav ul li::after{ transform: rotate(-60deg) translateX(calc(var(--h) * 2)); } nav ul li:hover::before{ filter: opacity(1); transform: rotate(60deg) translateX(0); } nav ul li:hover::after{ filter: opacity(1); transform: rotate(-60deg) translateX(0); }
标签:矩形 top san gre targe hover for justify none
原文地址:https://www.cnblogs.com/FlyingLiao/p/10340137.html