我试图使用CSS来设置我的HTML按钮样式,以便它们具有像iOS设备主页上的图标一样的反射光芒。苹果会自动执行此操作,如here所示。我需要类似于CSS中的光芒。CSS:如何创建类似于iOS图标的反射光芒的按钮?
11
A
回答
13
看看this fiddle。
下面的代码:
HTML:
<div class="icon">
<div class="shine"></div>
</div>
和CSS:
.icon {
width: 150px;
height: 150px;
border-radius: 30px;
background: red;
float: left;
margin: 50px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);
}
.shine {
background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.2))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* IE10+ */
background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3ffffff', endColorstr='#33ffffff',GradientType=0); /* IE6-9 */
height: 90px;
width: 150px;
box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.7);
border-top-right-radius: 30px;
border-top-left-radius: 30px;
border-bottom-right-radius: 100px 40px;
border-bottom-left-radius: 100px 40px;
}
5
我的例子使用背景颜色:红色而不是图像,但只是将任何图像作为背景放在#icon div中,它也应该可以工作。
(顺便说一句我用这个真棒网站:http://www.colorzilla.com/gradient-editor/的梯度)
HTML:
<div class="icon">
<div class="shine">
</div>
</div>
CSS:
.icon {
width:50px;
height:50px;
background-color: red;
overflow: hidden;
position: relative;
}
.shine {
position: absolute;
top: -70px;
left: -25px;
width:100px;
height:100px;
border-radius: 50px;
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* Chrome10+,Safari5.1+ */
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 150%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* IE10+ */
background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 150%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1); /* IE6-9 fallback on horizontal gradient */
}
希望工程为您服务!
相关问题
- 1. iOS如何创建类似于Twitter心形按钮的动画按钮?
- 2. 创建类似于iOS 6 App Store按钮的按钮(包括图片)
- 3. 如何创建类似于NSTableView的iOs?
- 4. 如何在sprite工具包中创建按钮iOS(类似于切换按钮)
- 5. 如何让图标变成一个类似于twitter的按钮?
- 6. 用于创建类似光标移动的excel的Javascript
- 7. 如何在Google上创建类似Google +1按钮的微光动画
- 8. 如何创建一个复制按钮,类似于上cdnjs.com?
- 9. Firefox CSS按钮图像光标
- 10. 类似于CSS中的地图标记?
- 11. 如何使用CSS创建类似图库的移动图库
- 12. 的iOS:光滑按钮的图像
- 13. 如何创建一个类似风格的按钮里面
- 14. 如何为匿名用户创建类似Django的按钮?
- 15. 如何创建类似Android的按钮Google Plus应用程序
- 16. 如何创建类似标签的ios 5 safari
- 17. UITableViewCell中的光泽按钮(类似于UISegmentedControl)
- 18. 创建按钮像图标
- 19. 创建一个切换按钮,将图像类似的附加
- 20. 如何在extjs 4.0中为按钮创建类似于拦截器的功能?
- 21. 如何创建类似于Accounts-UI中的流星OAuth登录按钮?
- 22. 如何构建一个类似按钮?
- 23. 如何使用jQuery创建类似于甘特图的图表?
- 24. 如何创建类似于图像的视图?
- 25. 如何创建类似库的视图
- 26. 创建的类似于AS3
- 27. 如何在ios中创建“QuizUp”类似的图形?
- 28. 对于iOS,我该如何在按钮中创建可拖动的按钮?
- 29. 如何在iOS中创建一个类似于视图的货架?
- 30. 如何在iOS中创建类似于yelp的复杂滚动视图?
我建议使用渐变或也许内侧阴影。 –
我最近看到了这一点,但您必须在Google上阅读该文章。 – Rob