Swaying Vertical Tabs

Developer
Andy Hoffman
Size
3,126 Kb
Views
36,432
  1. Swaying Vertical Tabs Previews
  2. Swaying Vertical Tabs HTML Codes
  3. Swaying Vertical Tabs CSS Codes

How do I make an swaying vertical tabs?

What is a swaying vertical tabs? How do you make a swaying vertical tabs? This script and codes were developed by Andy Hoffman on 24 August 2022, Wednesday.

Swaying Vertical Tabs Previews
IQ Test

Swaying Vertical Tabs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Swaying Vertical Tabs</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav> <ul> <li class="index"><a class="nav-link" href="#">Home</a></li> <li class="lab"><a class="nav-link" href="#">Our Lab</a></li> <li class="work"><a class="nav-link" href="#">Our Work</a></li> <li class="literature"><a class="nav-link" href="#">Literature</a></li> <li class="contact"><a class="nav-link" href="#">Contact Us</a></li> </ul>
</nav>
</body>
</html>

Swaying Vertical Tabs - Script Codes CSS Codes

html,
body { margin: 0; padding: 0;
}
body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; background-color: Aquamarine;
}
* { box-sizing: border-box;
}
*:before,
*:after { box-sizing: border-box;
}
ul { margin: 0;
}
nav { margin-left: 7em; display: inline-block; vertical-align: top;
}
nav ul { width: 100%; position: relative; top: 0; -webkit-perspective: 17em; perspective: 17em;
}
nav li { list-style: none; -webkit-transition: 0.3s box-shadow; transition: 0.3s box-shadow; position: absolute; min-width: 10em; -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); top: 0; left: 0; box-shadow: 1px 0 1px 0 rgba(0,0,0,0.2); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-animation: swing 1.5s ease-in-out infinite alternate; animation: swing 1.5s ease-in-out infinite alternate;
}
nav li:nth-child(2) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; left: 4.99em;
}
nav li:nth-child(3) { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; left: 9.98em;
}
nav li:nth-child(4) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; left: 14.97em;
}
nav li:nth-child(5) { -webkit-animation-delay: ; animation-delay: ; left: 19.96em;
}
nav a { display: block; text-decoration: none; white-space: nowrap; background-color: #fff; padding: 1em; letter-spacing: 1px; text-align: center; text-transform: uppercase; font-size: 1.5em; color: #000; -webkit-transition: 0.3s; transition: 0.3s; text-shadow: 0 0 1px rgba(0,151,222,0.5);
}
nav a:hover,
nav a:focus { background-color: #0097de; color: #fff;
}
@-webkit-keyframes swing { from { -webkit-transform: rotateX(1.8deg) rotateZ(90deg); transform: rotateX(1.8deg) rotateZ(90deg); } to { -webkit-transform: rotateX(-2deg) rotateZ(90deg); transform: rotateX(-2deg) rotateZ(90deg); }
}
@keyframes swing { from { -webkit-transform: rotateX(1.8deg) rotateZ(90deg); transform: rotateX(1.8deg) rotateZ(90deg); } to { -webkit-transform: rotateX(-2deg) rotateZ(90deg); transform: rotateX(-2deg) rotateZ(90deg); }
}
Swaying Vertical Tabs - Script Codes
Swaying Vertical Tabs - Script Codes
Home Page Home
Developer Andy Hoffman
Username antibland
Uploaded August 24, 2022
Rating 4
Size 3,126 Kb
Views 36,432
Do you need developer help for Swaying Vertical Tabs?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Hoffman (antibland) Script Codes
Name
Flexbox 3-Column Layout
Animated Stacked Pages
Flexbox Wrapping
Active Buttons
Accessible Tooltip
Here today
Plain Text Contenteditable
Pure CSS Flexbox Navigation
Skewed Frame
Active Nav Item On Top
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!