html怎么添加圆圈按钮,如何使用HTML5和CSS 3在圆圈周围放置按钮？

您可以使用一小部分

jquery来加载您想要的文本的中心圆.

$(document).ready(function() {

$('.quart').click(function() {

var ind = $(this).index();

switch (ind) {

case 0:

var tex = "div 1";

break;

case 1:

var tex = "div 2";

break;

case 2:

var tex = "div 3";

break;

case 3:

var tex = "div 4";

break;

}

$('.center').text(tex);

});

.wrap {

height: 300px;

width: 300px;

border-radius: 50%;

position: relative;

overflow: hidden;

}

.quart {

position: absolute;

height: 50%;

width: 50%;

background: tomato;

transition: all 0.4s;

}

.quart:first-child {

top: 0;

left: 0;

}

.quart:nth-child(2) {

top: 0;

left: 50%;

}

.quart:nth-child(3) {

top: 50%;

left: 0;

}

.quart:nth-child(4) {

top: 50%;

left: 50%;

}

.center {

height: 80%;

width: 80%;

position: absolute;

top: 10%;

left: 10%;

background: lightgray;

border-radius: 50%;

text-align: center;

line-height: 160px;

}

.quart:hover {

background: dimgray;

}

Click My non-existent Corners!

这可能不会像svg解决方案那样有效,但可以根据您的需要改变colud.

html怎么添加圆圈按钮,如何使用HTML5和CSS 3在圆圈周围放置按钮？相关推荐

html网页制作教程按钮添加,网页制作html5自定义video标签的海报与播放按钮功能...
一.问题 1.默认播放按键不好看 2.设置自定义封面图以上这两点都想自定义二.思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮三.步骤分解 1.海报图片作为div ...
html5视频播放自定义视频播放暂停，解决暂停按钮在视频画面中的问题
html5视频播放自定义视频播放暂停,解决暂停按钮在视频画面中的问题一.视频播放方法 var myVideo = $("#videoPlayExecute");function ...
html5圆圈,javascript – 如何在HTML5画布中绘制带有文本的圆圈
看起来很简单,可以在 HTML5画布中绘制圆圈和文本,但是我得到了非直观的行为.圆形画得漂亮漂亮,然后画出的圆圈越多,旧圆圈的形状越来越八角形.对我来说很奇怪-此外,文字从旧圆圈中消失,只出现在最后绘 ...
HTML5+CSS3小实例：鼠标悬停发光按钮
HTML5+CSS3做一组鼠标悬停发光的按钮,鼠标悬停,按钮边框延展开来,首尾相连时填充按钮,过程伴随发光.倒影效果,并通过hue-rotate实现每个按钮不同颜色. 效果: 源码: <!DOC ...
JS-CSS代码-按钮-各种风格-html5
文章目录 1.常规按钮 2.专业按钮 2.1.三维效果按钮 2.2.突起样式的按钮 2.3.为按钮中的文字赋予扁平效果的阴影 2.4.按钮周围有一圈光晕效果 2.4.矩形按钮 2.5.一组相关的按钮被 ...
html5怎么把图片做成按钮,炫酷实用的jQuery插件涵盖菜单、按钮、图片 | HTML5资源教程...
新的一周开始了,今天我们要为大家分享一些全新的 1.CSS3书本翻页动画书本翻页效果逼真今天我们要分享一款炫酷而且实用的CSS3动画效果,它是模拟书本翻页的动画特效.当鼠标滑过书本右上角时,书本即 ...
html video 修改封面,html5自定义video标签的海报与播放按钮功能
一.问题 1.默认播放按键不好看 2.设置自定义封面图以上这两点都想自定义二.思路 1.使用div把video标签盖住 2.div中显示自定义的海报图片与按钮三.步骤分解 1.海报图片作为div ...
java怎么添加到按钮组_如何在Java中创建一个带有连接按钮的ButtonGroup？
我目前正在尝试创建一组切换按钮,这些按钮类似于Eclipse的格式化程序首选项中使用的按钮: 目前我已通过以下方式尝试此操作: public class Exercise extends JFrame ...
慕课学习史上最全零基础入门HTML5和CSS笔记
慕课学习史上最全零基础入门HTML5和CSS笔记 Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的 ...

html怎么添加圆圈按钮,如何使用HTML5和CSS 3在圆圈周围放置按钮？

html怎么添加圆圈按钮,如何使用HTML5和CSS 3在圆圈周围放置按钮？相关推荐

最新文章

热门文章