你想不到的!CSS 实现的各种球体效果【附在线演示】
CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果。有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题;另外一种是使用 CSS3 渐变和阴影特性来实现,实现方法简单,效果精美。
为保证效果,请使用 Chrome、Firefox、Safari 等现代浏览器浏览。
基本形状
我们先来实现一个基本的圆,HTML 代码如下:
1 | <figure class = "circle" ></figure> |
这里使用的是 HTML5 新增标签 figure,也可以用其它标签。figure 标签专门用于显示网页中的图片或者其它图表内容。为了实现圆型效果,添加一些基础的样式:
1 2 3 4 5 6 7 8 | . circle { display : block ; background : black ; border-radius: 50% ; height : 300px ; width : 300px ; margin : 0 ; } |
径向渐变
上面实现了基本的圆形效果,这里增加径向渐变效果来实现更逼真的球体。
CSS 代码如下:
1 2 3 4 5 6 7 8 9 10 11 | . 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 ); } |
效果如下:
阴影和 3D
上节已经有基本的球体效果出来了,为了增加立体效果,我们在球的底部加个阴影,这样立体感就更强了。
这里用到的 HTML 代码如下:
1 2 3 | <section class = "stage" > <figure class = "ball" ><span class = "shadow" ></span></figure> </section> |
CSS 代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .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( 90 deg) translateZ( -150px ); z-index : -1 ; } |
这里用到了 CSS3 perspective 特性,效果如下:
多层阴影
为了实现更逼真的球体效果,这里应用了多层阴影:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .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 ; } |
呈现的效果如下:
光照效果
上面的效果已经很有立体感了,这里我们再改变一下光照效果,让球体看起来更像斯诺克台球。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | .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( -20 deg); -webkit-filter: blur( 10px ); } |
效果如下:
8 号球效果
我们再给球体加上数字 8,这样就有了台球黑8 的效果了。
HTML 代码:
1 2 3 4 5 6 | <section class = "stage" > <figure class = "ball" > <span class = "shadow" ></span> <span class = "eight" ></span> </figure> </section> |
CSS 代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | .ball .eight { width : 110px ; height : 110px ; margin : 30% ; background : white ; border-radius: 50% ; -webkit-transform: translateX( 68px ) translateY( -60px ) skewX( 15 deg) skewY( 2 deg); 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 ; } |
效果如下:
眼球效果
上面的效果怎么样?相信你已经很惊讶了。不过,CSS 能坐的远不止这些,这里我们再来实现一个眼球效果。
HTML 代码如下:
1 2 3 4 5 6 | <section class = "stage" > <figure class = "ball" > <span class = "shadow" ></span> <span class = "iris" ></span> </figure> </section> |
核心 CSS 代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | .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( 15 deg) skewY( 2 deg); position : absolute ; -webkit-animation: move-eye-skew 5 s 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 ); } |
最终效果:
会动的眼球
上节实现了眼球效果,这里我们一些关键帧来让眼球动起来,核心 CSS 代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | @-webkit-keyframes move-eye-skew { 0% { -webkit-transform: none ; } 20% { -webkit-transform: translateX( -68px ) translateY( 30px ) skewX( 15 deg) skewY( -10 deg) scale( 0.95 ); } 25% , 44% { -webkit-transform: none ; } 50% , 60% { -webkit-transform: translateX( 68px ) translateY( -40px ) skewX( 5 deg) skewY( 2 deg) scaleX( 0.95 ); } 66% , 100% { -webkit-transform: none ; } } |
这样,眼球就动起来了,很传神吧?!
作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
2012-07-16 30个非常精美的 iOS App 网站设计案例
2012-07-16 Hybrid App 开发初探:使用 WebView 装载页面
2011-07-16 60款高质量的网站模板免费下载(上篇)
2011-07-16 优秀网页设计欣赏的200佳网站推荐(系列六)