css记录写一个奇怪的按钮

完成作业的时候发现一个很有意思的按钮,记录一下记录一下


看看界面

在这里插入图片描述
可以看出是一个奇形怪状的按钮,而且在按下的时候,图片和文字的颜色会改变

尝试解决

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>尝试</title><link rel="stylesheet" href="css/style.css">
</head>
<body><div class="name"><div class="outside-circle">outside-circle</div><div class="outside-circle">outside-circle</div><div class="outside-circle">outside-circle</div></div></body>>
</html>
/* 通用选择器,匹配HTML文档中的所有元素 */
*{margin: 0px;padding: 0px;width: 100%;height: 100%;box-sizing: border-box;  /*宽度和高度会包括内边距和边框*/}.name{width: 600px;height: 900px;display: flex;flex-direction: column;}.outside-circle{position:relative;background:transparent;border-radius: 150px 0px 0px 150px;&::before{content:"";position:absolute;width:150px;height:150px;/* left:-20px; */right: 0;bottom:300px;background:#000;background:radial-gradient(circle at 0 0, transparent 150px, transparent 150px);}&::after{content: "";position: absolute;width: 150px;height: 150px;/* right: -20px; */right: 0;bottom: -150px;background: #000;background:radial-gradient(circle at 0 100%, transparent 150px, transparent 150px);}
}
.outside-circle:hover{background-color: #47b05e;&::before{background:radial-gradient(circle at 0 0, transparent 150px, #47b05e 21px);}&::after{background:radial-gradient(circle at 0 100%, transparent 150px, #47b05e 21px);}
}

效果如下

在这里插入图片描述

可以看出基本实现了大致的外轮廓

接下来是图片

尝试了很多种方法,有一种是说改变其阴影的位置和颜色,但是我没能实现,也许下次可以再尝试一下

这里我直接找到两张一样的图片,除了颜色,然后在hover的时候改变图片,大致结果如下:

最后的代码

<!DOCTYPE html>
<html lang="zh-cn"><!-- 头部 -->
<head><!-- 指定网页的字符编码方式 --><meta charset="UTF-8"><title>权限设置</title><link rel="stylesheet" href="css/test.css">
</head><!-- 主要部分 -->
<body><div id="main-left"><!-- 左边上面的那个蓝框以及logo --><div class="left-top"></div><!-- 左边下面的那些按钮 --><div class="button-container"><div class="button-con"><div class="outside-circle"><div class="buttun-pic"><div class="pic"><img class="nor" src="img/首页before.png"><img class="hav" src="img/首页after.png"></div><div class="pic-msg">首页</div></div></div><div class="outside-circle"><div class="buttun-pic"><div class="pic"><img class="nor" src="img/内容管理before.png"><img class="hav" src="img/内容管理after.png"></div><div class="pic-msg">内容管理</div></div></div><div class="outside-circle"><div class="buttun-pic"><div class="pic"><img class="nor" src="img/咨询管理before.png"><img class="hav" src="img/咨询管理after.png"></div><div class="pic-msg">咨询管理</div></div></div><div class="outside-circle"><div class="buttun-pic"><div class="pic"><img class="nor" src="img/产品管理before.png"><img class="hav" src="img/产品管理after.png"></div><div class="pic-msg">产品管理</div></div></div><div class="outside-circle"><div class="buttun-pic"><div class="pic"><img class="nor" src="img/广告管理before.png"><img class="hav" src="img/广告管理after.png"></div><div class="pic-msg">广告管理</div></div></div><div class="outside-circle"><div class="buttun-pic"><div class="pic"><img class="nor" src="img/图库before.png"><img class="hav" src="img/图库after.png"></div><div class="pic-msg">图库</div></div></div><div class="outside-circle"><div class="buttun-pic"><div class="pic"><img class="nor" src="img/留言管理before.png"><img class="hav" src="img/留言管理after.png"></div><div class="pic-msg">留言管理</div></div></div><div class="outside-circle"><div class="buttun-pic"><div class="pic"><img class="nor" src="img/设置before.png"><img class="hav" src="img/设置before.png"></div><div class="pic-msg">设置</div></div></div></div></div></div></body></html>
/* 通用选择器,匹配HTML文档中的所有元素 */
*{margin: 0px;padding: 0px;width: 100%;height: 100%;
}/* ID选择器 */
#main{display: flex;flex-direction: row; /* 主轴方向为水平 */margin: 0;width: 100%;height: 100%;}#main-left{width: 16.7%;background-color: rgb(255, 255, 255); box-shadow: 2px 4px 10px #d8e6f4; z-index: 3;
}#main-right{background-color: aqua;
}/* 类选择器 */
.left-top{display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */margin: 0;border-bottom-right-radius: 30px;border-top-right-radius: 3px;height: 14.2%;background-color:#1485fe;z-index: 2;box-shadow: 2px 4px 10px #c2cfdc;
}.left-top img{height: 65%;width: 80% ;}.button-container {padding-top: 20%;display: flex; /* 使用flexbox布局 */flex-direction: column; /* 主轴方向为水平 */height: 60%;justify-content: space-between; /* 按钮在容器内平均分布 */align-items: center; /* 按钮垂直居中对齐 */}button {padding: 5px 10px;background-color: #40464d;color: #fff;border: none;cursor: pointer;
}.button-container {margin-top: 20%;display: flex; /* 使用flexbox布局 */flex-direction: row-reverse; /* 主轴方向为水平 */height: 60%;justify-content: space-between; /* 按钮在容器内平均分布 */align-items: center; /* 按钮垂直居中对齐 */background-color: transparent;
}
.button-con{display: flex;flex-direction: column;width: 90%;height: 100%;background-color:transparent ;
}
.outside-circle{position:relative;background:transparent;border-radius: 30px 0px 0px 30px;&::before{content:"";position:absolute;width:30px;height:30px;/* left:-20px; */right: 0;bottom:55px;background:#000;background:radial-gradient(circle at 0 0, transparent 30px, transparent 30px);}&::after{content: "";position: absolute;width: 30px;height: 30px;/* right: -20px; */right: 0;bottom: -30px;background: #000;background:radial-gradient(circle at 0 100%, transparent 30px, transparent 30px);}
}
.outside-circle:hover{color: #ffffff;background-color: #1485fe;&::before{      background:radial-gradient(circle at 0 0, transparent 30px,#1485fe  30px);}&::after{   background:radial-gradient(circle at 0 100%, transparent 30px, #1485fe 30px);}
}
.buttun-pic{.nor{ display: block;}.hav{ display: none;}&:hover{.nor{ display: none;}.hav{ display: block;}}display: flex;align-items: center;justify-content: space-around;background-color: transparent;
}
.pic{width: 20px;height: 20px;background-color: transparent;
}.pic-msg{text-align: left;line-height: 40px;width: 50%;height: 70%;color: rgb(95, 95, 95);}
.pic-msg:hover{color: #ffffff;
}

结果

在这里插入图片描述
在这里插入图片描述
好像还是很丑啊,hahahaha

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/99278.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cartographer-(0)-ubuntu(20.04)-环境安装

1.安装 ROS wiki.ros.org 1.1修改镜像源&#xff1a; 到网站上找与操作系统相匹配的镜像源 ubuntu | 镜像站使用帮助 | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror # 默认注释了源码镜像以提高 apt update 速度&#xff0c;如有需要可自行取消注释 deb htt…

Linux基础指令大全

Linux基础指令大全 1. ls 指令2. pwd命令3. cd 指令4. touch指令5. mkdir指令6. rmdir指令 && rm 指令7. man指令8.cp指令9. mv指令10. cat 指令11. more指令12. less指令13. head指令14. tail指令15. 时间相关的指令1. **在显示方面&#xff0c;使用者可以设定欲显示的…

node中的crypto模块指南

node中的crypto模块指南 加密操作可能很棘手&#xff0c;以至于付费的加密服务公司的存在只是为了确保在代码库中正确实现加密操作。好消息是&#xff0c;只需学习一些知识&#xff0c;我们就可以使用 Node 的内置加密模块免费进行适当的加密。 在本指南中&#xff0c;我们将…

2023-2024年华为ICT网络赛道模拟题库

2023-2024年网络赛道模拟题库上线啦&#xff0c;全面覆盖网络&#xff0c;安全&#xff0c;vlan考点&#xff0c;都是带有解析 参赛对象及要求&#xff1a; 参赛对象&#xff1a;现有华为ICT学院及未来有意愿成为华为ICT学院的本科及高职院校在校学生。 参赛要求&#xff1a…

基于共生生物优化的BP神经网络(分类应用) - 附代码

基于共生生物优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于共生生物优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.共生生物优化BP神经网络3.1 BP神经网络参数设置3.2 共生生物算法应用 4.测试结果…

嵌入式养成计划-32-网络编程----域套接字模型------抓包工具--wireshark

六十九、 域套接字模型 69.1 域套接字的概念 只能做一台主机内的进程间通信&#xff0c;协议族&#xff08;地址族&#xff09;指定为&#xff1a;AF_UNIX AF_LOCALbsp-lcd&#xff1a; s类型文件&#xff0c;就是域套接字如果客户端不手动绑定&#xff0c;则操作系统不会创建…

【苍穹外卖 | 项目日记】第一天

前言&#xff1a; 我打算用16天的时间写完黑马程序员的苍穹外卖项目&#xff0c;为了督促自己每天坚持写以及记录项目知识点&#xff0c;所以用这种项目日记的方式鞭策自己 目录 前言&#xff1a; 今日完结任务&#xff1a; 今日收获&#xff1a; 1.阅读代码框架&#xf…

Kafka客户端核心参数详解

这一部分主要是从客户端使用的角度来理解 Kakfa 的重要机制。重点依然是要建立自己脑海中的 Kafka 消费模型。Kafka 的 HighLevel API 使用是非常简单的&#xff0c;所以梳理模型时也要尽量简单化&#xff0c;主线清晰&#xff0c;细节慢慢扩展。 一、从基础的客户端说起 Kaf…

75.颜色分类

原地排序&#xff1a;空间复杂度为1 class Solution { public:void sortColors(vector<int>& nums) {if(0){//法一&#xff1a;单指针两个遍历int nnums.size();int ptr0;for(int i0;i<n;i){if(nums[i]0){swap(nums[i],nums[ptr]);ptr;}}for(int iptr;i<n;i){…

RabbitMQ安装与简单使用

安装 下载资源 可以访问官网查看下载信息rabbitmq官网 选择合适的版本&#xff0c;注意&#xff1a;rabbitmq需要下载一个Erlang才能使用 我自己是在一下两个连接中下载的 rabbitmq 3.8.8 erlang 21.3.8.15 需要下载其他版本的同学注意erlang版本是否匹配&#xff0c;可以访…

【问题证明】矩阵方程化为特征值方程求得的特征值为什么是全部特征值?不会丢解吗?

问题 这个问题困扰了我好久&#xff0c;一直感觉如果有其他的特征值没法证伪&#xff0c;不过一直存在思想的层面&#xff0c;没有实际解决&#xff0c;今天突然想到动笔来解决&#xff0c;遂得解&#xff0c;证明如下。 证明 总结 这个证明看似证明过后很直观&#xff0c;但…

微信小程序之本地生活(九宫格)

文章目录 一.创建项目二.配置修改json三.编写WXML四.编写WXSS五.最终效果 一.创建项目 创建新的项目&#xff0c;名称为&#xff1a;本地生活 二.配置修改json 在app.json中删除其他页面 将index改为grid 自动生成新的文件 添加自己的轮播图片 源代码&#xff1a; <!--…

Android Studio 是如何和我们的手机共享剪贴板的

背景 近期完成了target33的项目适配升级,随着AGP和gradle的版本升级,万年老版本Android Studio(后文简称AS)也顺便升级到了最新版Android Studio Giraffe | 2022.3.1,除了新UI外,最让我好奇的是这次的Running Devices功能(官方也称为Device mirroring)可以控制真机了. 按照操…

异步爬虫实战:实际应用asyncio和aiohttp库构建异步爬虫

在网络爬虫的开发中&#xff0c;异步爬虫已经成为一种非常流行的技术。它能够充分利用计算机的资源&#xff0c;提高爬虫效率&#xff0c;并且能够处理大量的运算请求。Python中的asyncio和aiohttp库提供了强大的异步爬虫支持&#xff0c;使得开发者能够轻松构建高效的异步爬虫…

在pycharm中出现下载软件包失败的解决方法

一. 一般情况下我们会选择在设置中下载软件包,过程如下. 1. 直接点击左上角的文件, 再点击设置, 再点击项目, 在右边选择python解释器,点击号,输入要下载的软件包, 在下面的一系列的包中选择相对应的包,点击安装就可以了,有的时候我们下载的是最新的版本,如果要下载固定的版本…

算法框架-LLM-1-Prompt设计(一)

原文&#xff1a;算法框架-LLM-1-Prompt设计&#xff08;一&#xff09; - 知乎 目录 收起 1 prompt-engineering-for-developers 1.1 Prompt Engineering 1.1.1 提示原则 1. openai的环境 2. 两个基本原则 3. 示例 eg.1 eg.2 结构化输出 eg.3 模型检验 eg.4 提供示…

【计算机基础】Git系列3:常用操作

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…

如何使用CDN加载静态资源

文章目录 前言工具场景七牛云创建空间存储 控制台查看后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;前端 &#x1f431;‍&#x1f453;博主在前端领域还有很多知识和技术需要掌握&#xff0c;正在不断努力填补技术短板。(如果出现错误…

QFluentWidgets: 基于 C++ Qt 的 Fluent Design 组件库

简介 QFluentWidgets 是一个基于 Qt 的 Fluent Designer 组件库&#xff0c;内置超过 150 个开箱即用的 Fluent Designer 组件&#xff0c;支持亮暗主题无缝切换和自定义主题色。搭配所见即所得的 Fluent Designer 软件&#xff0c;只需拖拖拽拽&#xff0c;不用编写一行 QSS&…

弹性资源组件elastic-resource设计(四)-任务管理器和资源消费者规范

简介 弹性资源组件提供动态资源能力&#xff0c;是分布式系统关键基础设施&#xff0c;分布式datax&#xff0c;分布式索引&#xff0c;事件引擎都需要集群和资源的弹性资源能力&#xff0c;提高伸缩性和作业处理能力。 本文介绍弹性资源组件的设计&#xff0c;包括架构设计和详…