前端 - 这个外圈渐变效果能否用纯css实现?
问题描述
纯css无法实现的话说说其他方法
问题解答
回答1:自问自答吧,上面几个答案没懂我的意思,动画效果的那个比较接近我想要的,最后还是codepen上搜找到了差不多的demo,一个台湾人写的:链接描述
思路很简单,写6个p,每个代表一段渐变,通过linear-gradient的角度和css3的skew把6个p拼成如下样子:
然后裁出一个圆环就行了.唯一不太清楚的是渐变的透明度为什么是12%到88%,不知道有什么特别用意,知道的各位还请指教一下。
还有个坑爹的东西,移动端使用渐变要注意兼容性,linear-gradient和带浏览器前缀比如-webkit-的角度标准不一样,一个是顺时针一个是逆时针,我的安卓支持-webkit-linear-gradient,不支持linear-gradient。链接描述
回答2:用CSS可以实现:1、做一个空的正方形的p;2、将p的伪元素after和before设置为p的一半高和一样宽,这样就相当于在p里上下各有一个半高的块元素;3、分别根据需要的颜色设置这after和before的渐变;4、通过这是border-radius将after和before设置成半圆;5、在p正中间放置一个小一点块元素,通过border-radius设置成圆。
示例如下:HTML
<p class='loading'><p class=’loading-indicator’><i></i></p>
CSS
.loading { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #eee}.loading-indicator { position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -25px; width: 50px; height: 50px;}.loading-indicator:before { content: ''; display: block; width: 50px; height: 25px; padding-bottom: 0; box-sizing: border-box; border-top-left-radius: 25px; border-top-right-radius: 25px; background: -webkit-linear-gradient(0deg, #999, #bbb);}.loading-indicator:after { content: ''; display: block; width: 50px; height: 25px; padding-top: 0; box-sizing: border-box; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; background: -webkit-linear-gradient(0deg, #eee, #bbb);}.loading-indicator>i { display: block; position: absolute; width: 40px; height: 40px; background: #eee; top: 5px; left: 5px; border-radius: 20px;}
如果需要的话还可以再加上动画。
PS:还有一种利用background-clip替代中间那个i元素的方法。但是这种方法在android的微信上有问题,中间不是圆的。
回答3:codepen源码 链接描述效果如下,会有转圈效果,颜色也是一直在变。
可以用CSS3和渐变慢慢调整颜色,看看能不能尽可能得还原
回答5:比较麻烦。
实现圆环还是简单的,麻烦的是渐变。css3的渐变要么是沿着直线的方向的线性渐变,要么是从圆心向外一圈一圈的径向渐变,还没有沿着圆弧方向的渐变。
也许用svg可以实现,没试过不知道了。
回答6:css3可以
相关文章:
1. ueditor上传服务器提示后端配置项没有正常加载,求助!!!!!2. angular.js - angularjs 怎么封装 upload 上传3. python - 关于matplotlib的x轴显示的问题4. angular.js - 怎样在使用ng-repeat属性的标签里面监听单个事件,使其能够单个改变CSS。5. nginx英文文档的WebSocket proxying部分没看太明白,麻烦推荐一点中文文章6. angular.js - items.query is not a function这是怎么回事7. 绝对定位和fied定位,键盘弹起对布局的影响8. vim - docker中新的ubuntu12.04镜像,运行vi提示,找不到命名.9. android 文件File删除问题10. javascript - vue生成一维码?求助!!!!!急
