<style>
#parent0 {
animation:anim 3s infinite;}
@keyframes anim {
0% { width:300px;height:300px;}
100% { width:400px;height:400px;}
}
</style>
<script>
function createDiv(width,height){
var div=document.createElement('div');
div.id=Math.random()*10000;
div.className="shape";
div.style.width=width+"px";
div.style.height=height+"px";
div.overflow="hidden";
return div;
}
</script>
<body>
<script>
var div=createDiv(600,600);
div.id="parent0";
div.style.position="relative";
div.style.left="100px";
div.style.top="100px";
div.style.background="transparent";
document.body.appendChild(div);
var div2=createDiv("auto","auto");
div2.style.background="transparent";
div2.style.position="absolute";
div2.style.left="0px"
div2.style.top="100px";
div2.style.right="0px";
div2.style.bottom="100px";
div2.style.borderLeft="100px solid skyblue";
div2.style.borderRight="100px solid skyblue";
div.appendChild(div2);
var div3=createDiv("auto","auto");
div3.style.background="transparent";
div3.style.position="absolute";
div3.style.left="100px"
div3.style.top="0px";
div3.style.right="100px";
div3.style.bottom="0px";
div3.style.borderTop="100px solid skyblue";
div3.style.borderBottom="100px solid skyblue";
div.appendChild(div3);
</script>
</body>
반응형
'svg' 카테고리의 다른 글
| svg elements transform-box:fill-box ; transform-origin:50% 50% ; (1) | 2023.12.21 |
|---|---|
| svg rotation about tx,ty point (1) | 2023.12.19 |
| svg animation : bezier curve (0) | 2023.11.09 |
| svg animation; mutation (0) | 2023.11.08 |
| svg rounded rectangle ; animation (0) | 2023.11.08 |
