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 ;
}
} |
这样,眼球就动起来了,很传神吧?!
英文链接:CSS Balls:CSS 实现的各种圆效果【附在线演示】
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
CSS 实现的各种球体效果的更多相关文章
-
你想不到的!CSS 实现的各种球体效果【附在线演示】
CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果.有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题:另外一种是使用 CSS3 ...
-
炫!一组单元素实现的 CSS 加载进度提示效果
之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...
-
Codrops 优秀教程:CSS 3D Transforms 实现书本效果
这个使用 CSS 3D Transforms 实现创意书本效果的来自 Codrops 网站.你可以看到两种类型的书设计:精装书和平装书.这两个效果都可以很容易地使用 CSS 修改.赶紧体验一下吧. ...
-
Planetary.js:帮助你构建超炫的互动球体效果
Planetary.js 是一个 JavaScript 库,用于构建互动球体效果.它使用 D3 和 TopoJSON 解析和渲染地理数据.Planetary.js 采用了基于插件的架构,即使是默认的功 ...
-
CSS发光边框文本框效果
7,166 次阅读 ‹ NSH Blog 网页设计 CSS发光边框文本框效果 或许你看过Safari浏览器下,任何输入框都会有一个发光的蓝色边框,这不单纯只是蓝色边框而已,其实包含了许多CSS3技巧知 ...
-
CSS 实现滚动进度条效果
参考:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言:细化总结.参考的文章作者已经写的很详细了.这里在从初学者 ...
-
用html+css+js实现选项卡切换效果
文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...
-
[前端] html+css+javascript 实现选项卡切换效果
用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...
-
使用CSS实现透明边框的效果——兼容当前各种主流浏览器[xyytIT]
这个效果可是通过代码实现的哦,在不同浏览器下都可以正常显示 对于html中使用CSS实现透明边框的效果,主要有以下四种属性设置方法,但由于 这些属性兼容性并不是很好,单一使用会造成不同浏览器显示效果不 ...
随机推荐
-
iOS中获取cell中webview的内容尺寸
最近项目中遇到在cell中获取webView的内容的尺寸的需求 实现的思路其实很简单 就是通过执行js 获取尺寸即可 为了后面用着方便我直接封装了一个HTML的cell 起名就叫 STHTMLBase ...
-
android小技巧(一)
1,调web浏览器 Uri myBlogUri = Uri.parse("http://xxxxx.com"); returnIt = new Intent(Intent.AC ...
-
iOS 之使用CAShapeLayer中的CAGradientLayer实现圆环的颜色渐变
本文转载自:http://blog.csdn.net/zhoutao198712/article/details/20864143 在 Github上看到一些进度条的功能,都是通过Core Graph ...
-
c语言_代码段_快说你是猪
/* 项目:快说你是猪 作者:landv 时间:2014年3月12日 编译环境:VS2013 */ #pragma warning(disable:4996) //全部关掉 #pragma warni ...
-
纯CSS编写汉克狗
1,CSS中原生的变量定义语法是:--*,变量使用语法是:var(--*),其中*表示我们的变量名称:在CSS变量命名中,不能包含$,[,^,(,%等字符,普通字符局限在只要是“数字[0-9]”“字母 ...
-
SQLite3命令操作大全
SQLite3命令操作大全 SQLite库包含一个名字叫做sqlite3的命令行,它可以让用户手工输入并执行面向SQLite数据库的SQL命令.本文档提供一个样使用sqlite3的简要说明. 一.ql ...
-
spring+springMVC,声明式事务失效,原因以及解决办法
http://blog.csdn.net/z69183787/article/details/37819627#comments 一.声明式事务配置: <bean id="transa ...
-
spring cloud 微服务架构 简介
Spring Cloud 1. Spring Cloud 简介 Spring Cloud是在Spring Boot的基础上构建的,用于简化分布式系统构建的工具集,为开发人员提供快速建立分布式系统中的 ...
-
转 解决configure: error: Please reinstall the libcurl distribution
今天配置一台server的php支持curl的时候, 出现如下报错 checking for cURL in default path... not foundconfigure: error: Pl ...
-
【51nod】1773 A国的贸易
题解 FWT板子题 可以发现 \(dp[i][u] = \sum_{i = 0}^{N - 1} dp[i - 1][u xor (2^i)] + dp[i - 1][u]\) 然后如果把异或提出来可 ...