|
 |
| |
ผมสร้างรูปวงกลมด้วย css ทำให้มันหมุน แต่ผมอยากให้มีข้อความยุตรงกลางวงกลมจะทำอย่างไรครับ |
| |
 |
|
|
 |
 |
|
Code (PHP)
<!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>Untitled Document</title>
<style>
/* Create the animation blocks */
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* width and height can be anything, as long as they're equal */
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Create the animation blocks */
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
/* Spinning, gradient circle; CSS only! */
#advanced {
display:block;
width:50px;
height:50px;
font-size:20px;
color:#fff;
line-height:50px;
text-shadow:0 1px 0 #666;
text-align:center;
text-decoration:none;
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
/* webkit chrome, safari, mobile */
-webkit-animation-name: spin;
-webkit-animation-duration: 3s; /* 3 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
/* mozilla ff */
-moz-animation-name: spin;
-moz-animation-duration: 3s; /* 3 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
/* microsoft ie */
-ms-animation-name: spin;
-ms-animation-duration: 3s; /* 3 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
a{
/* webkit chrome, safari, mobile */
-webkit-animation-name: none;
/* mozilla ff */
-moz-animation-name: none;
/* microsoft ie */
-ms-animation-name: none;
}
</style>
</head>
<body>
<div id="advanced" class="circle" ><a>1</a></div>
</body>
</html>
มีวิธีที่ทำให้ tag อื่นเอาไว้บน tag div ได้ไหมครับ หรือมีวิธีแก้อย่างไรได้บ้างครับ เพราะผมใส่ข้อความไป ข้อความก้หมุนด้วย
Tag : PHP, HTML/CSS
|
ประวัติการแก้ไข
2013-03-11 15:28:22
|
 |
 |
 |
 |
| Date :
2013-03-11 15:22:09 |
By :
sailorfah |
View :
6015 |
Reply :
1 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
Code (PHP)
<!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>Untitled Document</title>
<style>
/* Create the animation blocks */
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
/* width and height can be anything, as long as they're equal */
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Create the animation blocks */
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
/* Spinning, gradient circle; CSS only! */
#advanced {
z-index:-99;
display:block;
position:absolute;
width:50px;
height:50px;
font-size:20px;
color:#fff;
line-height:50px;
text-shadow:0 1px 0 #666;
text-align:center;
text-decoration:none;
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
/* webkit chrome, safari, mobile */
-webkit-animation-name: spin;
-webkit-animation-duration: 3s; /* 3 seconds */
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
/* mozilla ff */
-moz-animation-name: spin;
-moz-animation-duration: 3s; /* 3 seconds */
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
/* microsoft ie */
-ms-animation-name: spin;
-ms-animation-duration: 3s; /* 3 seconds */
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
left: 22px;
top: 16px;
}
a{
/* webkit chrome, safari, mobile */
-webkit-animation-name: none;
/* mozilla ff */
-moz-animation-name: none;
/* microsoft ie */
-ms-animation-name: none;
}
div.text1{
font-size:15px;
margin-left:10px;
text-align:center;
width:50px;
height:50px;
}
</style>
</head>
<body>
<div class="text1"><div id="advanced" class="circle" ></div><div style="padding-top:25px;padding-left:5px;">1</div></div>
</body>
</html>
|
| |
|
|
| |
| Date :
2013-03-12 10:01:58 |
By :
teez1232002 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 00
|
