is like this. I want to implement this function
this indication, this is dynamic, so it cannot be made into a background picture.
the function I want to achieve is this small circle, indicator, you can move along this circle all the time. First of all, you have to make the instructions of this circle and this circle. I think I can solve the rest of the animation on my own.
could you tell me that this ring has a point? how can this be realized?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Arc</title>
<style type="text/css">
.box {position:relative;margin:100px;width:200px;height:200px;border-radius:50%;overflow:hidden;}
.box .pie {position:absolute;bottom:50%;left:50%;width:100%;height:100%;background-color:rgba(0,0,0,0.3);box-sizing:border-box;}
.box .pie-1 {background-color:RGB(218,106,78);transform-origin:left bottom;transform:rotate(0deg) skew(-30deg);}
.box .pie-2 {background-color:RGB(244,181,91);transform-origin:left bottom;transform:rotate(-60deg) skew(-30deg);}
.box .pie-3 {background-color:RGB(138,192,101);transform-origin:left bottom;transform:rotate(-120deg) skew(-30deg);}
.box .pie-4 {background-color:RGB(126,200,221);transform-origin:left bottom;transform:rotate(-180deg) skew(-30deg);}
.box .pie-5 {background-color:RGB(244,181,91);transform-origin:left bottom;transform:rotate(-240deg) skew(-30deg);}
.box .pie-6 {background-color:RGB(206,72,71);transform-origin:left bottom;transform:rotate(-300deg) skew(-30deg);}
.box .pie-bottom {border:3px solid -sharpFFF;}
.box .base {position:absolute;top:10px;left:10px;width:180px;height:180px;border-radius:50%;border:5px solid -sharpFFF;box-sizing:border-box;}
.box .info {position:absolute;top:1px;left:1px;width:168px;height:168px;border-radius:50%;background-color:-sharpFFF;box-sizing:border-box;}
.box .dot {position:absolute;margin-top:-5px;margin-left:-5px;top:100px;left:184px;width:10px;height:10px;border-radius:50%;background-color:-sharp000;transform-origin:-79px center;transform:rotate(-130deg);}
.box .patch {position:absolute;bottom:0;left:50%;width:106px;transform-origin:center bottom;transform:translate(-50%, 0);border-left: 14px solid transparent;border-right:14px solid transparent;border-bottom:28px solid RGB(244,181,91);box-sizing:border-box;}
</style>
<script>
document.addEventListener('DOMContentLoaded', function(){
let domDot = document.querySelector('.box .dot');
let dotDeg = 0;
function update_dot()
{
domDot.style.transform = 'rotate('+dotDeg+'deg)';
dotDeg += 5;
if(dotDeg >= 360)
dotDeg = dotDeg % 360;
if(dotDeg >= 60 && dotDeg <= 120)
dotDeg = 120;
setTimeout(update_dot, 250);
}
setTimeout(update_dot, 0);
});
</script>
</head>
<body>
<div class="box">
<div class="pie pie-1"></div>
<div class="pie pie-2"></div>
<div class="pie pie-3"></div>
<div class="pie pie-4"></div>
<div class="pie pie-5 pie-bottom"></div>
<div class="pie pie-6"></div>
<div class="base">
<div class="info"></div>
</div>
<div class="dot"></div>
<div class="patch"></div>
</div>
</body>
</html>consider using SVG to try
consider using SVG implementation: https://sunmengyuan.github.io...
Please refer to https://codeshelper.com/a/11...
for specific ideas.Previous: On the configuration of nginx for vue Project in production Environment
Next: Vue element el-tree @ node-click click event is invalid
<template> <div style="height: 100%;"> <mt-header title=""> <mt-button icon="back" slot="left" v-tap="{methods: switchView, view: Post }">< mt-button> &l...
in the process of using weui, how to find the html structure of this SearchBar after introducing cdn? Neither the rookie tutorial nor W3C says how to use SearchBar ...
$(document).ready(function(){ $(".pageloading").show(); $(window).on("load", function() { $(".pageloading").fadeOut(); }); }); google chrome can, will $( ".pageloading "). FadeOut (); but the safari networ...
there is such a requirement, as shown in the figure are four menu buttons. The four menu icons here are not vector icons similar to Font Awesome, but pictures in png format, namely f.png, u.png, s.png, and p.png. demand: clicking on the correspondi...
directly above the picture, how to take this top value ...
< H1 > problem description < H1 > while writing transition animation, I inadvertently found that sometimes the page would jam, and the Chrome memory of the viewing task manager suddenly soared. After various exclusions, I found that transform:skew (9...
dynamic effects that are often overlooked are so important to user experience design Animation effect is an unavoidable link in user experience design, while in mobile interaction, dynamic effect exists as a transition lubricant and an important lin...
@ media only screen and (min-width:320px) {html {font-size:12px;}} @ media only screen and (min-width:375px) {html {font-size:13px;}} @ media only screen and (min-width:412px) {html {font-size:14px;}} htmlrem1rembodypagepage1rem1rem16px1rem ...
use vue to do a nine-grid lucky draw, which is fast at the beginning, slow down after a few laps, and can control where to stop. There is a big lucky draw button in the middle of the prize. How to write the style, ask for advice ...
to write several mobile pages, you need to use the components provided by ant design mobile to develop. How to use this thing, the document doesn t understand much at first and which of the two ways mentioned above should be used, ah, to find a so...
1. First of all, I have declared my font 2. 3. . 4. However, the above problems only occur in chrome and Firefox, where special fonts are successfully rendered on Safari . ...
the only thing I can think of now is to save the current canvas to an array every time I finish drawing, and then take it out of the array when I undo it ...
.body { background-image:url("image 1.jpg"); } I have tried the following background-image:url ( "1.jpg "); background-image:url ( " image 1.jpg "); background-image:url ( ".. image 1.jpg "); background-image:url ( ".. .. image 1.j...
sometimes normal and sometimes abnormal, use document.body.scrollTop = document.body.scrollHeight;; on the contrary, input will not be pushed up. Can you give me some advice? Thank you when the keyboard pops up, there is a value in document.body....
hover flashes when you move it up. ...
Why ReactDOM.render () cannot render after the page jumps, and it has no effect Page code after jump import React,{Component}from react ; import ReactDOM from react-dom ; import { Flex, WhiteSpace,Button } from antd-mobile ; import U98 ...
the framework of react-based ant design mobile does not write Chinese text directly in the code, so where is the Chinese text written and how should it be used? ask for advice, one for beginners ...
recently encountered a problem, in the cat s eye movie official website to see the normal display of numbers on the page, but to check the source code is a white box, can anyone solve the problem? screenshots of some cat s eye movie pages: ...
use css3 to write a page animation, including width,height,translate,opacity, using chrome to view the number of frames is only 29fsMur31fs, occasionally some will be more than 50 frames, how to optimize to reach the number of 60 frames, and switch to so...
as shown in the picture, this is the menu of a background management system. After I clicked on the small menu, I was clicked to change the color, and only one changed the color at the same time. Ask for demo or link ...
