Front end: with regard to the question of the words on the progress bar, how does the color of the words change with the background color? ask for advice. Crab
the specific effect is as follows:
I mean, how to achieve the front end, ask for advice from God, crab
<div class="bg">
<span class="text">0%</span>
<div class="progress" style="width: 0%;">
<span class="text">0%</span>
</div>
</div>.text {
position: absolute;
left: 125px;
transform: translateX(-50%);
font-size:25px;
}
.bg {
background: -sharpfff;
border-radius: 5px;
border: 1px solid -sharp6cf;
width : 250px;
height: 50px;
line-height: 50px;
position: relative;
}
.bg > .text {
color: -sharp6cf;
}
.progress {
position: absolute;
height: 100%;
background: -sharp6cf;
overflow: hidden;
}
.progress > .text {
color: -sharpfff;
} emmmmm and other people before dinner, simply implemented one, but I don't know how the compatibility is. No, no, no. Css3's clip attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 400px;
height: 40px;
line-height: 40px;
text-align: center;
}
.progress-container {
position: relative;
border: 1px solid black;
font-size: 28px;
}
.skyblue {
position: absolute;
top: 0;
z-index: 1;
background: skyblue;
color: white;
}
.white {
position: absolute;
top: 0;
z-index: 2;
background: white;
color: skyblue;
clip: rect(auto auto auto 194px);
}
</style>
</head>
<body>
<div class="progress-container">
<div class="skyblue">50%</div>
<div class="white">50%</div>
</div>
</body>
</html>the principle goes something like this:
the container of the package has two div
div under the same initial positioning that looks like this:
div :
then use js to adjust the attribute value in clip: rect (top, right, bottom, left) according to the progress. In this example, you adjust the left value
for parsing, a.b and a [b] are both written to get object properties. But the difference is that the b of a [b] can only be a string. how does the following code parse, and why is the output value 345345333? var a = {}; var b = {key: b }; var c ...
how can I implement the other checkbox, that is unselectable and clear the previously selected checkbox, when I click 2018 to plan the layout? ...
Analog data can be sorted the server will report an error upon request....
swiper player is used for page sliding. Video.js is based on nuxt server rendering . Now there is such a problem. When the page slides left and right, the player always fails to follow the page sliding in time and always lags behind. there is no pro...
for example, how to answer this interview question ...
I set the parent element to relative and the child element position to absolute positioning, but why does the font position change relative to the background when I zoom in and out? In the screenshot below, you can see the zoom in and out of the page, a...
as shown in the picture, the effect is that the mouse moves over the picture, the picture is hidden, and the corresponding introduction is displayed. <li> <div><img src= >< div> <div>< div> < li>...
at first I didn t write the CSS and HTML of the main area the following code is the sidebar CSS, page effect as shown in figure 2 main ...
...
ask God to debug https: codepen.io xyj pen KR. without changing the drop-down arrow toward the time effect chart. everything is fine, click the entry for details. Now I want to change the direction of the arrow when the details appear. So I want ...
Environment : ionic1.3.4 problem description : when the focus is located in the input field, the page jumps up and down. (seaweed) the beating process of is not cyclic; the closer the is to the keyboard, the greater the amplitude is. I think th...
the following code: document.querySelector(".div-bgd").style.display = "block"; document.querySelector(".load_div").style.display = "block"; console.log(1) alert(1) In the browser environment, why execute conso...
in general, take the html file as the entry, automatically find dependent images, css and js, and then name and package them with hash. The referenced images of the new html file, css and js, will be changed to the new name with the hash code. I have ...
vuetabboxtabbox <template> <div :class="tabStyle" :style="boxstyle" @click="tabClick(name)"> {{name}} <div class="selected-icon" v-show="isSelected">< div> ...
: ajaxresonseJSONundefined A piece of meat is right in front of you, but you don t have the heart to hit people. ...
I got value, but push it into the history array. There is no value in history searchinto(e) { console.log(e) const value = this.data.search.content; const history = this.data.history; console.log(value); history.push[value]; ...
The DIVHTML: plug-in is AngularJS. ...
there is usually a fixed process when developing a SPA like Vue, such as scaffolding to generate npm dependencies, then install dependencies, personalize Webpack configuration, jslint configuration, and then start writing components and so on. what ar...
< el-upload class="upload-demo" ref="upload" :action="url" name="Content" :data="form" :on-rem...
for example, I have a dynamic string like 1232 {Button 1} {Button 2} 765432 (variable length). How can I get 1231 and {Button 1}, {Button 2}, 765432? ...