弧形背景html,JS实现带圆弧背景渐变效果的导航菜单代码

本文实例讲述了JS实现带圆弧背景渐变效果的导航菜单代码。分享给大家供大家参考。具体如下:

这是一款效果个性的JS+CSS导航菜单,鼠标经过时出现有趣弧形背景,实际上,这里用CSS调用了背景,用JavaScript控制了背景的移动,用jQuery实现过类似的功能,整体感觉很不错。

运行效果截图如下:

f4a3ce06e03e7982312d9cff9ed09feb.png

在线演示地址如下:

具体代码如下:

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

圆弧背景的导航菜单

*{margin:0px;padding:0px;font-size:12px;}

.div_menu{ position:absolute;left:100px;top:100px;}

.ul_menu{list-style:none;}

.ul_menu li{float:left;margin-left:1px;border:1px solid #33CCCC;display:block;padding:5px 3px;background:url(images/menu_bg.gif) repeat-x 0px -80px;padding:2px 12px;}

.ul_menu li a{height:40px;width:auto;color:#ffffff;font-size:20px;font-weight:600;text-decora

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用Vue2实现弧形菜单栏的步骤: 1. 在Vue项目中安装`vue-radial-menu`组件库。 ```shell npm install vue-radial-menu --save ``` 2. 在需要使用弧形菜单栏的组件中引入`vue-radial-menu`组件。 ```javascript import RadialMenu from 'vue-radial-menu' ``` 3. 在组件的`template`中使用`RadialMenu`组件,并设置相应的属性。 ```html <template> <div> <radial-menu :items="items" :radius="100" :start-angle="0" :end-angle="180" :animation-duration="0.5" :animation-delay="0.1" :animation-type="'ease'" :menu-class="'my-menu'" :item-class="'my-item'" :active-class="'my-active-item'" @select="onSelect" /> </div> </template> ``` 4. 在组件的`script`中定义`items`数组和`onSelect`方法。 ```javascript export default { components: { RadialMenu }, data() { return { items: [ { icon: 'fa fa-home', label: 'Home', action: 'home' }, { icon: 'fa fa-user', label: 'Profile', action: 'profile' }, { icon: 'fa fa-envelope', label: 'Messages', action: 'messages' }, { icon: 'fa fa-cog', label: 'Settings', action: 'settings' } ] } }, methods: { onSelect(action) { console.log('Selected action:', action) } } } ``` 5. 根据需要自定义菜单项的样式和动画效果。 ```css .my-menu { background-color: #fff; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .my-item { background-color: #f00; color: #fff; border-radius: 50%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); transition: transform 0.5s ease; } .my-active-item { transform: scale(1.2); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值