2014-12-06 3 views
-1

실제로는 필드 세트 인 순환 경로에서 선택 윤곽이 필요합니다. 이미지 "G"가 원형 경로로 이동하기를 원합니다.html과 css의 원형 경로에 차양 텍스트를 만드시겠습니까?

<html> 
<style type="text/css"> #circle { width:600px ; height:600px ; border-radius:50%; text-align:centre; margin-left:25%; margin-right:25%; } #circle > legend { margin:0px auto; } #appimg1 { width:100px ; height:100px ; border-radius:50%; } 
</style> 
<fieldset id="circle"> 
    <marquee behaviour="scroll" id="circle1"> 
     <legend id="circle2"><img src="games.png" id="appimg1"></legend> 
    </marquee> 
</fieldset> 
+0

<스타일 유형 = "텍스트/CSS"> #circle { 폭 :하지만 어쩌면 당신은 CSS 전환에 모습을 가질 수 600PX; 신장 : 600px; border-radius : 50 %; 텍스트 정렬 : 가운데; margin-left : 25 %; margin-right : 25 %; } #circle> 범례 { 여백 : 0px 자동; } # appimg1 { 너비 : 100px; 높이 : 100px; border-radius : 50 %; }

<천막 행동 = "스크롤"ID = "CIRCLE1"> <전설의 ID = "CIRCLE2">
Chirag

+1

HTTP를 방문하십시오 : // 유래 .com/help/how-to-ask –

+0

몇 가지 조언 : 'id = "circle"은 몇 가지 이유 때문에 좋지 않습니다. 첫째, ID이기 때문에 여러 개의 서클 스타일을 쉽게 지정할 수 없습니다. 클래스가 더 나은 솔루션이 될 것입니다. 둘째로, '원'은 HTML 콘텐츠와 스타일 사이에 링크가 있음을 의미합니다. 외부 CSS를 사용하여이를 방지하려고 시도하는 것입니다. – GolezTrol

답변

1

나는 마키 태그가 고대이고 결코 공식적인 것은 아니라고 생각한다. 나는 네가 원하는대로 할 수 있다고 생각하지 않는다.

/* Show and size the container, so you can see what's going on. */ 
 
.container { 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 200px; 
 
    border: 1px dashed #999; 
 
    display: inline-block; 
 
    width: 200px; 
 
    padding: 5px; 
 
    font-size: 150%; 
 
} 
 

 
/* The letter and the container rotate at the same speed */ 
 
.container, 
 
.letter { 
 
    -webkit-animation:spin 20s linear infinite; 
 
    -moz-animation:spin 20s linear infinite; 
 
    animation:spin 20s linear infinite; 
 
} 
 
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } 
 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } 
 
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } 
 

 

 
/* But the letter rotates in opposite direction */ 
 
.letter { 
 
    -webkit-animation-direction: reverse; /* Chrome, Safari, Opera */ 
 
    animation-direction: reverse; 
 
}
<div class="container"> 
 
    <span class="letter">G</span> 
 
</div>

+0

내가 추가 한 코드를 검토하십시오, 나는 fieldset의 테두리에 이미지 이동이 필요합니까, 어떻게해야합니까? ""... – Chirag

+0

명확한 그림 없이는 무슨 뜻인지 알기는 어렵지만 쉽게 대체 할 수 있습니다. 내 스 니펫에 이미지가있는 스팬 '문자' – GolezTrol

관련 문제