html5 异形按钮,css3打造一款漂亮的卡哇伊按钮

2023-11-06 19:20
文章标签 html5 打造 frontend css3 按钮 漂亮 一款 异形 卡哇伊

本文主要是介绍html5 异形按钮,css3打造一款漂亮的卡哇伊按钮，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图如下：

01777ae85924332b05f5a04559154ce9.png

源码如下：

复制代码代码如下:

BonBon Buttons - Sweet CSS3 buttons

html {

background-color: #ddd;

font: 62.5%/1 "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;

}

body { padding: 100px; }

#wrapper { text-align: center; }

/*It appears that the Pictos Font resets the line-height of the icon.. so if you are using them, delete the line below. */

.icon:before { line-height: .7em; }

Button

测试

测试

测试

测试

测试

测试

测试

buttons.css：

复制代码代码如下:

/* -------------- THE button -------------- */

.button {

/* text */

text-decoration: none;

font: 24px/1em 'Droid Sans', sans-serif;

font-weight: bold;

text-shadow: rgba(255,255,255,.5) 0 1px 0;

-webkit-user-select: none;

-moz-user-select: none;

user-select: none;

/* layout */

padding: .5em .6em .4em .6em;

margin: .5em;

display: inline-block;

position: relative;

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

border-radius: 8px;

/* effects */

border-top: 1px solid rgba(255,255,255,0.8);

border-bottom: 1px solid rgba(0,0,0,0.1);

background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);

background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(noise.png);

background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(noise.png);

-webkit-transition: background .2s ease-in-out;

-moz-transition: background .2s ease-in-out;

transition: background .2s ease-in-out;

/* color */

color: hsl(0, 0%, 40%) !important;

background-color: hsl(0, 0%, 75%);

-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */

hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */

rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */

hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */

rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */

hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */

rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

}

/* -------------- button (tag) -------------- */

button.button {

border-left: none;

border-right: none;

}

button.button:hover {

cursor: pointer;

}

/* -------------- icon -------------- */

.button:before {

font: 1.2em/0 'Pictos', sans-serif;

content: attr(data-icon); /* gets the icon value from the custom data attribute and puts it infront of the button label */

margin-right: 0.4em;

}

/* icon only */

.icon {

font-weight: normal;

font-style: normal;

text-indent: -999em;

}

.icon:before {

margin-right: 0;

display: block;

height: 0;

text-indent: 0px;

}

/* -------------- colours -------------- */

.button.orange {

color: hsl(39, 100%, 30%) !important;

background-color: hsl(39, 100%, 50%);

-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */

hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */

rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */

hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */

rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */

hsl(39, 100%, 40%) 0 .1em 3px, hsl(39, 100%, 30%) 0 .3em 1px, /* color border */

rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

}

.button.orange:hover { background-color: hsl(39, 100%, 65%); }

.button.blue {

color: hsl(208, 50%, 40%) !important;

background-color: hsl(208, 100%, 75%);

-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */

hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */

rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */

hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */

rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */

hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */

rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

}

.button.blue:hover { background-color: hsl(208, 100%, 83%); }

.button.green {

color: hsl(88, 70%, 30%) !important;

background-color: hsl(88, 70%, 60%);

-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */

hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */

rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */

hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */

rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */

hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */

rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

}

.button.green:hover { background-color: hsl(88, 70%, 75%); }

.button.pink {

color: hsl(340, 100%, 30%) !important;

background-color: hsl(340, 100%, 75%);

-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */

hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */

rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

-moz-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */

hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */

rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */

hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */

rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */

}

.button.pink:hover { background-color: hsl(340, 100%, 83%); }

.button.transparent {

color: rgba(0,0,0,0.5) !important;

}

.button.transparent, .button.transparent:hover, .button.transparent:active {

background-color: transparent;

background-image: none;

}

.button.transparent:hover {

opacity: .9;

}

/* -------------- States -------------- */

.button:hover {

background-color: hsl(0, 0%, 83%);

}

.button:active {

background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);

background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);

background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(noise.png);

-webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */

rgba(0,0,0,0.4) 0 .1em 1px, /* border */

rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

-moz-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */

rgba(0,0,0,0.4) 0 .1em 1px, /* border */

rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */

rgba(0,0,0,0.4) 0 .1em 1px, /* border */

rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

-webkit-transform: translateY(.2em);

-moz-transform: translateY(.2em);

transform: translateY(.2em);

}

.button:focus {

outline: none;

color: rgba(254,255,255,0.9) !important;

text-shadow: rgba(0,0,0,0.2) 0 1px 2px;

}

