2017-11-28 27 views
-1

마지막으로 html과 css로 코딩 한 것은 오랜 시간이었습니다. 그 멋진 html5와 css3 이전이었습니다. 그래서 2000 년대 초반에 우리는 gif에서 로고를 만들었습니다. 정말 멋졌고, 방금 PC에서 찾았습니다. 제한된 크기의 gif 대신 순수한 CSS로 변환하는 것이 좋겠지 만 시작하는 방법을 모릅니다. Here is my animated gifcss3에서이 애니메이션을 코딩하는 방법은 무엇입니까?

내가 css3 속성을 선택해야하는 첫 인상을 주시겠습니까? 감사합니다.

+0

최소한 – storaged

답변

0

맞춤 키 프레임과 함께 애니메이션 속성을 사용하는 것이 좋습니다. 다음은 대략적인 예입니다. 나는 애니메이션에 많은 시간을 할애하지 않았다. 당신의 일 그게 전부)

https://codepen.io/bygrace1986/pen/POypXX

HTML

<div class="logo" data-logo="wp"></div> 

CSS

.logo { 
    position: relative; 
    width: 2em; 
    height: 2em; 
    font-size: 5em; 
    font-family: arial; 
    font-weight: bold; 
    font-style: italic; 
    text-transform: uppercase; 
} 

.logo::before, .logo::after { 
    content: attr(data-logo); 
    position: absolute; 
    z-index: -1; 
    left: 0; 
} 

.logo::before { 
    color: red; 
    animation: rotate 1s infinite; 
} 

.logo::after { 
    color: black; 
    animation: rotate 1s infinite reverse; 
} 

@keyframes rotate { 
    0% { 
    left: 0; 
    top: 0; 
    } 
    25% { 
    left: 10%; 
    } 
    50% { 
    top: 10%; 
    } 
    75% { 
    left: 0; 
    } 
    100% { 
    top: 0; 
    } 
} 
+0

당신을 매우 감사 문제를 해결하기 위해 당신의 접근 방식의 일부를 제공해야 많은! – qrr