最美情侣中文字幕电影,在线麻豆精品传媒,在线网站高清黄,久久黄色视频

歡迎光臨散文網(wǎng) 會(huì)員登陸 & 注冊(cè)

動(dòng)畫遇見菜單背景

2022-12-09 14:28 作者:布依前端  | 我要投稿

關(guān)鍵詞:transition、opacitytransform

菜單是前端開發(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ì)。

動(dòng)畫遇見菜單背景的評(píng)論 (共 條)

分享到微博請(qǐng)遵守國(guó)家法律
金平| 通州市| 五大连池市| 象州县| 屏南县| 西盟| 晋城| 萝北县| 新安县| 玛沁县| 肥东县| 桓仁| 禄丰县| 德格县| 怀安县| 额尔古纳市| 肃北| 中宁县| 赣榆县| 洛川县| 石柱| 上林县| 烟台市| 利津县| 靖远县| 夏津县| 富阳市| 鄂托克前旗| 额济纳旗| 临夏市| 西乌| 忻州市| 肇东市| 鱼台县| 汝阳县| 巢湖市| 台东县| 泗水县| 江安县| 香河县| 布拖县|