css绘制usb插口接口效果代码-html代码-BFW代码库

css绘制usb插口接口效果代码

代码语言：html

代码描述：css绘制usb插口接口效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
body {
	background:#363636
}
.container {
	cursor:pointer;
	z-index:2;
	position:absolute;
	width:284px;
	height:344px;
	margin-left:-142px
}
.container:hover {
	animation-play-state:paused
}
.container:nth-child(1) {
	top:-90px;
	left:25%;
	transform:scale(0.25) rotate(180deg);
	animation:extend 1s linear infinite alternate
}
.container:nth-child(2) {
	left:50%;
	transform:scale(0.3) rotate(180deg);
	top:-70px;
	animation:extend 1s .5s linear infinite alternate
}
.container:nth-child(3) {
	left:75%;
	transform:scale(0.35) rotate(180deg);
	top:-50px;
	animation:extend 1s .75s linear infinite alternate
}
.usb {
	position:relative;
	width:100%;
	height:100%;
	background:linear-gradient(to bottom,rgba(241,241,241,0.8) 0,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%) no-repeat 50% 5%,linear-gradient(0deg,#fff 0,#fff 100%) no-repeat 0 0;
	background-size:70.422535211267605633802816901408% 23.255813953488372093023255813953%,100% 100%;
	border-bottom-left-radius:24%;
	border-bottom-right-radius:24%;
	box-shadow:0 0 .625em .125em #ababab inset,0 -0.438em .250em .500em #8b8b8b inset,0 -0.625em 2.188em .938em #8b8b8b inset
}
.usb:after {
	z-index:-1;
	content:"";
	width:80.98591549295774647887323943662%;
	height:72.674418604651162790697674418605%;
	top:-65.697674418604651162790697674419%;
	left:50%;
	margin-left:-40.49295774647887323943661971831%;
	position:absolute;
	border-top-left-radius:2%;
	border-top-right-radius:2%;
	background:linear-gradient(0deg,rgba(255,255,255,0.6) 0,rgba(255,255,255,0.4) 100%) no-repeat 18% 55.6%,linear-gradient(0deg,rgba(255,255,255,0.6) 0,rgba(255,255,255,0.4) 100%) no-repeat 82.5% 55.6%,linear-gradient(0deg,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.4) 100%) no-repeat 18% 38%,linear-gradient(0deg,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.4) 100%) no-repeat 82.5% 38%,linear-gradient(to bottom,rgba(32,32,32,1) 0,rgba(152,152,152,1) 100%) no-repeat 15.5% 46.5%,linear-gradient(to bottom,rgba(61,61,61,1) 0,rgba(222,222,222,1) 100%) no-repeat 28.5% 46.5%,linear-gradient(to bottom,rgba(61,61,61,1) 0,rgba(222,222,222,1) 100%) no-repeat 72% 46.5%,linear-gradient(to bottom,rgba(32,32,32,1) 0,rgba(152.........完整代码请登录后点击上方下载按钮下载查看