二级菜单----css3特效，无jQuery

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:3283

css3特效
{}
css部分：*{    margin: 0;    padding: 0;    list-style: none;}.container{    width: 100vw;    height: 100vh;    background: #222222;    display: flex;    justify-content: center;    align-items: center;}...

css部分：

*{ margin: 0; padding: 0; list-style: none; } .container{ width: 100vw; height: 100vh; background: #222222; display: flex; justify-content: center; align-items: center; } .nav{ width: 15vh; height: 15vh; line-height: 15vh; background: #FFFFFF; border-radius: 100%; font-size: 30px; color: #548B54; text-align: center; position: relative; } .nav .ul{ border: 11.5vh solid transparent; position: absolute; top: -4vh; left: -4vh; transform: scale(0); transition: transform 1.3s .4s; } .nav .ul li{ width: 5vh; height: 5vh; line-height: 5vh; background: #FFFFFF; border-radius: 100%; font-size: 20px; position: absolute; top: -11.2vh; left: -11.2vh; transform-origin: 100px 100px; transition: all .4s .4s; } .nav:hover{ background: rgba(255,255,255,.75); } .nav:hover .ul{ transform: scale(1); transition: transform .4s .1s ; } .nav:hover .ul li{ transition-delay:0.02s; } .nav:hover .ul li:nth-of-type(1){ transform: rotate(0deg); } .nav:hover .ul li:nth-of-type(2){ transform: rotate(40deg); } .nav:hover .ul li:nth-of-type(3){ transform: rotate(80deg); } .nav:hover .ul li:nth-of-type(4){ transform: rotate(120deg); } .nav:hover .ul li:nth-of-type(5){ transform: rotate(160deg); }

.nav:hover .ul li:nth-of-type(6){ transform: rotate(200deg); } .nav:hover .ul li:nth-of-type(7){ transform: rotate(240deg); } .nav:hover .ul li:nth-of-type(8){ transform: rotate(280deg); } .nav:hover .ul li:nth-of-type(9){ transform: rotate(320deg);

}

html部分：

<!DOCTYPE html>

<html> <head> <meta charset="UTF-8"> <title></title>

</head> <body> <div class="container"> <div class="nav"> 菜单 <div class="ul"> <a href="">1</a> <a href="">2</a> <a href="">3</a> <a href="">4</a> <a href="">5</a> <a href="">6</a> <a href="">7</a> <a href="">8</a> <a href="">9</a> </div> </div> </div> </body> </html>

原文地址：https://blog.csdn.net/impossible1994727/article/details/79694839?ops_request_misc=&request_id=86e809fea7e5438eb011285d686a4b82&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-12-79694839-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

本文章网址:https://www.sjxi.cn/detil/b8306aec1d454a19adf2113d3cd7d52b

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号