纯css实现不规则hover形状效果
代码语言：html
所属分类：悬停
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>
body
{
background-color: #ebf5fc;
font-family: 'Rajdhani', sans-serif;
}
.box-container
{
padding-top: 20px;
padding-bottom: 20px;
border-radius: 6px;
background: #ebf5fc;
box-shadow: -2px -2px 5px white, 3px 3px 5px rgba(0, 0, 0, 0.1);
border: 1px solid #c3f9f3;
}
.box-container:hover {
box-shadow: inset -2px -2px 5px white, inset 3px 3px 5px rgba(0, 0, 0, 0.1);
}
.
{
-webkit-animation: rotate-center 4s linear infinite both;
animation: rotate-center 4s linear infinite both;
}
.icon-set-box
{
margin: auto;
text-align: center;
border: 1px solid #cac8c8;
padding: 15px;
border-radius: 50%;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.5098039215686274);
box-shadow: inset -2px -2px 5px white, inset 3px 3px 5px rgba(0, 0, 0, 0.1);
}
.box-container .heading-main
{
text-align: center;
text-transform: uppercase;
padding-top: 20px;
padding-bottom: 20px;
letter-spacing: 3px;
font-weight: bold;
color: #6b6aa0;
font-size: 18px;
}
.box-container .subheading-box
{
text-align: center;
font-size: 18px;
color: #635f82;
}
.heading-name
{
color: #99a9b5;
text-transform: uppercase;
font-size: 18px;
}
.capsule
{
border: 1px solid #dfe5e8;
border-top-left-radius: 55px;
border-top-right-radius: 55px;
border-bottom-right-radius: 55px;
border-bottom-left-radius: 55px;
}
.tag
{
border-top-left-radius: 500px;
border-top-right-radius: 500px;
}
.NAUTILUS
{
border-top-left-radius: 500px;
border-top-right-radius: 500px;
border-bottom-right-radius: 500px;
border-bottom-left-radius: 500px;
}
/**
* ----------------------------------------
* animation rotate-center
* ----------------------------------------
*/
@-webkit-keyframes rotate-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body translate="no">
<div class="container">
<div class="row mt-5 mb-5">
<div class="col-md-3 col-sm-3">
<div class="col-md-12 text-center mb-4">
<span class="heading-name">Box</span>
</div>
<div class="box-container">
<div class="col-md-12">
<div class="icon-set-box">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g id="Rfan1">
<path id="fan1" style="fill:#EEEEEE;" d="M226.425,157.47c0-1.411,0.105-2.797,0.294-4.157L65.313,128.649
c-4.184,27.312,34.645,55.904,86.727,63.863c34.703,5.303,66.528,0.104,85.145-12.033
C230.609,174.973,226.425,166.711,226.425,157.47z" />
<path id="fan2" style="fill:#EEEEEE;" d="M275.533,134.255L383.844,17.92c-20.261-18.814-65.77-2.827-101.648,35.709
c-23.662,25.415-37.217,54.287-37.897,76.401c3.725-1.652,7.844-2.577,12.182-2.577
C263.713,127.453,270.347,130.005,275.533,134.255z" />
<path style="fill:#EEEEEE;" d="M286.148,162.281c-1.827,11.318-9.985,20.52-20.734,23.857L324.84,334.37
c25.684-10.27,30.629-58.195,11.046-107.045C323.682,196.886,304.835,173.274,286.148,162.281z" />
</g>
<ellipse style="fill:#69CAEE;" cx="256.48" cy="157.47" rx="30.06" ry="30.02" />
<path style="fill:#CBC2BA;" d="M265.414,186.139c0.088-0.027-5.726,1.348-8.933,1.348c-7.699,0-14.72-2.895-20.038-7.649v274.479
c6.842,0.887,13.27,2.102,17.477,3.606c5.874-4.398,13.71-8.256,22.598-11.458V213.838L265.414,186.139z" />
<path d="M461.906,491.768c0,0-21.547,0-21.555,0c-3.808-0.052-6.383-9.115-7.85-11.858c-9.805-18.338-27.808-33.362-46.267-42.482
c-15.169-7.494-31.88-11.287-49.673-11.287h-0.07c-16.757,0.012-33.776,2.39-49.953,6.746V265.749c0,0,28.909,72.11,29.001,72.34
c1.968,4.908,8.1,7.541,13.025,5.57c16.047-6.416,26.254-23.22,28.741-47.318c2.249-21.801-2.054-47.632-12.118-72.735
c-11.499-28.685-29.395-53.029-48.643-66.515c-0.08-8.473-2.814-16.314-7.405-22.755L391.181,24.733
c3.768-4.047,3.537-10.378-0.515-14.141c-12.659-11.754-32.233-13.801-55.115-5.763c-20.702,7.273-42.256,22.183-60.693,41.987
c-22.773,24.461-37.448,52.806-40.145,77.075c-6.739,4.372-12.079,10.713-15.212,18.198l-152.673-23.33
c-5.475-0.841-10.582,2.915-11.419,8.377c-2.615,17.064,6.698,34.38,26.221,48.756c17.663,13.006,42.13,22.422,68.894,26.511
c25.014,3.822,51.959,3.374,75.9-5.529c0,0,0,246.356-0.001,246.356c-20.211-1.596-40.432,0.201-59.351,7.857
c-20.093,8.131-38.251,22.69-50.044,40.903H10.019C4.498,491.989,0,496.48,0,501.994C0,507.517,4.498,512,10.019,512H122.74
c3.767,0,7.284-2.171,8.977-5.543c14.531-28.94,49.698-43.845,80.621-43.845h0.07c17.467,0,33.706,2.474,49.663,9.642
c13.197,5.928,27.235,12.319,38.373,21.712c4.069,3.432,10.545,3.039,14.119-1.188c3.57-4.221,3.038-10.534-1.189-14.1
c-9.599-8.096-24.509-15.983-36.51-21.65c5.113-2.006,10.781-3.822,16.707-5.312c27.259-6.968,57.915-9.066,83.797,3.652
c19.81,9.746,35.41,27.158,45.539,46.506c2.546,4.864,4.688,9.906,11.107,9.906h27.893c5.52,0,10.019-4.492,10.019-10.006
C471.925,496.261,467.426,491.768,461.906,491.768z M153.556,182.622c-23.615-3.608-44.935-11.719-60.033-22.837
c-8.389-6.176-14.142-12.845-16.805-19.271l139.932,21.383c0.605,5.457,2.319,10.685,5.007,15.389
C204.068,184.462,179.167,186.535,153.556,182.622z M266.5,439.628c-5.386,2.264-10.173,4.721-14.323,7.353
c-1.736-0.434-3.642-0.844-5.715-1.23V196.224c4.087,1.053,8.398,1.441,12.651,1.167c0.006,0,0.016,0.006,0.022,0.005l7.365,18.37
V439.628z M290.866,177.965c13.925,11.884,26.819,30.881,35.718,53.079c8.88,22.149,12.711,44.61,10.788,63.246
c-1.068,10.354-3.899,18.69-8.089,24.245l-51.091-127.443C283.361,187.737,287.705,183.225,290.866,177.965z M289.534,60.442
c16.267-17.473,34.971-30.519,52.667-36.736c9.831-3.455,18.59-4.453,25.406-3.042l-93.78,100.73
c-5.38-2.577-11.316-3.948-17.345-3.948c-0.101,0-0.202,0-0.303,0.001C260.618,99.38,272.638,78.589,289.534,60.442z
M256.481,137.458c11.049,0,20.038,8.977,20.038,20.011c0,11.035-8.989,20.011-20.038,20.011c-11.049,0-20.038-8.977-20.038-20.011
S245.432,137.458,256.481,137.458z" />
<path d="" />
<path d="M501.971,491.768c-5.52,0-10.009,4.493-10.009,10.006c0,5.514,4.488,10.006,10.009,10.006
c5.53,0,10.029-4.492,10.029-10.006C512,496.261,507.501,491.768,501.971,491.768z" />
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</div>
</div>
<div class="col-md-12">
<p class="heading-main">
DOLOR AMET LOREM IPSUM SIT
</p>
</div>
<div class="col-md-12">
<p class="subheading-box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
</div>
<div class="col-md-12 text-center">
<button type="button" class="btn btn-primary">Read More</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="col-md-12 text-center mb-4">
<span class="heading-name">CAPSULE</span>
</div>
<div class="box-container capsule">
<div class="col-md-12">
<div class="icon-set-box">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
<g>
<ellipse style="fill:#EEEEEE;" cx="254.75" cy="215.79" rx="40.04" ry="40.05" />
<path style="fill:#EEEEEE;" d="M294.789,358.945c0-22.163-17.926-40.129-40.04-40.129s-40.04,17.966-40.04,40.129v42.804h80.079
v-42.804H294.789z" />
</g>
<path style="fill:#69CAEE;" d="M258.921,11.199c-11.973,11.975-21.336,25.572-28.093,40.082l187.087,187.123
c14.508-6.759,28.101-16.123,40.074-28.098L258.921,11.199z" />
<rect x="129.28" y="451.87" style="fill:#75706B;" width="250.93" height="50.12" />
<rect x="158.23" y="401.75" style="fill:#00ADEE;" width="193.04" height="50.12" />
<circle style="fill:#EEEEEE;" cx="436.92" cy="30.04" r="20.02" />
<path style="fill:#00ADEE;" d="M230.828,51.281c-19.111,41.037-17.35,89.383,5.253,129.083c5.575-2.945,11.924-4.619,18.667-4.619
c22.113,0,40.04,17.93,40.04,40.047c0,6.567-1.59,12.759-4.392,18.228c39.398,21.784,87.019,23.252,127.518,4.384L230.828,51.281z" />
<path style="fill:#75706B;" d="M254.749,318.816c7.296,0,14.129,1.965,20.02,5.382v-73.73c-5.891,3.41-12.724,5.371-20.02,5.371
s-14.129-1.961-20.02-5.371v73.73C240.62,320.781,247.454,318.816,254.749,318.816z" />
<path d="M465.068,203.226l-93.01-93.028l51.278-53.388c4.082,2.079,8.694,3.26,13.58,3.26c16.558,0,30.03-13.474,30.03-30.036
S453.475,0,436.916,0c-16.558,0-30.03,13.474-30.03,30.036c0,4.367,0.945,8.516,2.628,12.263l-51.615,53.738L266,4.12
c-3.91-3.91-10.246-3.91-14.157,0c-12.539,12.542-22.662,26.987-30.088,42.934c-0.004,0.008-0.007,0.017-0.011,0.026
c-19.268,41.395-18.648,89.329,1.299,130.028c-11.188,9.185-18.343,23.11-18.343,38.684c0,16.34,7.873,30.866,20.02,40.005v63.074
c-12.145,9.156-20.02,23.707-20.02,40.073v32.792h-46.472c-5.528,0-10.01,4.482-10.01,10.012v40.108h-18.933
c-5.528,0-10.01,4.482-10.01,10.012v40.111H54.01c-5.526,0-10.01,4.485-10.01,10.002c0,5.527,4.484,10.012,10.01,10.012h184.917
c0,0.002,0.001,0.004,0.001,0.006l165.419-0.006c5.525,0,10.01-4.485,10.01-10.012c0-5.517-4.485-10.002-10.01-10.002h-14.124
v-40.111c0-5.529-4.482-10.012-10.01-10.012H361.28v-40.108c0-5.529-4.482-10.012-10.01-10.012h-46.472v-32.792
c0-16.367-7.873-30.92-20.02-40.076v-63.076c3.368-2.535,6.39-5.498,9.022-8.786c20.364,9.662,42.508,14.528,64.692,14.527
c21.731,0,43.499-4.667,63.649-14.054c0.002-0.001,0.005-0.003,0.007-0.004c15.942-7.427,30.381-17.551,42.919-30.09
C468.977,213.476,468.977,207.136,465.068,203.226z M436.916,20.024c5.519,0,10.01,4.491,10.01,10.012s-4.491,10.012-10.01,10.012
s-10.01-4.491-10.01-10.012S431.397,20.024,436.916,20.024z M224.719,358.945c0-16.607,13.471-30.117,30.03-30.117
s30.03,13.511,30.03,30.117v32.792h-60.06V358.945z M244.739,309.819v-44.981c6.565,1.341,13.455,1.341,20.02,0v44.981
c-3.283-0.672-6.636-1.015-10.01-1.015C251.376,308.804,248.022,309.147,244.739,309.819z M370.204,461.881v30.096H139.295v-30.096
H370.204z M341.261,411.761v30.096H168.238v-30.096H341.261z M254.749,245.828c-16.558,0-30.03-13.474-30.03-30.036
s13.471-30.036,30.03-30.036s30.03,13.474,30.03,30.036S271.308,245.828,254.749,245.828z M302.965,229.197
c1.209-4.356,1.834-8.879,1.834-13.405c0-27.603-22.452-50.059-50.05-50.059c-4.741,0-9.468,0.682-14.005,2.003
c-14.911-30.796-17.107-66.312-6.263-98.643l165.622,165.655C368.346,245.386,333.389,243.448,302.965,229.197z M419.9,226.231
L243,49.296c4.5-8.454,9.917-16.374,16.187-23.671l184.38,184.415C436.272,216.312,428.353,221.73,419.9,226.231z" />
<path d="M254.749,205.431c-2.632,0-5.215,1.071-7.077,2.934c-1.862,1.862-2.933,4.445-2.933,7.078s1.07,5.216,2.933,7.078
c1.862,1.863,4.434,2.934,7.077,2.934c2.632,0,5.215-1.071,7.076-2.934c1.862-1.862,2.934-4.445,2.934-7.078
s-1.071-5.216-2.934-7.078C259.964,206.502,257.382,205.431,254.749,205.431z" />
<path d="M444.387,491.98c-5.516,0-10,4.485-10,10.002c0,5.527,4.484,10.012,10,10.012c5.525,0,10.01-4.485,10.01-10.012
C454.397,496.466,449.912,491.98,444.387,491.98z" />
<path d="M254.749,350.603c-2.632,0-5.215,1.071-7.077,2.934c-1.862,1.862-2.933,4.445-2.933,7.078c0,2.643,1.07,5.216,2.933,7.078
c1.862,1.863,4.445,2.934,7.077,2.934s5.215-1.071,7.076-2.934c1.862-1.862,2.934-4.435,2.934-7.078
c0-2.633-1.071-5.216-2.934-7.078C259.964,351.674,257.382,350.603,254.749,350.603z" />
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</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