SVG和CSS实现小风扇

最新推荐文章于 2024-05-14 15:53:45 发布

鲨鱼虾啦啦

最新推荐文章于 2024-05-14 15:53:45 发布

阅读量372

点赞数

分类专栏： CSS SVG 文章标签： css3 svg

本文链接：https://blog.csdn.net/u010763322/article/details/119807233

版权

CSS 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

SVG

1 篇文章 0 订阅

订阅专栏

HTML:

<div class="circleBox">
    <div class="circleInner">
	    <svg class="cir1" xmlns="http://www.w3.org/2000/svg" version="1.1">
	        <path d="M80 80 L50 7 L110 7 Z" fill="#0a763d" />
	        <path d="M50 7 S80 -7 110 7" fill="#0a763d"/>
	    </svg>
	    <svg class="cir2" xmlns="http://www.w3.org/2000/svg" version="1.1">
	    	<path d="M80 80 L50 7 L110 7 Z" fill="#0a763d" />
	        <path d="M50 7 S80 -7 110 7" fill="#0a763d"/>
	    </svg>
	    <svg class="cir3" xmlns="http://www.w3.org/666/svg" version="1.1">
		    <path d="M80 80 L50 7 L110 7 Z" fill="#0a763d" />
	        <path d="M50 7 S80 -7 110 7" fill="#0a763d"/>
	     </svg>
	</div>
</div>

CSS:

.circleBox{
    margin: 0 650px;
    position: relative;
    width: 170px;
    height: 270px;
    overflow:hidden;
}
.circleInner{
    width: 160px;
    height: 160px;
    background: #2b8555;
    position: relative;
    border-radius: 50%;
    border: 5px solid #0a763d;
    animation: aa 0.3s infinite linear;
}
.circleBox::before{
    content: '';
    display: block;
    position: absolute;
    top: 150px;
    left: 70px;
    width: 30px;
    height: 150px;
    background: #0a763d;
    z-index: -1;
}
@keyframes aa{
	0 { transform: rotate(0deg)}
	50% { transform: rotate(180deg)}
	100% { transform: rotate(360deg)}
}
.cir1, .cir2, .cir3{
	position:absolute;
	top:0;
	left:0;
}
.cir2{transform: rotate(120deg); transform-origin: 80px 80px}
.cir3{transform: rotate(240deg); transform-origin: 80px 80px}