.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover {

opacity: .5;

cursor: default;

color: rgba(0,0,0,0.2) !important;

text-shadow: none !important;

background-color: rgba(0,0,0,0.05);

background-image: none;

border-top: none;

-webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */

rgba(0,0,0,0.3) 0 .1em 1px, /* border */

rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

-moz-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */

rgba(0,0,0,0.3) 0 .1em 1px, /* border */

rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */

rgba(0,0,0,0.3) 0 .1em 1px, /* border */

rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */

-webkit-transform: translateY(5px);

-moz-transform: translateY(5px);

transform: translateY(5px);

}

/* -------------- Fonts -------------- */

.serif {

font-family: 'Lobster', serif;

font-weight: normal;

}

/* -------------- Sizes -------------- */

.xs { font-size: 16px; }

.xl { font-size: 32px; }

/* -------------- Materials -------------- */

.button.glossy:after, .button.glass:after {

content: "";

position: absolute;

width: 90%;

height: 60%;

top: 0;

left: 5%;

-webkit-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em;

-moz-border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em;

border-radius: .5em .5em 1em 1em / .5em .5em 2em 2em;

background-image: -webkit-gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),

color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );

background-image: -moz-linear-gradient(left, rgba(255,255,255,.55), rgba(255,255,255,0) 50%, rgba(255,255,255,0) 80%, rgba(255,255,255,.5) );

background-image: gradient(linear, 0% 0, 100% 0, from( rgba(255,255,255,.55) ), to( rgba(255,255,255,.5) ),

color-stop(.5, rgba(255,255,255,0)), color-stop(.8, rgba(255,255,255,0)) );

}

.button.glossy:active:after,

.button.glass:active:after,

.button.disabled:after,

.button[disabled]:after

{ opacity: .6; }

.button.icon.glossy:after,

.button.icon.glass:after { height: 75% ; }

/* -------------- Glass + Transparent -------------- */

.button.glass {

text-shadow: rgba(255,255,255,.5) 0 -1px 0, rgba(0,0,0,0.18) 0 .18em .15em;

}

.button.glass:active {

text-shadow: rgba(255,255,255,.3) 0 1px 0, rgba(0,0,0,0.15) 0 .18em .15em;

}

/* -------------- Shapes -------------- */

/* round */

.round, .round.glossy:after, .round.glass:after {

border-top: none;

-webkit-border-radius: 1em;

-moz-border-radius: 1em;

border-radius: 1em;

}

/* oval */

.oval {

border-top: none;

padding-left: .8em;

padding-right: .8em;

-webkit-border-radius: 5em / 2em;

-moz-border-radius: 5em / 2em;

border-radius: 5em / 2em;

}

.oval.glossy:after, .oval.glass:after {

top: 5%;

-webkit-border-radius: 5em / 2em 2em 1em 1em;

-moz-border-radius: 5em / 2em 2em 1em 1em;

border-radius: 5em / 2em 2em 1em 1em;

}

.oval.icon {

padding-left: .8em;

padding-right: .8em;

-webkit-border-radius: 1.5em / 1em;

-moz-border-radius: 1.5em / 1em;

border-radius: 1.5em / 1em;

}

.oval.icon.glossy:after, .oval.icon.glass:after {

-webkit-border-radius: 1.5em / 1em;

-moz-border-radius: 1.5em / 1em;

border-radius: 1.5em / 1em;

}

/* brackets */

.brackets, .brackets.glossy:after, .brackets.glass:after {

border-top: none;

-webkit-border-radius: .5em / 1em;

-moz-border-radius: .5em / 1em;

border-radius: .5em / 1em;

}

/* skew */

.skew {

border-top: none;

padding-right: 1.2em;

padding-left: 0.8em;

-webkit-border-radius: 5em 1em / 5em 1em;

-moz-border-radius: 5em 1em / 5em 1em;

border-radius: 5em 1em / 5em 1em;

}

.skew.glossy:after, .skew.glass:after {

left: 10%;

-webkit-border-radius: 7em 1em / 5em 1em;

-moz-border-radius: 7em 1em / 5em 1em;

border-radius: 7em 1em / 5em 1em;

}

.skew.icon {

padding-right: .9em;

padding-left: .8em;

}

/* back */

.back, .back.glossy:after, .back.glass:after {

border-top-color: rgba(255,255,255,0.5);

-webkit-border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em;

-moz-border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em;

border-radius: 1.6em 1.6em 1em 1em / 4em 4em 1em 1em;

}

.back.glossy:after, .back.glass:after {

left: 6%;

width: 88%;

}

/* knife */

