我想制作一个@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);
* { padding: 0; margin: 0; }
body, html
{
width: 100%;
height: 100%;
font-family: "Droid Sans", arial, verdana, sans-serif;
font-weight: 700;
color: #ff6;
background-color: #000;
overflow: hidden;
}
p#start
{
position: relative;
width: 16em;
font-size: 200%;
font-weight: 400;
margin: 20% auto;
color: #4ee;
opacity: 0;
z-index: 1;
-webkit-animation: intro 2s ease-out;
-moz-animation: intro 2s ease-out;
-ms-animation: intro 2s ease-out;
-o-animation: intro 2s ease-out;
animation: intro 2s ease-out;
}
@-webkit-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
@-moz-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
@-ms-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
@-o-keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes intro {
0% { opacity: 1; }
90% { opacity: 1; }
100% { opacity: 0; }
}
h1
{
position: absolute;
width: 2.6em;
left: 50%;
top: 25%;
font-size: 10em;
text-align: center;
margin-left: -1.3em;
line-height: 0.8em;
letter-spacing: -0.05em;
color: #000;
text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
opacity: 0;
z-index: 1;
-webkit-animation: logo 5s ease-out 2.5s;
-moz-animation: logo 5s ease-out 2.5s;
-ms-animation: logo 5s ease-out 2.5s;
-o-animation: logo 5s ease-out 2.5s;
animation: logo 5s ease-out 2.5s;
}
h1 sub
{
display: block;
font-size: 0.3em;
letter-spacing: 0;
line-height: 0.8em;
}
@-webkit-keyframes logo {
0% { -webkit-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -webkit-transform: scale(0.1); opacity: 0; }
}
@-moz-keyframes logo {
0% { -moz-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -moz-transform: scale(0.1); opacity: 0; }
}
@-ms-keyframes logo {
0% { -ms-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -ms-transform: scale(0.1); opacity: 0; }
}
@-o-keyframes logo {
0% { -o-transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { -o-transform: scale(0.1); opacity: 0; }
}
@keyframes logo {
0% { transform: scale(1); opacity: 1; }
50% { opacity: 1; }
100% { transform: scale(0.1); opacity: 0; }
}
/* the interesting 3D scrolling stuff */
#titles
{
position: absolute;
width: 18em;
height: 50em;
bottom: 0;
left: 50%;
margin-left: -9em;
font-size: 350%;
text-align: justify;
overflow: hidden;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: perspective(300px) rotateX(25deg);
-moz-transform: perspective(300px) rotateX(25deg);
-ms-transform: perspective(300px) rotateX(25deg);
-o-transform: perspective(300px) rotateX(25deg);
transform: perspective(300px) rotateX(25deg);
}
#titles:after
{
position: absolute;
content: ' ';
left: 0;
right: 0;
top: 0;
bottom: 60%;
background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
pointer-events: none;
}
#titles p
{
text-align: justify;
margin: 0.8em 0;
}
#titles p.center
{
text-align: center;
}
#titles a
{
color: #ff6;
text-decoration: underline;
}
#titlecontent
{
position: absolute;
top: 100%;
-webkit-animation: scroll 100s linear 4s infinite;
-moz-animation: scroll 100s linear 4s infinite;
-ms-animation: scroll 100s linear 4s infinite;
-o-animation: scroll 100s linear 4s infinite;
animation: scroll 100s linear 4s infinite;
}
/* animation */
@-webkit-keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}
@-moz-keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}
@-ms-keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}
@-o-keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}
@keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}
，其中一行将连续不断地从其一点到另一点之间出现一个短划线。用简单的话说，我有一条由SVG组成的黑色曲线线，我想在该线的起点到终点之间加上一个绿色的小破折号。
我已经使用的代码是；
SVG animation
以及我曾经使用过的CSS；
<path class="wire2" d="m101.46 98.069v23.62c-0.45241 1.6685-1.5209 2.8921-3.107 3.7418h-8.586c-7.6296-1.8581-4.3753-9.9624-0.86863-10.457 2.7766-0.33497 6.2661 0.0425 7.2497 4.7774v13.831c-1.6738 5.8302-9.8518-0.13285-4.1093-3.8754h71.027c5.967-1.5211 7.5189-5.2498 8.5192-9.2542v-44.2" stroke-width="1.8521"/>
<path class="wire3" d="m101.46 98.069v23.62c-0.45241 1.6685-1.5209 2.8921-3.107 3.7418h-8.586c-7.6296-1.8581-4.3753-9.9624-0.86863-10.457 2.7766-0.33497 6.2661 0.0425 7.2497 4.7774v13.831c-1.6738 5.8302-9.8518-0.13285-4.1093-3.8754h71.027c5.967-1.5211 7.5189-5.2498 8.5192-9.2542v-44.2" stroke-width="1.8521"/>
它可以工作，但是该行后跟一个长破折号，但我希望它很小。