Home  >  Article  >  Web Front-end  >  Pure CSS3 text effect recommendation_html/css_WEB-ITnose

Pure CSS3 text effect recommendation_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:05:121274browse

I have studied several text effects implemented in pure CSS before, such as "CSS Text Stripe Shadow Animation" and "Responsive Cream Three-dimensional Character Effect". Today we will study several text effects, mainly using text- Several unique features of shadow and webkit kernels achieve effects.

Click here to study online and click here to download collections.

Effect 1-3D text effect


Our html file looks like this. In order to better display the effect, we have added editable attributes.

<div contenteditable="true" class="text effect01">前端开发whqet</div>
In the css file, we first look at the global settings

body{  background-color: #666;}@import url(http://fonts.googleapis.com/css?family=Dosis:500,800);.text {    font-family:"微软雅黑", "Dosis", sans-serif;    font-size: 80px;    text-align: center;    font-weight: bold;    line-height:200px;    text-transform:uppercase;    position: relative;}
Then there is the exclusive CSS for effect one, which is very simple. Just use text-shadow to achieve the three-dimensional character effect

.effect01{    background-color: #333;    color:#fefefe;    text-shadow:    0px 1px 0px #c0c0c0,    0px 2px 0px #b0b0b0,    0px 3px 0px #a0a0a0,    0px 4px 0px #909090,    0px 5px 10px rgba(0, 0, 0, 0.6);}

Effect 2-long tail effect


html file Still the same

<div contenteditable="true" class="text effect02">前端开发whqet</div>
The text-shadow is offset a little more, the color becomes simpler, and the long tail effect comes.

.effect02{  color:#333;  background-color: #ddd;  text-shadow:    1px -1px 0 #767676,     -1px 2px 1px #737272,     -2px 4px 1px #767474,     -3px 6px 1px #787777,     -4px 8px 1px #7b7a7a,     -5px 10px 1px #7f7d7d,     -6px 12px 1px #828181,     -7px 14px 1px #868585,     -8px 16px 1px #8b8a89,     -9px 18px 1px #8f8e8d,     -10px 20px 1px #949392,     -11px 22px 1px #999897,     -12px 24px 1px #9e9c9c,     -13px 26px 1px #a3a1a1,     -14px 28px 1px #a8a6a6,     -15px 30px 1px #adabab,     -16px 32px 1px #b2b1b0,     -17px 34px 1px #b7b6b5,    -18px 36px 1px #bcbbba,     -19px 38px 1px #c1bfbf,     -20px 40px 1px #c6c4c4,     -21px 42px 1px #cbc9c8,     -22px 44px 1px #cfcdcd;}

Effect 3-Inner Shadow


html file

<div contenteditable="true" class="text effect03">前端开发whqet</div>
css file

.effect03{  color: #202020;  background-color: #2d2d2d;  text-shadow:     -1px -1px 1px #111111,    2px 2px 1px #363636;}

Effect 4-twill stroke effect


html file

<div contenteditable="true" class="text effect04">前端开发whqet</div>
css file, use linear-gradient to set striped background for div, only in Implementation of displaying background on text (-webkit-background-clip: text;), transparent text color (-webkit-text-fill-color: transparent;) and text stroke (-webkit-text-stroke: 2px #111;) .

.effect04{  background-color: #333;  background-image:      linear-gradient(        45deg,        transparent 45%,        hsla(48,20%,90%,1) 45%,        hsla(48,20%,90%,1) 55%,        transparent 0        );    background-size: .05em .05em;  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  -webkit-text-stroke: 2px #111;}

Effect Five - Text Stripe Animation


html file

<div data-text="前端开发whqet" class="text effect05">前端开发whqet</div>
css file, using :before pseudo-object Displays and animates stripes.

.effect05{    color:#DC554F;    background-color:#27ae60;    z-index: 3;}.effect05:before{    content:attr(data-text);      width:100%;    line-height:200px;    opacity: .5;    position: absolute;    top:2px;    left:5px;    background-image:        linear-gradient(          45deg,          transparent 45%,          hsla(48,20%,90%,1) 45%,          hsla(48,20%,90%,1) 55%,          transparent 0          );     z-index:-1;    background-size: .05em .05em;      -webkit-background-clip: text;    -webkit-text-fill-color: transparent;     animation: shadowGo 20s linear infinite; }@keyframes shadowGo{       0% {background-position: 0 0}      0% {background-position: -100% 100%}}; 

Effect Six - Stroke Text


html file

<div contenteditable="true" class="text effect06">前端开发whqet</div>
css file

.effect06 {    -webkit-text-fill-color: transparent;    -webkit-text-stroke: 2px #d6d6d6;    background: url(http://www.pencilscoop.com/demos/CSS_Text_Effects/images/galaxy.jpg);    background-size: cover;}

Effect 7 - Mask text


html file

<div contenteditable="true" class="text effect07">前端开发whqet</div>
css file

.effect07 {    background: url(http://www.pencilscoop.com/demos/CSS_Text_Effects/images/galaxy.jpg) #333;    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    background-size: cover;    animation: 10s infinite linear animate;}.effect07:before {    content:"";    width:100%;    height:100%;    position: absolute;    left:0;    top:0;    background-color: #999;    z-index: -1;}@keyframes animate {    0% {        background-position:0;    }    100% {        background-position:-1000px 0;    }}

Effect eight-3D glare effect


html file

<div class="text effect08">  <h1>前端开发whqet</h1>  <h1>前端开发whqet</h1>  <h1>前端开发whqet</h1>  <h1>前端开发whqet</h1>  <h1>前端开发whqet</h1>  <h1>前端开发whqet</h1>  <h1>前端开发whqet</h1>  <h1>前端开发whqet</h1></div>
css file

.effect08 {    color:#fff;    transform-origin:center bottom;    transform-style:preserve-3d;    transition:all 1s;    cursor: pointer;}.effect08:hover {    transform:rotate3d(1, 0, 0, 40deg);}.effect08 h1 {    position: absolute;    left:0;    right:0;    margin:auto;    text-shadow:0 0 10px rgba(0, 0, 100, .5);}@for $n from 1 to 8 {    .effect08 h1:nth-child(#{$n}) {        transform:translateZ(4px*$n);    }}

That's it.

--------------------------------------------- --------------------------

Front-end development whqet, pay attention to web front-end development and share related resources.
-------------------------------------------------- ------------------

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn