首先,我们要在js,css文件夹中创建js跟css,然后在body中写入html代码

<main><!--标签是 HTML 5 中的新标签。 素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单-->
<div class="one">医疗</div>
<div class="two">饮食</div>
<div class="three">运动</div>
<div class="four">消费</div>
</main>

然后我们在css中写入它们的样式

 * {
margin: 0 auto;
padding:;
} body,
html {
height: 100%;
display: flex;/*弹性盒子 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。*/
justify-content: center;/*用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。*/
align-items: center;/*属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。*/
/* 定义背景颜色的过度和延迟 */
transition: 0.5s;
transition-delay: 0.3s;
}
body{background-color: #292929}
main {
width: 400px;
height: 400px;
/* border: 1px solid black; */
position: relative;
} div {
/* 设置4个小叶片的整体样式 */
width: 150px;
height: 150px;
/* 设置绝对定位,相对于他的父元素 main */
position: absolute;
box-sizing: border-box;
transition: 0.5s;
background: rgba(0, 0, 0, 0.493);
text-align: center;
line-height: 150px;
color: rgba(255, 255, 255, 0.849);
font-size: 35px;
/* 设置小手样式 */
cursor: pointer;
} .one:hover,
.two:hover {
/* 当鼠标经过 医疗 饮食时,出现阴影,并往上移动10px */
box-shadow: 0 0 10px rgb(102, 98, 98);
transform: translateY(-10px);
} .three:hover,
.four:hover {
/* 当鼠标经过 运动 消费时,出现阴影,并往下移动10px */
box-shadow: 0 0 10px rgb(102, 98, 98);
transform: translateY(10px);
} .one {
/* 初始样式 */
/* 给医疗小叶片定位 */
left: 45px;
top: 45px;
/* 设置右上角和左下角样式 */
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
background: rgba(238, 10, 10, 0.644);
} .ones {
/* 点击要调用的样式 */
left: 0px;
top: 0px;
text-shadow: 5px 5px 5px rgb(56, 55, 55);
background: rgba(238, 10, 10, 0.986);
} .two {
/* 初始样式 */
/* 给饮食小叶片定位 */
right: 45px;
top: 45px;
/* 设置左上角和右下角样式 */
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
background: rgba(252, 235, 3, 0.863);
} .twos {
/* 点击要调用的样式 */
right: 0px;
top: 0px;
text-shadow: -5px 5px 5px rgb(56, 55, 55);
background: rgba(252, 235, 3, 0.863);
} .three {
/* 初始样式 */
/* 给运动小叶片定位 */
left: 45px;
bottom: 45px;
/* 设置左上角和右下角样式 */
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
background: rgba(149, 247, 3, 0.877);
} .threes {
/* 点击要调用的样式 */
left:;
bottom:;
text-shadow: 5px -5px 5px rgb(56, 55, 55);
background: rgba(149, 247, 3, 0.877);
} .four {
/* 初始样式 */
/* 给消费小叶片定位 */
bottom: 45px;
right: 45px;
/* 设置右上角和左下角样式 */
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
background: rgba(5, 190, 247, 0.856);
} .fours {
/* 点击要调用的样式 */
bottom:;
right:;
text-shadow: -5px -5px 5px rgb(56, 55, 55);
background: rgba(5, 190, 247, 0.856);
} .ones,
.twos,
.threes,
.fours {
/* 设置被调用的公共样式 */
border: 3px solid white;
color: white;
border-radius: 80%;

最后就是我们使用JQ写四叶草菜单的动态样式

 // 当点击医疗时调用方法
$('.one').click(function () {
// 判断语句
// 如果当前样式为 .one时
if ($(this).attr('class') == 'one') {
// 则点击时调用的为 .ones 样式
$(this).attr('class', 'ones')
// 背景颜色改变
$('body').css({ background: 'rgba(247, 114, 114, 0.986)' })
} else {//否则,也就是说当前为 .ones样式时,点击调用的是 .one样式 //这样可以实现重复点击效果
$(this).attr('class', 'one')
//使背景颜色变白
$('body').css({ background: 'none' })
}
}) // 当点击饮食时调用方法
//道理同上
$('.two').click(function () {
if ($(this).attr('class') == 'two') {
$(this).attr('class', 'twos')
$('body').css({ background: 'rgb(245, 245, 129)' })
} else {
$(this).attr('class', 'two')
$('body').css({ background: 'none' })
}
}) // 当点击运动时调用方法
//道理同上
$('.three').click(function () {
if ($(this).attr('class') == 'three') {
$(this).attr('class', 'threes')
$('body').css({ background: 'rgb(193, 245, 115)' })
} else {
$(this).attr('class', 'three')
$('body').css({ background: 'none' })
}
}) // 当点击消费时调用方法
//道理同上
$('.four').click(function () {
if ($(this).attr('class') == 'four') {
$(this).attr('class', 'fours')
$('body').css({ background: 'rgb(133, 219, 245)' })
} else {
$(this).attr('class', 'four')
$('body').css({ background: 'none' })
}
})

别忘了JQ插件喔!!

jQuery四叶草菜单效果,跟360杀毒软件差不多的更多相关文章

  1. [Jquery]导航菜单效果-纵向

    $( document ).ready( function(e){ var $catCont = $( ".cat-cont" );    //二级菜单div    var $ca ...

  2. jquery 仿windows10菜单效果下载

    http://www.kuitao8.com/20150923/4079.shtml jquery 仿windows10菜单效果下载

  3. jQuery - 制作点击显示二级菜单效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  5. jquery右键菜单

    点击这里体验效果 如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: <!DOCTYPE html> <html&g ...

  6. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  7. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  8. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  9. ligerui_实际项目_001:利用ligerLayout、ligerAccordion实现可折叠的菜单效果

    效果:利用ligerLayout.ligerAccordion实现可折叠的菜单效果 可能用到的js.css.images等,可到官网下载: 第01步:引入相应的文件 <head><l ...

随机推荐

  1. Linux下查看硬盘UUID和修改硬盘UUID(转)

    查看硬盘UUID: 1. ls -l /dev/disk/by-uuid 2. blkid /dev/sda5 修改硬盘UUID: 1.新建和改变分区的UUID sudo uuidgen | xarg ...

  2. Ubuntu 16.04安装SwitchHosts

    下载: https://github.com/oldj/SwitchHosts/releases 解压: unzip SwitchHosts-linux-x64_v3.3.6.5287.zip 移动: ...

  3. C# 控制台程序如何输出Messagebox

    1 添加如下引用   2 添加引用和Messagebox的代码.   3 测试可行                

  4. 从epoll构建muduo-13 Reactor + ThreadPool 成型

    mini-muduo版本号传送门 version 0.00 从epoll构建muduo-1 mini-muduo介绍 version 0.01 从epoll构建muduo-2 最简单的epoll ve ...

  5. 托管C++线程锁实现 c++11线程池

    托管C++线程锁实现   最近由于工作需要,开始写托管C++,由于C++11中的mutex,和future等类,托管C++不让调用(报错),所以自己实现了托管C++的线程锁. 该类可确保当一个线程位于 ...

  6. iOS开发——优化篇—— 25个性能优化/内存优化常用方法

    1. 用ARC管理内存 ARC(Automatic ReferenceCounting, 自动引用计数)和iOS5一起发布,它避免了最常见的也就是经常是由于我们忘记释放内存所造成的内存泄露.它自动为你 ...

  7. git如何避免每次pull或者push的时候都要输入用户名和密码?

    git config --global credential.helper store 这个命令则是在你的本地生成一个账号密码的本子似的东东,这样就不用每次都输入了(但是还得输入一次) 这个指令对于w ...

  8. libnids TCP数据流重组,显示TCP连接过程的程序总无法捕获数据包解决办法:

      法一: 指定可用网卡: nids_params.device="lo"; 法二: nids.h中有这么一段: struct nids_chksum_ctl { u_int ne ...

  9. 【高德地图API】SDK v1.1.1 在代码中设置Map中心点Center级别不起作用

    有时候你在初始化地图时不是直接在xaml中设置Map的Center,而是在cs代码中设置Center或者设置SetZoomAndCenter改变中心点和缩放级别.你可能会发现,不起作用. 这边提出的解 ...

  10. 大神给你分析HTTPS和HTTP的区别(转)

    http://www.php100.com/html/it/biancheng/2015/0209/8582.html 今天在做雅虎的时候,发现用第三方工具截取不到客户端与服务端的通讯,以前重来没碰到 ...