css记录写一个奇怪的按钮

news2024/11/20 2:42:12

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

看看界面

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

尝试解决

<!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.coloradmin.cn/o/1065831.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Zabbix监控系统 第一部分：zabbix服务部署+自定义监控项+自动发现与自动注册（附详细部署实例）

Zabbix监控系统 第一部分：zabbix服务部署+自定义监控项+自动发现与自动注册（附详细部署实例）

这里是目录 一、Zabbix概述1.1 简介1.2 zabbix组件1.2.1 zabbix server1.2.2 zabbix agent1.2.3 zabbix proxy1.2.4 zabbix get1.2.5 zabbix sender 1.3 工作原理1.4 端口号1.5 zabbix中预设的键值1.6 自定义监控项1.7 邮件报警的思路1.8 Zabbix自动发现和自动注册1.8.1 zabbix…
阅读更多...
从 Greenplum 到 YMatrix，某头部动力电池厂商核心业务数据的迁移实践

从 Greenplum 到 YMatrix，某头部动力电池厂商核心业务数据的迁移实践

前言 随着数字化浪潮的不断深入&#xff0c;近年来企业对于数据库的功能诉求不断多元化&#xff0c;同时数据量大幅增长&#xff0c;包括 Greenplum 在内的许多原有的数据库技术应对起来日渐捉襟见肘&#xff0c;一些大型企业替换和升级数据库的需求愈发迫切。 本文将为大家完…
阅读更多...
五.docker+jenkins自动部署项目

五.docker+jenkins自动部署项目

一.敏捷开发相关概念 1.微服务的痛点 再来看一下我们的微服务架构 &#xff0c; 每个组件都需要服务器去部署&#xff0c;加起来可能需要几十个甚至上百个服务器。这样的微服务项目在部署上会遇到什么问题&#xff1f; 需要很多很多的服务器&#xff0c;服务器的采购安装&am…
阅读更多...
picodet onnx转其它芯片支持格式时遇到

picodet onnx转其它芯片支持格式时遇到

文章目录 报错信息解决方法两模型精度对比 报错信息 报错信息为&#xff1a; Upsample(resize) Resize_0 not support attribute coordinate_transformation_mode:half_pixel. 解决方法 整个模型转换过程是&#xff1a;paddle 动态模型转成静态&#xff0c;再用paddle2onnx…
阅读更多...
open62541交叉编译

open62541交叉编译

好久没有做嵌入式Arm Linux 的开发了。最近要将open62541 的应用程序移植到i.mx6u 嵌入式控制器。网络上讲解i.mx6 交叉编译的文章太多了。但是都过于复杂&#xff0c;大多数使用虚拟机实现。其实在ubuntu OS 下&#xff0c;开发ARM 嵌入式应用软件相对是相当简单的。这里记录了…
阅读更多...
日期相关工具类

日期相关工具类

日期相关工具类 【一】介绍【1】SimpleDateFormat 为什么是线程不安全【2】解决 SimpleDateFormat 线程不安全的方法 【二】LocalDate API【三】LocalTime API【四】LocalDateTime API【五】转换关系【1】LocalDateTime 与 LocalDate 之间的转换【2】LocalDateTime 与 Date 之间…
阅读更多...
chrome浏览器如何多开

chrome浏览器如何多开

在网上寻找关于Chrome浏览器多开的教程时&#xff0c;你可能会发现操作相对复杂。然而&#xff0c;最近我发现了一个名为EasyBR浏览器的工具&#xff0c;作者使用程序将繁琐的步骤简化了。 主要功能 EasyBR浏览器具有以下主要功能&#xff1a; 批量账号管理&#xff1a;可以…
阅读更多...
网站安全维护：守护您的数字领土

网站安全维护：守护您的数字领土

在这个数字时代&#xff0c;网站已成为企业和个人展示自己的重要平台。然而&#xff0c;随着互联网的高速发展&#xff0c;网站安全问题也日益严峻。黑客和入侵软件等威胁不断涌现&#xff0c;因此&#xff0c;保护网站免受这些威胁的影响变得至关重要。本文将探讨网站安全维护…
阅读更多...
华为OD机试 - 5键键盘的输出（Java 2023 B卷 100分）

华为OD机试 - 5键键盘的输出（Java 2023 B卷 100分）

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出3、说明 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#…
阅读更多...
2023年中国短租公寓主要类型、品牌及行业市场规模分析[图]

2023年中国短租公寓主要类型、品牌及行业市场规模分析[图]

