PHP中文网-QQ群-扫二维码

QQ群

PHP中文网-关注微信公众号-扫二维码

微信公众号

当前位置:php中文网下载站 >js特效 >html5特效 >CSS3创意圆形线条旋涡动画特效

CSS3创意圆形线条旋涡动画特效

2018-05-07 来源/作者:php中文网 分类:html5特效 «» 下载次数:2
CSS3创意圆形线条旋涡动画特效

代码:

body {

width: 100vw;
height: 100vh;
overflow: hidden;
  background-color: #223;
}

.wrapper {
position: absolute;
display: block;

width: 500px;
height: 500px;
margin: calc(50vh - 250px) calc(50vw - 250px);
  transition:2s ease;
  cursor: pointer;
}

.wrapper:hover {
  transform: scale(1.2);
}

.arc:before, .arc:after {
display: block;
position: absolute;
width: 100%;
height: 100%;
border: 4px solid #000;
top: -4px;
left: -4px;
border-color: hsl(160, 70%, 50%) transparent transparent transparent;
border-radius: 50%;

z-index: -8;
content: "";
}


申明:PHP中文网下载站匠心打造中国最大的免费下载站!一切资源免费,所有资源都经过检测,请放心下载!

效果预览本地下载  新手使用求助QQ群: