Css3 flame text style code and css3 flame style code

Css3 flame text style code and css3 flame style code

 

Css style:

<style type="text/css">body{background:#000;}*{margin:0;padding:0;transition:all 1s;}.dv1{text-align:center;font:bold 60px helvetica,arial,sans-serif;color:#F00;padding:24px;text-shadow:0 0 4px #FFF,0 -5px 4px #ff3,2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;}.dv2{text-align:center;padding:24px;font:helvetica,arial,sans-serif;font-size:80px;font-weight:bold;color:#006;background:#CCC;text-shadow:-2px -2px #FFF,3px 3px #333;}.dv3{text-align:center;padding:24px;font:helvetica,arial,sans-serif;font-size:80px;font-weight:bold;color:#006;background:#666;text-shadow:2px 2px #FFF,-3px -3px #333;}.dv4{text-align:center;padding:24px;font:helvetica,arial,sans-serif;font-size:80px;font-weight:bold;color:#006;background:#CCC;text-shadow:-3px 0 #000,0 2px #000,2px 0 #000,0 -3px #000;}.dv5{text-align:center;padding:24px;font:helvetica,arial,sans-serif;font-size:80px;font-weight:bold;color:#006;background:#999;text-shadow:0 0 0.2em #f87,0 0 0.2em #f87;}.dv6{background:#0CC;font-size:80px;padding:20px 0px 20px 0px;font-weight:bold;color:#006;text-align:center;}.dv6 a{color:#fff;display:block;text-decoration:none;transition-property:border, color, text-shadow;transition-duration:1s, 2s ,3s;text-shadow:0 1px hsla(0, 0% 100%, 1.0);}.dv6 a:hover{color:#000;text-shadow:0px 1px white;transform:translate(-40px,-10px)}.dv7{width:100%;overflow:hidden;padding:20px 0px 20px 0px;}.dv7 a{background:#000;font-weight:bold;display:block;text-decoration:none;transition-property:border, color, text-shadow;transition-duration:1s, 2s ,3s;text-shadow:0 1px hsla(0, 0% 100%, 1.0);color:#006;text-align:center;font-size:80px;}.dv7 a:hover{color:#000;text-shadow:0px 1px white;transform:skew(10deg,2deg);}.dv8{width:100%;overflow:hidden;padding:20px 0px 20px 0px;}.dv8 a{background:#999;font-weight:bold;display:block;text-decoration:none;transition-property:border, color, text-shadow;transition-duration:1s, 2s ,3s;text-shadow:0 1px hsla(0, 0% 100%, 1.0);color:#006;text-align:center;font-size:80px;}.dv8 a:hover{color:#000;text-shadow:0px 1px white;transform: scale(1.7);}</style>

　　

Html mask:

<P class = "dv1"> css3 text effects </p> <! -- Flame text --> <p class = "dv2"> css3 text effects </p> <! -- Raised text --> <p class = "dv3"> css3 text effects </p> <! -- Concave text --> <p class = "dv4"> css3 text effects </p> <! -- Stroke text --> <p class = "dv5"> css3 text effects </p> <! -- Luminous text --> <p class = "dv6"> <a href = "http://www.100sucai.com/"> css3 text effects </a> </p> <p class = "dv7 "> <a href =" http://www.100sucai.com/"> css3 text effects </a> </p> <p class =" dv8 "> <a href =" http://www.100sucai.com/"> css3 text effects </a> </p>

　　

 

View mask: www.100sucai.com/code/1881.html