Feature.presenter.1.5.css
body {margin:0;
Font-family:tahoma;
}. Feature-presenter {Position:absolute}
. feature-presenter-icon {background-color:white;
Text-align:center;
Transition:transform 0.7s cubic-bezier (0.445, 0.05, 0.55, 0.95);
-webkit-transition:-webkit-transform 0.7s cubic-bezier (0.445, 0.05, 0.55, 0.95);
border-radius:50%;
Cursor:pointer;
}. feature-presenter img {max-width:100%;
Transition:transform 0.7s cubic-bezier (0.445, 0.05, 0.55, 0.95);
-webkit-transition:-webkit-transform 0.7s cubic-bezier (0.445, 0.05, 0.55, 0.95);
border-radius:50%;
Cursor:pointer;
box-shadow:0 0 16px rgba (0, 0, 0, 0.1);
Filter:blur (0px);
-webkit-filter:blur (0px);
Image-rendering:-webkit-optimize-contrast;
}. feature-presenter I {font-size:85px; /*filter:url (' data:image/svg+xml;utf8,<svg version= ' 1.1 ' xmlns= ' http://www.w3.org/2000/svg ' xmlns:xlink= ' http ://www.w3.org/1999/xlink "><defs><filter id=" Gaussian_blur ><fegaussianblur in= "SourceGraphic" Stddeviation= "0"/></filter></defs></svg> #gaussian_blur '); */} Feature-presenter-circle-container {
border-radius:50%;
Display:inline-block;
border:1px solid Rgba (0,0,0,0.09);
box-shadow:0px 0px 4px rgba (0, 0, 0, 0.09);
Transition:transform 0.7s cubic-bezier (0.445, 0.05, 0.55, 0.95);
-webkit-transition:-webkit-transform 0.7s cubic-bezier (0.445, 0.05, 0.55, 0.95);
Background-color:white;
}. feature-presenter-text-container {line-height:1.3;
Display:inline-block;
Vertical-align:top;
z-index:1001;
position:relative;
Overflow:hidden;
}. feature-presenter-text-heading {-webkit-transition:-webkit-transform 0.4s cubic-bezier (0.075, 0.82, 0.165, 1);
Transition:transform 0.4s cubic-bezier (0.075, 0.82, 0.165, 1);
margin-bottom:10px;
Color:rgba (0, 0, 0, 0.8); }. feature-presenter-text-description {-webkit-transition:-webkit-transform 0.4s cubic-bezier (0.075, 0.82, 0.165, 1) 0
.4s; Transition:transform 0.4s cubic-bezier (0.075, 0.82, 0.11) 0.4s;
Color:rgba (0, 0, 0, 0.5);
}. feature-presenter-text-container-out {-webkit-transform:translate (200%, 0);
Transform:translate (200%, 0);
-webkit-transition:-webkit-transform 0.5s ease-in;
Transition:transform 0.5s ease-in;
}
HTML:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
The above is the entire contents of this article, I hope you can enjoy.