我正在为朋友建立一个快速的站点,但是我无法解决这个问题。
链接:http://designbyhawk.com/LOSO/ 当鼠标悬停在中心图像上时,它会旋转180度。 我希望它看起来像丝带从美国国旗下旋转出来。 但是,一旦动画开始,丝带就会出现在国旗上方。
我使用z-index属性使丝带保持在国旗下方,但我不确定如何实现所需的效果。
谢谢大家,请您注意代码中的任何不良做法。
html:
链接:http://designbyhawk.com/LOSO/ 当鼠标悬停在中心图像上时,它会旋转180度。 我希望它看起来像丝带从美国国旗下旋转出来。 但是,一旦动画开始,丝带就会出现在国旗上方。
我使用z-index属性使丝带保持在国旗下方,但我不确定如何实现所需的效果。
谢谢大家,请您注意代码中的任何不良做法。
html:
<!DOCTYPE HTML>
<html>
<head>
<title>LOSO 2012</title>
<link href="style.css" type="text/css" rel="stylesheet" media="all">
</head>
<body>
<div id="stripes">
<div id="gradient-top"></div>
<div id="doughnut">
<div id="LOSO">
<img src="LOSO-BANNER.png" alt="Loso 2012">
</div>
</div>
<div id="footer">
<p>© Julien Mothafreakin Cohen 2012</p>
</div>
</div>
</body>
</html>
CSS:
/*--------------------------
RESET
---------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{margin:0; padding:0}
article, aside, details, figcaption, figure, footer,
header, hgroup, menu, nav, section{display:block}
table{border-collapse:collapse; border-spacing:0}
fieldset, img{border:0}
address, caption, cite, dfn, th, var{font-style:normal; font-weight:normal}
caption, th{text-align:left}
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal}
q:before, q:after{content:''}
abbr, acronym{border:0}
/*-----------------------*/
#stripes{
background: url('flag-stripes.jpg') repeat;
width: 100%;
height:1000px;
z-index:5;
}
#gradient-top{
width: 100%;
height: 400px;
background: url('gradient-bg.jpg') repeat-x;
}
/*-----bgs done----*/
#doughnut { /*--- Full credit for this CSS to Seth from stackoverflow: http://stackoverflow.com/users/605698/seth ---*/
border: 50px solid #FFFFFF;
border-radius: 200px;
border-style:ridge;
height:200px;
width:200px;
margin: 0 auto;
position: relative;
bottom: 160px;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
}
#doughnut:hover{
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
}
#LOSO{
background:url('LOSO.png');
width:223px;
height:264px;
position:relative;
bottom:64px;
left:-4px
}
img{
position: relative;
right: 364px;
top: 175px;
z-index: -100 !important;
}
#footer{
width:100%;
height:60px;
background: #222;
opacity:.9;
position:relative;
top:240px;
z-index:10;
padding: 10px 0 0 10px;
color: white;
font-size:15px;
}