html keyframes

最新推荐文章于 2023-05-04 18:09:23 发布

fivestar2009

最新推荐文章于 2023-05-04 18:09:23 发布

阅读量747

点赞数

分类专栏： html 文章标签： html servlet javascript

本文链接：https://blog.csdn.net/fivestar2009/article/details/127021753

版权

html 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}

@keyframes myfirst
{
10% {transform :scale(1);}
100% {transform :scale(8);}
}

@keyframes action_skew{
   0%{opacity: 0;}
   50%{ opacity: 0.2;}
   100%{ opacity: 1;}
}

.realdata{
font-size:10px;
color:#669A58;
}
</style>

</head>

<body>

</div>
</div>

aaa.html

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<style type="text/css">
.line {
    stroke-width: 4px;
    stroke: red;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: move 2s;
}

@keyframes move {
    to {
        stroke-dashoffset: 0;
    }
}
</style>
<svg
    style="background:#007fff"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    
    viewBox="0, 0, 50, 50"
    width="300"
    height="300" >
    <circle cx="10" cy="10" r="49" stroke="black"
    stroke-width="1" fill="red" />

    <rect width="100" height="100" x="20" y="20" rx="30" ry="30" style="fill:rgb(255,255,0);stroke-width:4;
           stroke:rgb(0,0,0);fill-opacity: .6;stroke-opacity: .5;" />
   <path d="M0 100 H400" class="line"></path>
</svg>