短租是一种以24小时为计量单位、按天计费的房屋租赁形式&#xff0c;短租又称日租。短租房有高性价比、特色、浓厚居家感的特点&#xff0c;比起传统酒店的客房更具竞争优势。当前&#xff0c;短租房已经成为人们出行住宿的新选择。短租公寓主要类型有合租公寓、月租公寓、服务…
阅读更多...
一个月软考信息安全工程师考前攻略！

一个月软考信息安全工程师考前攻略！

一、考试报名时间 信安考试一年就一次&#xff0c;11月4日考试。千万别错过考试哦&#xff01;也别太紧张&#xff01; 二、考试科目设置 (1)网络信息安全基础知识和技术&#xff0c;考试时间为150分钟&#xff0c;笔试&#xff0c;选择题&#xff1b; (2)网络信息安全工程与…
阅读更多...
UE5修改导航网格的参数

UE5修改导航网格的参数

Unreal Engine 4 - Recast NavMesh Size, how to Change Agent Radius / Tutorial - YouTubehttps://www.youtube.com/watch?vf3hF6xdmCTk 修改当前的 代理半径就是一般贴边的长度 修改编辑器的
阅读更多...
毫米波汽车雷达测试应用指南

毫米波汽车雷达测试应用指南

汽车毫米波雷达测试背景 车载毫米波雷达通过天线向外发射毫米波&#xff0c;接收目标反射信号&#xff0c;经后方处理后快速准确地获取汽车车身周围的物理环境信息&#xff08;如汽车与其他物体之间的相对距离、相对速度、角度、运动方向等&#xff09;&#xff0c;然后根据所…
阅读更多...
【K8S系列】深入解析k8s 网络插件—Antrea

【K8S系列】深入解析k8s 网络插件—Antrea

序言 做一件事并不难&#xff0c;难的是在于坚持。坚持一下也不难&#xff0c;难的是坚持到底。 文章标记颜色说明&#xff1a; 黄色&#xff1a;重要标题红色&#xff1a;用来标记结论绿色&#xff1a;用来标记论点蓝色&#xff1a;用来标记论点 在现代容器化应用程序的世界中…
阅读更多...
动态功能连接

动态功能连接

导读 静息态功能磁共振成像(rs-fMRI)通常用于研究大脑不同区域如何相互作用&#xff0c;从而使我们能够表征大脑的功能连接(FC)。然而&#xff0c;大脑会经历不同的状态&#xff0c;FC并不是一成不变的。脑区之间的连接会动态变化&#xff0c;这在整个扫描过程中都可以观察到。…
阅读更多...
目标检测算法改进系列之Backbone替换为Swin Transformer

目标检测算法改进系列之Backbone替换为Swin Transformer

Swin Transformer简介 《Swin Transformer: Hierarchical Vision Transformer using Shifted Windows》作为2021 ICCV最佳论文&#xff0c;屠榜了各大CV任务&#xff0c;性能优于DeiT、ViT和EfficientNet等主干网络&#xff0c;已经替代经典的CNN架构&#xff0c;成为了计算机…
阅读更多...
从零开始的C++（六）

从零开始的C++（六）

1.类和对象补充&#xff1a; 静态成员&#xff0c;有静态成员函数和静态成员变量&#xff0c;特点是不为类的某个对象所有&#xff0c;而是为同类所有对象共有。因为是为同类对象共同拥有&#xff0c;所以计算对象的大小的时忽略静态成员。因为静态成员是放在静态区&#xff0…
阅读更多...
对abstract关键字的误解

对abstract关键字的误解

起因是手写了一个JUnit4测试类&#xff1a; import org.junit.*; import static org.junit.Assert.*; public class MyTest {Testpublic void testAbc() {assertEquals(1, 1);} } 然后运行报错 java -cp lib/junit-4.13.2.jar;. junit.textui.TestRunner MyTest .F Time: 0.…
阅读更多...
CCF CSP认证 历年题目自练Day24

CCF CSP认证 历年题目自练Day24

题目一 试题编号&#xff1a; 202009-1 试题名称&#xff1a; 称检测点查询 时间限制&#xff1a; 1.0s 内存限制&#xff1a; 256.0MB 问题描述&#xff1a; 题目背景 2020 年 6 月 8 日&#xff0c;国务院联防联控机制发布《关于加快推进新冠病毒核酸检测的实施意见》&…
阅读更多...
最新720全景云系统/可生成小程序+带PC端+安装教程/价值800元的720云全景系统源码

最新720全景云系统/可生成小程序+带PC端+安装教程/价值800元的720云全景系统源码

最新720全景云系统/可生成小程序带PC端安装教程&#xff0c;某宝购买的价值800元的720云全景视频系统源码。非常适合房屋装修等全景展示类场景使用。 下载地址&#xff1a; https://bbs.csdn.net/topics/617370362
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023