.knife {

padding-left: 1.5em;

-webkit-border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em;

-moz-border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em;

border-radius: .2em .5em .5em 8em / .2em .5em .5em 5em;

}

.knife.glossy:after, .knife.glass:after {

left: 3%;

width: 97%;

-webkit-border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em;

-moz-border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em;

border-radius: .1em .5em .5em 8em / .1em .5em .5em 2em;

}

.knife.glossy.icon:after, .knife.glass.icon:after {

left: 5%;

width: 95%;

-webkit-border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em;

-moz-border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em;

border-radius: .5em .5em 1em 6em / .5em .5em 1em 4em;

}

/* shield */

.shield, .shield.glossy:after, .shield.glass:after {

-webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;

-moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;

border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;

}

.shield {

padding-left: .8em;

padding-right: .8em;

}

.shield.icon {

padding-left: .6em;

padding-right: .6em;

}

/* drop */

.drop {

border-top: none;

-webkit-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em;

-moz-border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em;

border-radius: 2em 5em 2em .6em / 2em 4em 2em .6em;

}

.drop.glossy:after, .drop.glass:after {

left: 4%;

-webkit-border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em;

-moz-border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em;

border-radius: 2em 6em 2em 1em / 2em 4em 2em 2em;

}

.drop.icon {

padding-right: .6em;

}

/* morph */

.morph {

border-top: none;

-webkit-border-radius: 5em / 2em;

-moz-border-radius: 5em / 2em;

border-radius: 5em / 2em;

-webkit-transition: -webkit-border-radius .3s ease-in-out;

-moz-transition: -moz-border-radius .3s ease-in-out;

transition: -moz-border-radius .3s ease-in-out;

}

.morph:hover {

-webkit-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;

-moz-border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;

border-radius: .4em .4em 2em 2em / .4em .4em 3em 3em;

}

.morph:active {

-webkit-border-radius: .3em;

-moz-border-radius: .3em;

border-radius: .3em;

}

.morph:after {

display: none;

}

/* Some ugly hacks for FF.

Thanks to David Hund for some help - http://valuedstandards.com/static/test/buttons/ */

@-moz-document url-prefix() {

.button { text-align: center; }

.icon { padding: .5em 1em; }

.icon:before { margin-left: -.42em; float: left; }

.drop.icon { padding-right: 1.1em; }

.shield.icon { padding-left: 1.1em; padding-right: 1.1em; }

.skew.icon { padding-right: 1.4em; padding-left: 1.3em; }

.oval.icon { padding-left: 1.3em; padding-right: 1.3em; }

.knife { padding-left: 2em; }

}

/* Damn, this became a fat baby.. */

这篇关于html5 异形按钮,css3打造一款漂亮的卡哇伊按钮的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/358570。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者：计算机编程-吉哥 🍊简介：专业从事JavaWeb程序开发，微信小程序开发，定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事，生活就是快乐的。 🍊心愿：点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
基于 YOLOv5 的积水检测系统：打造高效智能的智慧城市应用

基于 YOLOv5 的积水检测系统：打造高效智能的智慧城市应用

在城市发展中，积水问题日益严重，特别是在大雨过后，积水往往会影响交通甚至威胁人们的安全。通过现代计算机视觉技术，我们能够智能化地检测和识别积水区域，减少潜在危险。本文将介绍如何使用 YOLOv5 和 PyQt5 搭建一个积水检测系统，结合深度学习和直观的图形界面，为用户提供高效的解决方案。 源码地址： PyQt5+YoloV5 实现积水检测系统 预览： 项目背景
阅读更多...
pip-tools：打造可重复、可控的 Python 开发环境，解决依赖关系，让代码更稳定

pip-tools：打造可重复、可控的 Python 开发环境，解决依赖关系，让代码更稳定

在 Python 开发中，管理依赖关系是一项繁琐且容易出错的任务。手动更新依赖版本、处理冲突、确保一致性等等，都可能让开发者感到头疼。而 pip-tools 为开发者提供了一套稳定可靠的解决方案。 什么是 pip-tools？ pip-tools 是一组命令行工具，旨在简化 Python 依赖关系的管理，确保项目环境的稳定性和可重复性。它主要包含两个核心工具：pip-compile 和 pip
阅读更多...
【VUE】跨域问题的概念，以及解决方法。

【VUE】跨域问题的概念，以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略，该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同，则需要服务器显式地允许这种跨域请求。一般在springbo
阅读更多...
HTML提交表单给python

HTML提交表单给python

python 代码 from flask import Flask, request, render_template, redirect, url_forapp = Flask(__name__)@app.route('/')def form():# 渲染表单页面return render_template('./index.html')@app.route('/submit_form',
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2