CSS 绘制QVOD LOGO-css3 简陋制作

先看下效果吧!
CSS 绘制QVOD LOGO-css3 简陋制作


具体代码:

<!doctype html>
<html>
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <style>

 .Qvod{
    background-color:black;
    border: 30px solid black;
    margin: 10px auto;
    width: 540px;
    height: 304px;
    border-radius: 10px;
}


.QvodLogo{
    margin: 50px 190px;
    width: 160px;height: 160px; background-color:red;position:absolute;
    -moz-border-radius:5em; -webkit-border-radius:5em; border-radius:5em;
    -moz-box-shadow:2px 7px 2px #333333; -webkit-box-shadow:2px 7px 2px #333333; box-shadow:2px 7px 2px #333333;
}

.QvodLogo .Black{
    width: 120px;height: 120px; background-color:#000;
    -moz-border-radius:5em; -webkit-border-radius:5em; border-radius:5em;
    margin: 20px;
    z-index: 100
}

.QvodLogo .Play{
  width: 0;
  height: 0;
  border-top: 40px solid transparent;
  border-right: 80px solid #0D2CF7;
  border-bottom: 40px solid transparent;
  position: absolute;
  margin: 18px 0 0 8px;
}

.QvodLogo .Square{
    position: absolute;
    width:70px;
    height: 20px;
    display: block;
    background-color:red;
    -moz-box-shadow:2px 7px 2px #333333; -webkit-box-shadow:2px 7px 2px #333333; box-shadow:2px 7px 2px #333333;
    margin-top: -20px;
    margin-left:80px;
    -moz-transform:rotate(1deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);
    -moz-transform-origin:0% 0%;
    -webkit-transform:rotate(1deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);
    -webkit-transform-origin:0% 0%;
    -o-transform:rotate(1deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);-o-transform-origin:0% 0%;
    transform:rotate(1deg) scale(1.00,1.00) translate(0px,0px) skew(0deg,0deg);transform-origin:0% 0%;
}

     </style>

    </head>
    <body>

        <div class="Qvod">
            <div class="QvodLogo">
                <div class="Black">
                    <div class="Play"></div>
                </div>
                <div class="Square"></div>
            </div>
        </div>

    </body>
</html>

你可能感兴趣的:(html5,css3)