纯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>
<pa.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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