You can't think of it! Various sphere effects implemented by CSS [Online demonstration]

CSS can achieve a lot of unexpected results. Today we are trying to use CSS to implement various sphere effects. There are two ways to achieve this. The first is to use a large number of elements to create an actual 3D sphere, which has potential performance problems. The other is to useCSS3Gradient and shadow features are implemented. The implementation method is simple and the effect is exquisite.

To ensure the effect, use modern browsers such as Chrome, Firefox, and Safari.

Articles you may be interested in

• Metronic-Bootstrap-based responsive background management template
• Verlet-js: Awesome open-source JavaScript physical engine recommendation
• Transit-ultra-smooth CSS transition and transform animation effect plugin
• Debuggex-Excellent visual debugging tool for Regular Expression
• HTML Inspector-helps you write high-quality HTML code
  

 

Basic shape

Let's first implement a basic circle. The HTML code is as follows:

<figure class="circle"></figure>

Here, we use HTML 5 to add the label figure, or use other labels. The figure label is used to display images or other Chart content on a webpage. To achieve the round effect, add some basic styles:

.circle {display: block;background: black;border-radius: 50%;height: 300px;width: 300px;margin: 0;}

Aaa radial gradient

The basic circular effect is achieved above. Here, the radial gradient effect is added to achieve a more realistic sphere.

The CSS code is as follows:

.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);}

The effect is as follows:

Bbb shadow and 3D

In the previous section, the basic sphere effect has come out. To increase the stereoscopic effect, we add a shadow to the bottom of the ball, so that the stereoscopic effect is stronger.

The HTML code used here is as follows:

<section class="stage">  <figure class="ball"><span class="shadow"></span></figure></section>

The CSS code is as follows:

.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;}

The CSS3 perspective feature is used here. The effect is as follows:

Ccc multi-layer shadow

To achieve a more realistic sphere effect, multiple layers of Shadow are applied here:

.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;}

The effect is as follows:

Ddd Lighting Effect

The above effect is already very stereoscopic. Here we will change the light effect to make the ball look more like snooker.

.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);}

The effect is as follows:

Eee8 ball effect

We can add the number 8 to the sphere, so we can have the effect of the 8 8 8.

HTML code:

<section class="stage">  <figure class="ball">    <span class="shadow"></span>    <span class="eight"></span>  </figure></section>

CSS code:

.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;}

The effect is as follows:

Fff eye-catching Effect

What is the above effect? I believe you are surprised. However, CSS can sit far more than that. Here we will implement an eye-catching effect.

The HTML code is as follows:

<section class="stage">  <figure class="ball">    <span class="shadow"></span>    <span class="iris"></span>  </figure></section>

The core CSS code is as follows:

.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);}

Final effect:

Ggg will be eye-catching

In the previous section, we achieved the eye-catching effect. Here we use some key frames to make the eye work. The core CSS code is as follows:

@-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;  }}

In this way, the eye is moving. Is it really fascinating ?!

Hhh articles you may be interested in

• OverAPI.com-the most comprehensive Online quick query manual for developers in history
• CSS Matic: The ultimate CSS toolbox essential to web designers
• CSS beau-a convenient online CSS code beautification Tool
• ScrollUp-super lightweight and customizable back-to-top jQuery plug-in
• Swipebox-jQuery Lightbox plug-in for touch screen

 

CSS bils: various circles implemented by CSS [Online demonstration]

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources