<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS3绘制的火龙图像DEMO演示</title>
<style type="text/css">
body, html {margin: 0px; padding: 0px; }
#DRAGON {width:1px; margin:265px auto 0 auto; text-align: center; }
#SELECT {margin-left: 17px; }
.bellyStart {
width: 0px;
height: 0px;
border: 25px solid transparent;
border-top: 70px solid #ac9d86;
border-left: 7px solid #ac9d86;
margin-top: 185px;
transform: scaleX(1.6);
}
.bellyStart:before {
content: ' ';
position: absolute;
width: 0px;
height: 0px;
margin-top: -70px;
margin-left: -39px;
border: 25px solid transparent;
border-top: 70px solid #bbaf9c;
border-right: 7px solid #bbaf9c;
}
.BStop {
width: 0px;
height: 0px;
border: 25px solid transparent;
border-bottom: 70px solid #CCC2B6;
border-left: 7px solid #CCC2B6;
margin-top: -165px;
margin-left: -7px;
}
.BStop:before {
content: ' ';
position: absolute;
width: 0px;
height: 0px;
margin-top: -25px;
margin-left: -39px;
border: 25px solid transparent;
border-bottom: 70px solid #DBD5C5;
border-right: 7px solid #DBD5C5;
}
.BSround {
position: absolute;
width: 64px;
height: 13px;
background-color: #DBD5C5;
border-radius: 0px 0px 50px 50px;
margin-top: -70px;
margin-left: -39px;
}
.BSRright {
position: absolute;
width: 32px;
height: 13px;
background-color: #CCC2B6;
border-radius: 0px 0px 50px 0px;
margin-top: 0px;
margin-left: 32px;
}
.headStart {
position: absolute;
z-index: 1;
width: 0px;
height: 0px;
border: 20px solid transparent;
border-top: 20px solid #F97100;
border-right: 20px solid #F97100;
margin-top: -110px;
margin-left: -51px;
transform: scale(1.1);
}
.HSotherSideStart {
position: absolute;
z-index: 1;
width: 0px;
height: 0px;
border: 20px solid transparent;
border-top: 20px solid #F97100;
border-right: 20px solid #F97100;
margin-top: -20px;
margin-left: -20px;
}
.HSotherSide {
position: absolute;
width: 0px;
height: 0px;
border: 20px solid transparent;
border-top: 20px solid #E03300;
border-left: 20px solid #E03300;
margin-top: -20px;
margin-left: 20px;
z-index: 1;
}
.horn {
width: 0px;
height: 0px;
border: 7px solid transparent;
border-bottom: 50px solid #530800;
transform: skew(19deg);
position: absolute;
margin-top: -77px;
margin-left: -29px;
}
.horn:after {
content: ' ';
width: 0px;
height: 0px;
border: 7px solid transparent;
border-bottom: 50px solid #530800;
transform: skew(-38deg);
position: absolute;
margin-top: -6px;
margin-left: 79px;
}
.pokeSpike {
width: 0px;
height: 0px;
border: 10px solid transparent;
border-bottom: 10px solid #F97100;
position: absolute;
margin-top: -40px;
margin-left: 10px;
}
.pokeSpike:before {
content: ' ';
width: 0px;
height: 0px;
border: 5px solid transparent;
border-bottom: 8px solid #F97100;
position: absolute;
margin-top: -3px;
margin-left: -25px;
}
.pokeSpike:after {
content: ' ';
width: 0px;
height: 0px;
border: 5px solid transparent;
border-bottom: 8px solid #DF3400;
position: absolute;
margin-top: -3px;
margin-left: 15px;
}
.PSright {
width: 0px;
height: 0px;
border: 5px solid transparent;
border-bottom: 5px solid #DF3400;
border-left: 5px solid #DF3400;
position: absolute;
margin-top: 1px;
margin-left: 0px;
}
.leftSideFace {
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-left: 50px solid transparent;
border-bottom: 50px solid #E13300;
border-right: 10px solid #E13300;
position: absolute;
margin-top: -22px;
margin-left: -49px;
transform: rotate(-65deg) scaleX(0.8) scaleY(1.3);
z-index: -1;
}
.rightSideFace {
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #940000;
border-left: 10px solid #940000;
position: absolute;
margin-top: -23px;
margin-left: 30px;
transform: rotate(65deg) scaleX(0.8) scaleY(1.3);
z-index: -10;
}
.LSFeye {
width: 20px;
height: 20px;
background-color: #FBC614;
border-radius: 100%;
position: absolute;
margin-top: 20px;
margin-left: -17px;
transform: rotate(60deg) scaleX(0.8);
border: 3px solid #980100;
}
.RSFeye {
width: 20px;
height: 20px;
background-color: #FBC614;
border-radius: 100%;
position: absolute;
margin-top: 20px;
margin-left: -10px;
transform: rotate(-60deg) scaleX(0.8);
border: 3px solid #510700;
}
.snout {
width: 6px;
height: 0px;
border: 9px solid transparent;
border-bottom: 18px solid #FA7300;
position: absolute;
margin-top: 8px;
margin-left: 8px;
z-index: 2;
}
.snout:before {
content: ' ';
width: 33px;
height: 25px;
background-color: #E23401;
border-radius: 50px;
position: absolute;
margin-top: 17px;
margin-left: -17px;
z-index: 3;
overflow: hidden;
}
.snout:after {
content: ' ';
width: 16px;
height: 25px;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 0px 50px 50px 0px;
position: absolute;
margin-top: 17px;
margin-left: 0px;
z-index: 100;
}
.SNwrap {
width: 33px;
height: 25px;
background-color: #E23401;
border-radius: 50px;
position: absolute;
margin-top: 17px;
margin-left: -14px;
z-index: 3;
overflow: hidden;
}
.nost {
width: 15px;
height: 15px;
background-color: #540700;
position: absolute;
margin-top: 13px;
margin-left: -2px;
z-index: 4;
border-top-right-radius: 4px;
}
.nost:before {
content: ' ';
width: 11px;
height: 11px;
background-color: #E23401;
position: absolute;
margin-top: -7px;
margin-left: 6px;
z-index: 4;
border-radius: 4px;
box-shadow: 0px 5px 0px #540700, 0px 10px 0px #540700;
}
.nost:after {
content: ' ';
width: 15px;
height: 15px;
background-color: #540700;
position: absolute;
margin-top: 0px;
margin-left: 16px;
z-index: 4;
border-top-left-radius: 4px;
}
.BSstripe {
position: absolute;
width: 50px;
height: 0px;
border: 5px solid transparent;
border-bottom: 15px solid #CCC2B6;
margin-top: -95px;
margin-left: -37px;
z-index: 5;
}
.BSstripe:after {
content: ' ';
position: absolute;
width: 25px;
height: 0px;
border-right: 5px solid transparent;
border-bottom: 15px solid #BBB09D;
margin-top: 0px;
margin-left: 0px;
z-index: 5;
}
.BSstripeTwo {
position: absolute;
width: 28px;
height: 0px;
border: 5px solid transparent;
border-bottom: 15px solid #CCC2B6;
margin-top: -125px;
margin-left: -26px;
z-index: 5;
}
.BSstripeTwo:after {
content: ' ';
position: absolute;
width: 14px;
height: 0px;
border-right: 5px solid transparent;
border-bottom: 15px solid #BBB09D;
margin-top: 0px;
margin-left: 0px;
z-index: 5;
}
.belt {
width: 160px;
height: 60px;
position: absolute;
background-color: #F97200;
margin-top: -115px;
margin-left: -90px;
z-index: -1;
border-radius: 10px;
}
.belt:after {
content: ' ';
width: 80px;
height: 60px;
position: absolute;
background-color: #E23401;
border-radius: 0px 10px 10px 0px;
}
.wingsStart {
width: 154px;
height: 15px;
background-color: #960001;
position: absolute;
margin-top: -35px;
margin-left: -86px;
z-index: -3;
}
.WSleftBall {
width: 22px;
height: 22px;
background-color: #DF3200;
border-radius: 100%;
position: absolute;
z-index: -3;
ma
纯css3制作喷火龙图片样式代码.zip
版权申诉
160 浏览量
2022-11-25
10:22:17
上传
评论
收藏 41KB ZIP 举报
纯css3制作喷火龙图片样式代码.zip （3个子文件） 
纯css3制作喷火龙图片样式代码 
纯css3制作喷火龙图片样式代码.jpg 47KB jiaoben2888 
index.html 21KB js 
prefixfree.min.js 6KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
