纯CSS实现立体感圆盘（立体化按钮），点击有图

在线编辑：https://codepen.io/sunnercms/

<div class="inner"><div class="disc"></div>
</div>

.inner{position:relative;width:300px;height:300px;border-radius:150px;background: linear-gradient(to top, silver, whitesmoke);display:flex;justify-content:center;align-items:center;
}
.inner .disc{position:absolute;width:80%;height:80%;border-radius:50%;background:linear-gradient(silver,whitesmoke);
}
/* .inner .disc::before{position:absolute;left:calc((100% - 80%)/2);top:calc((100% - 80%)/2);content:"";width:80%;height:80%;border-radius:50%;background:linear-gradient(to top, silver,whitesmoke);
}
.inner .disc::after{position:absolute;left:calc((100% - 60%)/2);top:calc((100% - 60%)/2);content:"";width:60%;height:60%;border-radius:50%;background:linear-gradient(silver,whitesmoke);
} */

第一个图形：是用来两个元素标签,一个嵌在另一个里面，利用两个颜色的视觉差，实现立体化效果。

第二个图形：后面整加的两个内园，是利用了伪元素实现的，伪元素的定位是相对于伪元素寄托的元素，使用left,top时可以借助calc进行计算。

纯CSS实现立体感圆盘（立体化按钮），点击有图相关推荐

纯CSS实现的3D简洁按钮设计
日期:2012-6-22 来源:GBin1.com 在线演示本地下载今天我们介绍一篇来自Brandon Pierce的3D按钮设计.希望大家喜欢! 基本HTML <nav>  &l ...
php实现动态按钮效果,纯css实现MaterialDesign水滴动画按钮效果的js实现方法
本篇文章给大家带来的内容是关于纯css实现Material Design水滴动画按钮效果的js实现方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在上一篇,我们已经实现了用纯cs ...
表单html中加减数字按钮,纯CSS实现数字加减按钮的最佳方案
前言: 对于数字加减按钮的实现,以前用过不少方案,诸如: 1.使用背景图片--这种效果比较好,缺点是样式控制有点复杂了,还需要使用图片: 2.直接使用"+""-" ...
用纯CSS和DIV绘制播放按钮样式
最近在做前端的视屏监控播放对接,前端弄了个播放按钮,记录下,效果如图所示: HTML代码: <div className="box"><div className ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
css三实现ui,纯CSS实现常见的UI效果
原标题:纯CSS实现常见的UI效果转自:掘金 - alphardex 前言切图仔,是大多数前端用来自嘲的称呼.相信很多人平时写页面的时候,大部分时间是在切图和排图,如此往复.这里并不是要否定切图本 ...
html鼠标经过自动下拉菜单,操作方法：在鼠标经过后使用纯CSS实现下拉菜单，并附有示例说明（代码）...
纯CSS实现鼠标移动到按钮上打开下拉菜单. CSS部分: .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font ...
html圆形按钮和箭头同时变色,JQuery和html+css实现带小圆点和左右按钮的轮播图
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图左右按钮小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
css 风琴,玩一下纯 CSS 折腾的一个叫什么手拉风琴的图片展示效果
原标题:玩一下纯 CSS 折腾的一个叫什么手拉风琴的图片展示效果好久没更新的公众号终于更新了,但没有太多内容,主要是也不知道写什么,更关键是已经很久没有写 CSS 的东西了,中午没吃到鸡,就一边观战 ...

纯CSS实现立体感圆盘（立体化按钮），点击有图

纯CSS实现立体感圆盘（立体化按钮），点击有图相关推荐

最新文章

热门文章