css+svg实现钟摆式导航菜单图标效果代码
代码语言：html
所属分类：菜单导航
代码描述：css+svg实现钟摆式导航菜单图标效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>
body
{
background-image: linear-gradient(to right top, #ebedec, #e3e7e6, #dbe1e0, #d3dadb, #ccd4d6);
height: 100vh;
}
.box1
{
height: 200px;
width: 200px;
background-image: linear-gradient(to right bottom, #fd4617, #ff6d12, #ff8d19, #ffaa2c, #ffc445);
border-radius: 50%;
border: 10px solid white;
overflow:hidden;
margin:auto;
box-shadow: 11px 11px 12px -9px rgba(27, 14, 0, 0.28);
}
.box2
{
height: 200px;
width: 200px;
background-image: linear-gradient(to right bottom, #fff05a, #ffde56, #ffcc55, #ffbb57, #ffaa5a);
box-shadow: 11px 11px 12px -9px rgba(27, 14, 0, 0.28);
border-radius: 50%;
border: 10px solid white;
overflow:hidden;
margin:auto;
}
.box3
{
height: 200px;
width: 200px;
background: #00b09b; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #96c93d, #00b09b); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #96c93d, #00b09b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
box-shadow: 11px 11px 12px -9px rgba(27, 14, 0, 0.28);
border-radius: 50%;
border: 10px solid white;
overflow:hidden;
margin:auto;
}
.box4
{
height: 200px;
width: 200px;
background-image: linear-gradient(to right bottom, #3da5d9, #2eb9e4, #29ccec, #38dff1, #54f2f2);
box-shadow: 11px 11px 12px -9px rgba(27, 14, 0, 0.28);
border-radius: 50%;
border: 10px solid white;
overflow:hidden;
margin:auto;
}
.box1-inner
{
background-color: #ffffff;
height: 120px;
width: 120px;
border-radius: 50%;
margin: 31px auto;
background-image: linear-gradient(to right bottom, #ffffff, #fffefe, #fbfbfb, #f1ecec, #d2d2d2);
box-shadow: 36px 27px 11px -5px rgba(27, 14, 0, 0.16);
border: 1px solid #e6e5e4;
transition:1s;
cursor:pointer;
animation: swing ease-in-out .3s infinite alternate;
transform-origin: top;
transform-box: fill-box;
left: calc(42% - .0rem);
}
.box1-inner:hover
{
box-shadow: -25px 50px 11px -5px rgba(27, 14, 0, 0.16);
transition:1s;
}
.icon-set
{
text-align: center;
width: 100%;
margin: auto;
padding-top: 24px;
float: left;
}
.text-heading
{
position: absolute;
top: 230%;
left: 22%;
}
.text-heading h3
{
text-transform: uppercase;
text-align: center;
font-size: 18px;
}
.text-heading p
{
text-transform: uppercase;
text-align: center;
font-size: 10px;
}
.color1 h3
{
color: #ff6a00;
}
.color2 h3
{
color: #ffbc00;
}
.color3 h3
{
color: #06af23;
}
.color4 h3
{
color: #06a7af;
}
.box1:after,.box2:after,.box3:after,.box4:after
{
content: '';
background-color: white;
height: 200px;
width: 5px;
position: absolute;
left: 50%;
box-shadow: 1px 3px 6px 1px rgba(0, 0, 0, 0.05);
z-index: -1;
}
.box1:before,.box2:before,.box3:before,.box4:before
{
content: '';
height: 15px;
width: 15px;
background-color: white;
position: absolute;
border-radius: 50%;
bottom: -8px;
left: 48.1%;
}
.small-box1
{
height: 50px;
width: 50px;
border-radius: 50%;
border: 2px solid white;
position: absolute;
bottom: -120%;
left: 41.7%;
box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.21);
animation: swing ease-in-out .3s infinite alternate;
transform-origin: top;
transform-box: fill-box;
left: calc(42% - .0rem);
}
.small-box1:after
{
content: '';
height: 10px;
width: 10px;
background-color: white;
border-radius: 50%;
position: absolute;
top: -7px;
left: 41.5%;
}
.small-box1 div
{
height: 30px;
width: 30px;
border-radius: 50%;
margin: auto;
margin-top: 8px;
box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.21);
}
.color1 div
{
background-image: linear-gradient(to right bottom, #fd4617, #ff6d12, #ff8d19, #ffaa2c, #ffc445);
}
.color2 div
{
background-image: linear-gradient(to right bottom, #fff05a, #ffde56, #ffcc55, #ffbb57, #ffaa5a);
}
.color3 div
{
background: #00b09b;
background: -webkit-linear-gradient(to right, #96c93d, #00b09b);
background: linear-gradient(to right, #96c93d, #00b09b);
}
.color4 div
{
background-image: linear-gradient(to right bottom, #3da5d9, #2eb9e4, #29ccec, #38dff1, #54f2f2);
}
.circle1
{
height: 10px;
width: 10px;
position: absolute;
background-color: white;
border-radius: 50%;
right: 5%;
top: 50%;
border: 1px solid #cecbcb;
box-shadow: 5px 5px 7px 1px rgba(0, 0, 0, 0.12);
}
.circle2
{
height: 20px;
width: 20px;
position: absolute;
background-color: white;
border-radius: 50%;
right: -4%;
top: 58%;
border: 1px solid #cecbcb;
box-shadow: 5px 5px 7px 1px rgba(0, 0, 0, 0.12);
}
.circle3
{
height: 10px;
width: 10px;
position: absolute;
background-color: white;
border-radius: 50%;
right: -10%;
top: 50%;
border: 1px solid #cecbcb;
box-shadow: 5px 5px 7px 1px rgba(0, 0, 0, 0.12);
}
/*************swing************/
@keyframes swing {
0% { transform: rotate(8deg); }
100% { transform: rotate(-8deg); }
}
/*************responsive**************/
@media only screen and (max-width: 1024px)
{
.box1:after, .box2:after, .box3:after, .box4:after
{
height: 172px;
}
.small-box1:after
{
left: 29.5%;
}
.small-box1
{
left: calc(40% - .0rem);
}
.box1 {
height: 150px;
width: 150px;
}
.box2 {
height: 150px;
width: 150px;
}
.box3 {
height: 150px;
width: 150px;
}
.box4 {
height: 150px;
width: 150px;
}
.box1-inner
{
height: 100px;
width: 100px;
margin: 14px auto;
}
svg
{
width:60%;
}
.icon-set
{
padding-top: 10px;
}
.small-box1
{
bottom: -142%;
}
.text-heading
{
top: 251%;
}
}
@media only screen and (max-width: 768px)
{
.small-box1
{
left: calc(37% - .0rem);
bottom: -144%;
}
.box1 {
height: 120px;
width: 120px;
}
.box2 {
height: 120px;
width: 120px;
}
.box3 {
height: 120px;
width: 120px;
}
.box4 {
height: 120px;
width: 120px;
}
.box1-inner
{
height: 70px;
width: 70px;
margin: 14px auto;
}
svg
{
width:50%;
}
.icon-set
{
padding-top: 0px;
}
.text-heading h3
{
font-size: 14px;
}
.box1:after, .box2:after, .box3:after, .box4:after
{
height: 140px;
}
.text-heading p
{
font-size: 8px;
}
.text-heading
{
top: 251%;
}
}
@media only screen and (max-width: 425px)
{
.box
{
height: 300px;
margin-bottom: 30px;
}
.small-box1
{
left: calc(44% - .0rem);
bottom: 15%;
}
.box1:before, .box2:before, .box3:before, .box4:before
{
bottom: 145px;
left: 48.8%;
}
.box1 {
height: 150px;
width: 150px;
}
.box2 {
height: 150px;
width: 150px;
}
.box3 {
height: 150px;
width: 150px;
}
.box4 {
height: 150px;
width: 150px;
}
.box1-inner
{
height: 80px;
width: 80px;
margin: 26px auto;
}
svg
{
width:60%;
}
.icon-set
{
padding-top: 0px;
}
.text-heading h3
{
font-size: 14px;
}
.box1:after, .box2:after, .box3:after, .box4:after
{
height: 60px;
}
.text-heading p
{
font-size: 8px;
}
.text-heading {
top: 88%;
left: 35%;
}
.circle1
{
right: 25%;
}
.circle2
{
right: 16%;
}
.circle3
{
right: 9%;
}
}
@media only screen and (max-width: 425px)
{
.box1:before, .box2:before, .box3:before, .box4:before
{
left: 48.7%;
}
.small-box1:after
{
left: 37%;
}
}
@media only screen and (max-width: 425px)
{
@media only screen and (max-width: 425px)
{
body
{
height: 903vh;
}
.text-heading {
left: 30%;
}
.small-box1 {
left: calc(43.8% - .0rem);
}
}
</style>
</head>
<body>
<div>
<div class="container">
<div class="row mt-5">
<div class="col-sm-3 col-md-3 box">
<div class="box1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="box1-inner">
<span class="icon-set i1">
<a href="" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="80" height="80"
viewBox="0 0 172 172"
style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#ff6a00"><path d="M101.05,17.2c-4.72427,0 -8.6,3.87573 -8.6,8.6v34.4c0,4.72427 3.87573,8.6 8.6,8.6h10.75v13.79023l13.79023,-13.79023h31.35977c4.72427,0 8.6,-3.87573 8.6,-8.6v-34.4c0,-4.72427 -3.87573,-8.6 -8.6,-8.6zM101.05,21.5h55.9c2.40083,0 4.3,1.89917 4.3,4.3v34.4c0,2.40083 -1.89917,4.3 -4.3,4.3h-33.14023l-7.70977,7.70977v-7.70977h-15.05c-2.40083,0 -4.3,-1.89917 -4.3,-4.3v-34.4c0,-2.40083 1.89917,-4.3 4.3,-4.3zM19.35,27.95c-2.35009,0 -4.3,1.94991 -4.3,4.3v86c0,2.35009 1.94991,4.3 4.3,4.3h49.45v8.6h-6.45c-4.72427,0 -8.6,3.87573 -8.6,8.6v4.3h64.5v-4.3c0,-4.72427 -3.87573,-8.6 -8.6,-8.6h-6.45v-8.6h49.45c2.35009,0 4.3,-1.94991 4.3,-4.3v-43h-4.3v43h-49.45h-34.4h-49.45v-86h66.65v-4.3zM111.8,38.7c-2.37482,0 -4.3,1.92518 -4.3,4.3c0,2.37482 1.92518,4.3 4.3,4.3c2.37482,0 4.3,-1.92518 4.3,-4.3c0,-2.37482 -1.92518,-4.3 -4.3,-4.3zM129,38.7c-2.37482,0 -4.3,1.92518 -4.3,4.3c0,2.37482 1.92518,4.3 4.3,4.3c2.37482,0 4.3,-1.92518 4.3,-4.3c0,-2.37482 -1.92518,-4.3 -4.3,-4.3zM146.2,38.7c-2.37482,0 -4.3,1.92518 -4.3,4.3c0,2.37482 1.92518,4.3 4.3,4.3c2.37482,0 4.3,-1.92518 4.3,-4.3c0,-2.37482 -1.92518,-4.3 -4.3,-4.3zM25.8,105.35c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM34.4,105.35c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM43,105.35c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM51.6,105.35c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM60.2,105.35c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM68.8,105.35c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM77.4,105.35c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM86,105.35c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM94.6,105.35c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM103.2,105.35c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM111.8,105.35c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM120.4,105.35c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM129,105.35c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM137.6,105.35c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM146.2,105.35c-1.18741,0 -2.15,0.96259 -2.15,2.15c0,1.18741 0.96259,2.15 2.15,2.15c1.18741,0 2.15,-0.96259 2.15,-2.15c0,-1.18741 -0.96259,-2.15 -2.15,-2.15zM73.1,122.55h25.8v8.6h-25.8zM62.35,135.45h47.3c2.40083,0 4.3,1.89917 4.3,4.3h-55.9c0,-2.40083 1.89917,-4.3 4.3,-4.3z"></path></g&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0