利用transform变形结合事件完成扇形导航

正在修炼web的小芮

于 2022-07-26 01:12:40 发布

阅读量149

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/m0_71814235/article/details/125986338

版权

该博客介绍了如何利用CSS3的transform属性结合JavaScript事件来创建一个扇形导航效果。通过设置body和元素的样式，以及调整script样式，最终实现了视觉上吸引人的导航菜单。注意在编写代码时，如Top属性中的'T'需要注意大小写问题。

摘要由CSDN通过智能技术生成

在body样式里写入

<body>
    <div id="stage">
        <div id="nav">
            <img src="./images/1(1).png" >
            <img src="./images/2(1).png" >
            <img src="./images/3(1).png" >
            <img src="./images/4(1).png" >
            <img src="./images/5(1).png" >
        </div>
        <div id="home"> <img src="./images/home.png" ></div>
    </div>
</body>

接着写css样式

    <style>
        body{
            margin: 0;
            background-color: #eee;
        }
        #stage{
            width: 300px;
            height: 300px;
            position: relative;
            top: 150px;
            margin: 0 auto;
        }
        #nav{
            position: absolute;
            width: 120px;
            height: 107px;