css动画模拟充电效果

css动画模拟充电效果

动画效果

二代码实现

		 <div class="circle1">
        	<div class="cover"></div>
		 </div>
 		.circle1{
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: rgba(109, 151, 230,0.8);
            margin: 100px auto;
            border: 3px solid rgb(226, 212, 133);
            position: relative;
            overflow: hidden;
        }
        .cover{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rosybrown;
            z-index: 1;
        }
        .cover::before{
            content: "";
            width: 230px;
            height: 230px;
            position: absolute;
            background-color: rgba(245, 243, 243, 0.904);
            border-radius: 40% 30%;
            left: -50%;
            animation: coverBefore 9s linear infinite;
        }
        .cover::after{
            content: "";
            width: 230px;
            height: 230px;
            position: absolute;
            background-color: rgba(245, 243, 243, 0.904);
            border-radius: 44% 40%;
            left: -50%;
            animation: coverAfter 9s linear infinite;
        }
        @keyframes coverBefore {
            0%{
                transform: rotate(0deg) ;
                bottom: 60%;
            }
            100%{
                transform: rotate(360deg);
                bottom: 105%;
            }
        }
        @keyframes coverAfter {
            0%{
                transform: rotate(30deg) ;
                bottom: 60%;
            }
            100%{
                transform: rotate(360deg);
                bottom: 105%;
            }
        }

总结

• 通过::before和::after可以实现很多动画效果。
• 使用时将伪类样式中content属性设置为“”
• 使用定位父绝子相