你想不到的!CSS 实现的各种球体效果【附在线演示】
2013-07-16 13:52
543 查看
CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果。有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题;另外一种是使用 CSS3 渐变和阴影特性来实现,实现方法简单,效果精美。
为保证效果,请使用 Chrome、Firefox、Safari 等现代浏览器浏览。
您可能感兴趣的相关文章
Metronic – 基于 Bootstrap 响应式后台管理模板
Verlet-js:超炫的开源 JavaScript 物理引擎推荐
Transit – 超平滑的 CSS 过渡和变换动画效果插件
Debuggex – 超好用的正则表达式可视化调试工具
HTML Inspector – 帮助你编写高质量 HTML 代码
这里使用的是 HTML5 新增标签 figure,也可以用其它标签。figure 标签专门用于显示网页中的图片或者其它图表内容。为了实现圆型效果,添加一些基础的样式:
aaa
CSS 代码如下:
效果如下:
bbb
这里用到的 HTML 代码如下:
CSS 代码如下:
这里用到了 CSS3 perspective 特性,效果如下:
ccc
呈现的效果如下:
ddd
效果如下:
eee
HTML 代码:
CSS 代码:
效果如下:
fff
HTML 代码如下:
核心 CSS 代码如下:
最终效果:
ggg
这样,眼球就动起来了,很传神吧?!
hhh
您可能感兴趣的相关文章
OverAPI.com – 史上最全开发人员在线速查手册
CSS Matic:网页设计师必备的终极 CSS 工具箱
CSS Beautify – 方便的在线 CSS 代码美化工具
ScrollUp – 超轻量可定制的回到顶部jQuery插件
Swipebox – 用于触屏的 jQuery Lightbox 插件
//
// ]]>
英文链接:CSS Balls:CSS 实现的各种圆效果【附在线演示】
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
为保证效果,请使用 Chrome、Firefox、Safari 等现代浏览器浏览。
您可能感兴趣的相关文章
Metronic – 基于 Bootstrap 响应式后台管理模板
Verlet-js:超炫的开源 JavaScript 物理引擎推荐
Transit – 超平滑的 CSS 过渡和变换动画效果插件
Debuggex – 超好用的正则表达式可视化调试工具
HTML Inspector – 帮助你编写高质量 HTML 代码
基本形状
我们先来实现一个基本的圆,HTML 代码如下:<figure class="circle"></figure>
这里使用的是 HTML5 新增标签 figure,也可以用其它标签。figure 标签专门用于显示网页中的图片或者其它图表内容。为了实现圆型效果,添加一些基础的样式:
.circle { display: block; background: black; border-radius: 50%; height: 300px; width: 300px; margin: 0; }
aaa
径向渐变
上面实现了基本的圆形效果,这里增加径向渐变效果来实现更逼真的球体。CSS 代码如下:
.circle { display: block; background: black; border-radius: 50%; height: 300px; width: 300px; margin: 0; background: -webkit-radial-gradient(100px 100px, circle, #5cabff, #000); background: -moz-radial-gradient(100px 100px, circle, #5cabff, #000); background: radial-gradient(100px 100px, circle, #5cabff, #000); }
效果如下:
bbb
阴影和 3D
上节已经有基本的球体效果出来了,为了增加立体效果,我们在球的底部加个阴影,这样立体感就更强了。这里用到的 HTML 代码如下:
<section class="stage"> <figure class="ball"><span class="shadow"></span></figure> </section>
CSS 代码如下:
.stage { width: 300px; height: 300px; display: inline-block; margin: 20px; -webkit-perspective: 1200px; -webkit-perspective-origin: 50% 50%; } .ball .shadow { position: absolute; width: 100%; height: 100%; background: -webkit-radial-gradient(50% 50%, circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%); -webkit-transform: rotateX(90deg) translateZ(-150px); z-index: -1; }
这里用到了 CSS3 perspective 特性,效果如下:
ccc
多层阴影
为了实现更逼真的球体效果,这里应用了多层阴影:.ball { display: inline-block; width: 100%; height: 100%; margin: 0; border-radius: 50%; position: relative; background: -webkit-radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #062745 100%); ); } .ball:before { content: ""; position: absolute; top: 1%; left: 5%; width: 90%; height: 90%; border-radius: 50%; background: -webkit-radial-gradient(50% 0px, circle, #ffffff, rgba(255, 255, 255, 0) 58%); -webkit-filter: blur(5px); z-index: 2; }
呈现的效果如下:
ddd
光照效果
上面的效果已经很有立体感了,这里我们再改变一下光照效果,让球体看起来更像斯诺克台球。.ball { display: inline-block; width: 100%; height: 100%; margin: 0; border-radius: 50%; position: relative; background: -webkit-radial-gradient(50% 120%, circle cover, #323232, #0a0a0a 80%, #000000 100%); } .ball:before { content: ""; position: absolute; background: -webkit-radial-gradient(50% 120%, circle cover, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%); border-radius: 50%; bottom: 2.5%; left: 5%; opacity: 0.6; height: 100%; width: 90%; -webkit-filter: blur(5px); z-index: 2; } .ball:after { content: ""; width: 100%; height: 100%; position: absolute; top: 5%; left: 10%; border-radius: 50%; background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%); -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg); -webkit-filter: blur(10px); }
效果如下:
eee
8 号球效果
我们再给球体加上数字 8,这样就有了台球黑8 的效果了。HTML 代码:
<section class="stage"> <figure class="ball"> <span class="shadow"></span> <span class="eight"></span> </figure> </section>
CSS 代码:
.ball .eight { width: 110px; height: 110px; margin: 30%; background: white; border-radius: 50%; -webkit-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg); position: absolute; } .ball .eight:before { content: "8"; display: block; position: absolute; text-align: center; height: 80px; width: 100px; left: 50px; margin-left: -40px; top: 44px; margin-top: -40px; color: black; font-family: Arial; font-size: 90px; line-height: 104px; }
效果如下:
fff
眼球效果
上面的效果怎么样?相信你已经很惊讶了。不过,CSS 能坐的远不止这些,这里我们再来实现一个眼球效果。HTML 代码如下:
<section class="stage"> <figure class="ball"> <span class="shadow"></span> <span class="iris"></span> </figure> </section>
核心 CSS 代码如下:
.iris { width: 40%; height: 40%; margin: 30%; border-radius: 50%; background: -webkit-radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%); -webkit-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg); position: absolute; -webkit-animation: move-eye-skew 5s ease-out infinite; } .iris:before { content: ""; display: block; position: absolute; width: 37.5%; height: 37.5%; border-radius: 50%; top: 31.25%; left: 31.25%; background: black; } .iris:after { content: ""; display: block; position: absolute; width: 31.25%; height: 31.25%; border-radius: 50%; top: 18.75%; left: 18.75%; background: rgba(255, 255, 255, 0.2); }
最终效果:
ggg
会动的眼球
上节实现了眼球效果,这里我们一些关键帧来让眼球动起来,核心 CSS 代码如下:@-webkit-keyframes move-eye-skew { 0% { -webkit-transform: none; } 20% { -webkit-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95); } 25%, 44% { -webkit-transform: none; } 50%, 60% { -webkit-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95); } 66%, 100% { -webkit-transform: none; } }
这样,眼球就动起来了,很传神吧?!
hhh
您可能感兴趣的相关文章
OverAPI.com – 史上最全开发人员在线速查手册
CSS Matic:网页设计师必备的终极 CSS 工具箱
CSS Beautify – 方便的在线 CSS 代码美化工具
ScrollUp – 超轻量可定制的回到顶部jQuery插件
Swipebox – 用于触屏的 jQuery Lightbox 插件
//
// ]]>
英文链接:CSS Balls:CSS 实现的各种圆效果【附在线演示】
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
相关文章推荐
- 你想不到的!CSS 实现的各种球体效果【附在线演示】
- 你想不到的!CSS 实现的各种球体效果【附在线演示】
- 45个纯 CSS 实现的精美边框效果【附在线演示和源码】【下篇】
- CSS 实现的各种球体效果
- CSS 实现图片灰度效果 兼容各种浏览器
- 45个纯 CSS 实现的精美边框效果【附演示和源码】【上篇】
- jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器
- 使用CSS实现透明边框的效果——兼容当前各种主流浏览器[xyytIT]
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器
- jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器
- jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器
- 利用ASP实现在线生成电话图片效果脚本附演示
- jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
- css实现鼠标各种图形效果
- [css]演示:纯CSS实现的右侧底部简洁悬浮效果
- 纯css实现各种shadow效果
- 利用ASP实现在线生成电话图片效果脚本附演示