Загрузите div по часовой стрелке

Question

Искал много, но не смог найти удовлетворительное решение в любом месте. Моя цель - загрузить круговое изображение по часовой стрелке при загрузке страницы. Это изображение круговой диаграммы, и я хочу достичь этого, используя только jquery/css. Я пробовал использовать плагин circleProgress(). Идея, которую я использовал здесь, заключается в предварительной загрузке изображения и просто показе рабочей нагрузки окружения с прозрачным цветным концом.

Мой вопрос здесь в том, что есть более чистый способ сделать это?

Используя этот метод, он показывает небольшую границу исходного изображения, которая не является желаемым выходом. Обращаем внимание: НЕ Хотите, чтобы повернуть картинку, просто чтобы ее загрузить по часовой стрелке. Также это не фактическая круговая диаграмма, а только изображение круговой диаграммы. Поэтому я не использовал SVG. Любые предложения с использованием jquery animate() или что-то в этом роде будут очень полезны. Благодарю.

WORKING DEMO

Answer 1

Так вот что я сделал, потому что вам требуется изображение, чтобы быть на месте красного круга, мы оставляем нетронутыми. Однако нам придется обернуть круг/изображение с помощью оберточного элемента и полностью поместить два маскирующих элемента внутри, каждый из которых покрывает половину (левую или правую сторону) круга/изображения.

<div class="circle_wrapper"> 
    <div class="circle_red"></div> 
    <div class="mask_left"></div> 
    <div class="mask_right"></div> 
</div> 

И тогда мы можем просто использовать анимацию CSS3 для выполнения этой работы. Логика проста:

1. Создайте маскирующий элемент, который охватывает левую и правую руки. Они будут заполнять высоту, но только половину ширины. Скрыть переполнения.
2. Позиционируйте псевдоэлементы одинаковых размеров с каждой стороны. Для этого мы используем элемент ::before (или вы можете использовать ::after, это тоже не проблема).
3. Поверните их на 180 градусов, но в шахматном порядке (с правой стороны сначала, с левой стороны после). Хитрость заключается в том, чтобы состояние анимации было заморожено в своем конечном состоянии, поэтому не забудьте использовать animation-fill-mode: forwards.

Вы всегда можете использовать JS для переключения имени класса и запуска анимации, если вы не хотите, чтобы анимация отображалась сразу при загрузке страницы. Чтобы получить максимальную совместимость между браузерами, необходимо использовать префиксы поставщиков для объявлений animation и @keyframe.

Вот link to the fiddle, если вы хотите, чтобы он работал прямо сейчас. Если вы хотите увидеть его working with a sample image of a pie chart, у меня его тоже. Не забудьте установить изображение на display: block и определить его размеры. Если вы запутались точной механики, I have made a fork that makes the individual masks obvious :)

body { 
    padding-top: 100px; 
    text-align: center; 
    background-color:white; 
} 
.circle_wrapper { 
    position: relative; 
    width:200px; 
    height:200px; 
} 
.circle_red{ 
    background-color:red; 
    border-radius:50%; 
    width:200px; 
    height:200px; 
} 

/* Masks */ 
.circle_wrapper > div[class^='mask'] { 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
} 
.mask_left { 
    left: 0; 
    right: 50%; 
} 
.mask_right { 
    left: 50%; 
    right: 0; 
} 

/* Pseudo elements in masks */ 
.circle_wrapper > div[class^='mask']::before { 
    background-color: #fff; 
    content: ''; 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 
.mask_left::before { 
    animation: leftHalf 2s 0s 1 linear forwards; 
    transform-origin: 100% 50%; /* center right */ 
} 
.mask_right::before { 
    animation: rightHalf 2s 0s 1 linear forwards; 
    transform-origin: 0% 50%; /* center left */ 
} 


@keyframes leftHalf { 
    0% { transform: rotate(0deg); } 
    50% { transform: rotate(0deg); } 
    100% { transform: rotate(180deg); } 
} 
@keyframes rightHalf { 
    0% { transform: rotate(0deg); } 
    50% { transform: rotate(180deg); } 
    100% { transform: rotate(180deg); } 
} 

См скрипку здесь: http://jsfiddle.net/teddyrised/h1ud4421/20/