動(dòng)畫遇見菜單背景
關(guān)鍵詞：transition、opacity和transform
菜單是前端開發(fā)的必修課之一，普通菜單沒有動(dòng)畫參與，顯得多少缺點(diǎn)靈魂。文章涉及css關(guān)鍵詞已在開頭列出，文章實(shí)現(xiàn)的菜單功能還可以豐富和擴(kuò)展，根據(jù)開發(fā)實(shí)際場(chǎng)景修改即可使用；
看看效果：
css代碼
<style lang="css">
? ? ? ?* {
? ? ? ? ? ?margin: 0;
? ? ? ? ? ?padding: 0;
? ? ? ? ? ?box-sizing: border-box;
? ? ? ?}
? ? ? ?body {
? ? ? ? ? ?height: 100vh;
? ? ? ? ? ?display: flex;
? ? ? ? ? ?align-items: center;
? ? ? ? ? ?justify-content: center;
? ? ? ? ? ?background-color: hsl(225deg, 9.5%, 8.2%);
? ? ? ?}
? ? ? ?nav {
? ? ? ? ? ?background-color: #fff;
? ? ? ? ? ?border-radius: 50px;
? ? ? ? ? ?padding: 10px;
? ? ? ? ? ?box-shadow: ?0 25px 20px -20px rgba(0, 0, 0, 0.4);
? ? ? ?}
? ? ? ?nav ul li {
? ? ? ? ? ?list-style: none;
? ? ? ? ? ?display: inline-block;
? ? ? ? ? ?padding: 13px 35px;
? ? ? ? ? ?margin: 10px;
? ? ? ? ? ?font-size: 18px;
? ? ? ? ? ?font-weight: 500;
? ? ? ? ? ?color: #777;
? ? ? ? ? ?cursor: pointer;
? ? ? ? ? ?position: relative;
? ? ? ? ? ?z-index: 2;
? ? ? ? ? ?transition: all 0.5s ease;
? ? ? ?}
? ? ? ?nav ul li::after {
? ? ? ? ? ?content: "";
? ? ? ? ? ?background-color: #10ac84;
? ? ? ? ? ?width: 100%;
? ? ? ? ? ?height: 100%;
? ? ? ? ? ?border-radius: 30px;
? ? ? ? ? ?position: absolute;
? ? ? ? ? ?top: 100%;
? ? ? ? ? ?left: 50%;
? ? ? ? ? ?transform: translate(-50%, -50%);
? ? ? ? ? ?z-index: -1;
? ? ? ? ? ?opacity: 0;
? ? ? ? ? ?transition: top 0.5s ease, opacity 0.5s ease;
? ? ? ?}
? ? ? ?nav ul li:hover {
? ? ? ? ? ?color: #fff;
? ? ? ?}
? ? ? ?nav ul li:hover::after {
? ? ? ? ? ?top: 50%;
? ? ? ? ? ?opacity: 1;
? ? ? ?}
? ?</style>HTML代碼：
<body>
? ?<nav>
? ? ? ?<ul>
? ? ? ? ? ?<li>全部</li>
? ? ? ? ? ?<li>圖片</li>
? ? ? ? ? ?<li>視頻</li>
? ? ? ? ? ?<li>新聞</li>
? ? ? ? ? ?<li>圖書</li>
? ? ? ? ? ?<li>更多</li>
? ? ? ?</ul>
? ?</nav>
</body>以上就是今天文章的分享完整內(nèi)容，后期會(huì)陸續(xù)更新更多更好玩的css動(dòng)畫內(nèi)容，供大家參考。不足之處，多多包涵。評(píng)論區(qū)提建議，有什么想要實(shí)現(xiàn)的效果，都可以打出來。謝謝各位對(duì)布衣前端的支持和鼓勵(lì)。
標(biāo)簽：
