The difficulties in
Two masks for SVG graphicsCopy the codeOn the first code
This is the pink box on the left
There’s nothing to say about that
<div id="con">
<div id="TA-con">
<div id="text-con">
<div id="linght"></div>
<div id="TA">Recharge TA</div>
</div>
</div>
Copy the codebody {
margin: 0;
padding: 0;
background-color: #eee;
}
/* Set the white container */
#con {
width: 350px;
height: 85px;
background-color: #fff;
position: relative;
border-radius: 4px;
margin:50px auto;
}
#TA-con {
width: 157px;
height: 50px;
background-color: #f25d8e;
box-shadow: 0 4px 4px rgba(255, 112, 159, 3);position: absolute;
top: 50%;
left: 5%;
transform: translateY(50%);border-radius: 4px;
cursor: pointer;
}
/* Sets the text to center the container */
#text-con {
width: 100px;
height: 100%;
margin: 0 auto;
position: relative;
}
/* Make a little lightning */
#linght {
width: 0;
height: 0;
position: absolute;
top: 36%;
left: 4px;
border-color: transparent;
border-style: solid;
border-width: 10px;
border-top: 10px solid #fff;
border-radius: 4px;
transform: rotate(-55deg);
}
#linght::after {
position: absolute;
top: -13px;
left: -11px;
content: "";
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 10px;
border-top: 10px solid #fff;
transform: rotate(180deg);
border-radius: 4px;
}
/ * * / text
#TA {
float: right;
line-height: 50px;
font-size: 15px;
color: #fff;
}
#TA-con:hover {
background-color: #ff6b9a;
}
Copy the codeWhat I’m doing here is creating an SVG image with a gray background. It looks a lot complicated, but I didn’t write it
<div id="tube-con">
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="77 M1 h234. 226 l307. 006 24 h790" stroke="#e5e9ef" stroke-width="20" />
<path d="M0 140 h233. 035 l329. 72 71 h1028" stroke="#e5e9ef" stroke-width="20" />
<path d="255 M1 h234. 226 l307. 006 307 h790" stroke="#e5e9ef" stroke-width="20" />
<path d="M0 305 h233. 035 l329. 72 375 h1028" stroke="#e5e9ef" stroke-width="20" />
<rect y="186" width="236" height="24" fill="#e5e9ef" />
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef" />
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef" />
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
</svg>
Copy the codeUse is this thing, web version online, after drawing can right click copy code, is not very simple! www.figma.com/
Now that I have my SVG drawing, how do I do it
Things needed: 1: SVG with a grey background; 2: A pink SVG graph. When I hover over the left pink box, the pink SVG graph expands completely and starts with 0. 3. Small yellow squares that move quickly.Copy the codeWe have a grey background, but we still need pink and yellow SVG images
Masks are used to mask pink SVG<div id="mask">There is no difference from grey SVG except changing the color<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="77 M1 h234. 226 l307. 006 24 h790" stroke="#f25d8e" stroke-width="20" />
<path d="M0 140 h233. 035 l329. 72 71 h1028" stroke="#f25d8e" stroke-width="20" />
<path d="255 M1 h234. 226 l307. 006 307 h790" stroke="#f25d8e" stroke-width="20" />
<path d="M0 305 h233. 035 l329. 72 375 h1028" stroke="#f25d8e" stroke-width="20" />
<rect y="186" width="236" height="24" fill="#f25d8e" />
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e" />
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e" />
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
</svg>
</div>Orange-mask is used to mask yellow SVG<div id="orange-mask" >There is no difference from grey SVG except changing the color<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="77 M1 h234. 226 l307. 006 24 h790" stroke="#ffd52b" stroke-width="20" />
<path d="M0 140 h233. 035 l329. 72 71 h1028" stroke="#ffd52b" stroke-width="20" />
<path d="255 M1 h234. 226 l307. 006 307 h790" stroke="#ffd52b" stroke-width="20" />
<path d="M0 305 h233. 035 l329. 72 375 h1028" stroke="#ffd52b" stroke-width="20" />
<rect y="186" width="236" height="24" fill="#ffd52b" />
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b" />
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b" />
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
</svg>
</div>
<p id="people">A total of<b>0</b> 人</p>
</div>
</div>
Copy the codeThe CSS code
/ / #tube-con {width: 157px; height: 55px; position: absolute; right: -5px; top: 15px; } /* Set the width of the SVG image */ SVG {width: 100%; height: 100%; } /* Create a mask with a width of 0, when I hover charging box, width expand */ #mask {width: 0px; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; The transition: all 0.5 s; } #mask SVG {width: 157px;} #mask SVG {width: 157px; height: 55px; } # ta-con :hover+# tubecon >#mask{width:157px; # ta-con :hover+# tubecon >#orange-mask{animation: move1 0.1s linear 0.1s infinite; } # ta-con :hover+# tubecon >#orange-mask SVG {animation: moveTwo 0.5s linear 0.2s infinite; } /* Create a yellow move mask */ #orange-mask{width: 18px; height: 100%; overflow: hidden; position:absolute; left:-15px; top:0px; } /* Create yellow move content */ #orange-mask SVG {position: absolute; top:0; left:15px; width: 157px; height: 55px; } @keyframes move1 { 0%{ left:-15px; } 100%{ left:140px; } } @keyframes movetwo { 0%{ left:15px; } 100%{ left:-140px; } } #people{ position:absolute; right:10px; top:8px; font-size:12px; The font-family: "elegant black"; color:#aaa; } #people>b{ color:#777; }Copy the codeThe hardest part of CSS handling is the yellow SVG and yellow SVG masks
Because we need to ensure that the yellow SVG mask moves from left to right, and that the yellow SVG position remains the same; Mask for the parent element, yellow SVG as child elements, the parent element to add location, parent, child elements will move, if the child element to add location, parent don't add location or the parent element normal positioning, child elements as fixed, this has lead to the parent element mask cannot be hidden overflow part of the child elements, I have been struggling for a long time!! Then I suddenly realized that no matter how many blocks the parent moves, as long as the child moves at the same speed and the opposite distance, the child is guaranteed to stay in the same place all the time!! The child element is static relative to the body!Copy the codeMove1 is the parent element mask, moveTwo is the yellow SVG graph, please do not make fun of the name…
As far as MOVE1 moves, MoveTwo moves the opposite distance
@keyframes move1 {
0%{
left: -15px;
}
100%{
left:140px; }} @keyframes movetwo {
0%{
left:15px;
}
100%{
left: -140px; }}Copy the code
Copy the code
Copy the code
Copy the code
Copy the code
Copy the codeAll the code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>Document</title>
<style>body { margin: 0; padding: 0; background-color: #eee; } /* set the white container */ #con {width: 350px; height: 85px; background-color: #fff; position: relative; border-radius: 4px; margin:50px auto; } /* set the text content container */ # ta-con {width: 157px; height: 50px; background-color: #f25d8e; box-shadow: 0 4px 4px rgba(255, 112, 159, .3); position: absolute; top: 50%; left: 5%; transform: translateY(-50%); border-radius: 4px; cursor: pointer; } /* Set the text center container */ #text-con {width: 100px; height: 100%; margin: 0 auto; position: relative; } /* make a small lightning */ #linght {width: 0; height: 0; position: absolute; top: 36%; left: 4px; border-color: transparent; border-style: solid; border-width: 10px; border-top: 10px solid #fff; border-radius: 4px; transform: rotate(-55deg); } #linght::after { position: absolute; top: -13px; left: -11px; content: ""; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 10px; border-top: 10px solid #fff; transform: rotate(180deg); border-radius: 4px; } /* text */ #TA {float: right; line-height: 50px; font-size: 15px; color: #fff; } #TA-con:hover { background-color: #ff6b9a; } /* create a container */ #tube-con {width: 157px; height: 55px; position: absolute; right: -5px; top: 15px; } /* Set the width of the SVG image */ SVG {width: 100%; height: 100%; } /* Create a mask with a width of 0, when I hover charging box, width expand */ #mask {width: 0px; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; The transition: all 0.5 s; } #mask SVG {width: 157px;} #mask SVG {width: 157px; height: 55px; } # ta-con :hover+# tubecon >#mask{width:157px; # ta-con :hover+# tubecon >#orange-mask{animation: move1 0.1s linear 0.1s infinite; } # ta-con :hover+# tubecon >#orange-mask SVG {animation: moveTwo 0.5s linear 0.2s infinite; } /* Create a yellow move mask */ #orange-mask{width: 18px; height: 100%; overflow: hidden; position:absolute; left:-15px; top:0px; } /* Create yellow move content */ #orange-mask SVG {position: absolute; top:0; left:15px; width: 157px; height: 55px; } @keyframes move1 { 0%{ left:-15px; } 100%{ left:140px; } } @keyframes movetwo { 0%{ left:15px; } 100%{ left:-140px; } } #people{ position:absolute; right:10px; top:8px; font-size:12px; The font-family: "elegant black"; color:#aaa; } #people>b{ color:#777; }</style>
</head>
<body>
<div id="con">
<div id="TA-con">
<div id="text-con">
<div id="linght"></div>
<div id="TA">Recharge TA</div>
</div>
</div>
<div id="tube-con">
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="77 M1 h234. 226 l307. 006 24 h790" stroke="#e5e9ef" stroke-width="20" />
<path d="M0 140 h233. 035 l329. 72 71 h1028" stroke="#e5e9ef" stroke-width="20" />
<path d="255 M1 h234. 226 l307. 006 307 h790" stroke="#e5e9ef" stroke-width="20" />
<path d="M0 305 h233. 035 l329. 72 375 h1028" stroke="#e5e9ef" stroke-width="20" />
<rect y="186" width="236" height="24" fill="#e5e9ef" />
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef" />
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef" />
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
</svg>
<div id="mask">
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="77 M1 h234. 226 l307. 006 24 h790" stroke="#f25d8e" stroke-width="20" />
<path d="M0 140 h233. 035 l329. 72 71 h1028" stroke="#f25d8e" stroke-width="20" />
<path d="255 M1 h234. 226 l307. 006 307 h790" stroke="#f25d8e" stroke-width="20" />
<path d="M0 305 h233. 035 l329. 72 375 h1028" stroke="#f25d8e" stroke-width="20" />
<rect y="186" width="236" height="24" fill="#f25d8e" />
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e" />
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e" />
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
</svg>
</div>
<div id="orange-mask" >
<svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="77 M1 h234. 226 l307. 006 24 h790" stroke="#ffd52b" stroke-width="20" />
<path d="M0 140 h233. 035 l329. 72 71 h1028" stroke="#ffd52b" stroke-width="20" />
<path d="255 M1 h234. 226 l307. 006 307 h790" stroke="#ffd52b" stroke-width="20" />
<path d="M0 305 h233. 035 l329. 72 375 h1028" stroke="#ffd52b" stroke-width="20" />
<rect y="186" width="236" height="24" fill="#ffd52b" />
<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b" />
<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white" />
<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b" />
<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white" />
</svg>
</div>
<p id="people">A total of<b>0</b> 人</p>
</div>
</div>
</body>
</html>
Copy the code