본문 바로가기
웹프로그래밍 기초/A반소스자료

위치속성과 변형/애니메이션

by 이데렐라 2023. 5. 11.
반응형

위치

<!DOCTYPE html>
<html>
    <head>
        <title>위치속성</title>
        <style>
            div{width: 300px; height: 150px;}
            .red{background-color: red;}
            .blue{background-color: blue;
                /*position: relative;*/
            }
            .pink{background-color: pink; 
                width: 50px; height: 50px;
                position:absolute;
                top:2000px;
                left: 20px;
            }
            .header{width: 100%; height: 80px; 
                background-color: tomato;
                position:fixed; top:0px; left: 0px;
                box-shadow: 10px 10px 3px 6px blue;

                /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cdeb8e+0,a5c956+100;Green+3D+%232 */
                background: #cdeb8e; /* Old browsers */
                background: -moz-linear-gradient(top,  #cdeb8e 0%, #a5c956 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(top,  #cdeb8e 0%,#a5c956 100%); /* Chrome10-25,Safari5.1-6 */
                background: linear-gradient(to bottom,  #cdeb8e 0%,#a5c956 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            }
            .header ul{list-style: none;}
            .header ul li{float: right; padding: 5px 10px;}
            .clear{clear:both;}
        </style>
    </head>
    <body>
        <div class="header">
            <ul>
                <li>home</li>
                <li>profile</li>
                <li>contact</li>
            </ul>
            <div class="clear"></div>
        </div>
        <div class="red">

        </div>
        <div class="blue">
            <div class="pink">TEST</div>
        </div>
    </body>
</html>

 

변형/애니메이션

<!DOCTYPE html>
<html>
    <head>
        <title>변형속성</title>
        <style>
            .bar{width: 100px; height: 100px; 
                background-color: red;
                transition: width 3s, height 2s;
                /*transition-property: width;
                transition-duration: 3s;
                transition-delay: 0s;*/
            }
            .bar:hover{width:500px;height: 150px;
                background-color: pink;
            }
            .circle{width: 100px; height: 100px;
            background-color: orange;
            border-radius:100px;
            animation-name: move;
            animation-duration: 2s;
            animation-delay: 0s;
            animation-iteration-count:3;
            animation-direction: alternate;
            animation-fill-mode: forwards;
            }

            @keyframes move{
                0%{
                    margin-left: 0px;
                }
                100%{
                    margin-left: 500px;
                    background-color: green;
                }
            }
        </style>
    </head>
    <body>
        <div class="bar"></div>
        <div class="circle"></div>
    </body>
</html>

move.html
0.00MB
position.html
0.00MB

반응형

'웹프로그래밍 기초 > A반소스자료' 카테고리의 다른 글

scroll 에 애니메이션 넣기  (3) 2023.05.25
실습소스  (0) 2023.05.12
디스플레이속성 과 폰트속성  (1) 2023.04.27
CSS 테스트  (0) 2023.04.06
레이아웃 & CSS  (3) 2023.03.30

댓글