問題
画像上の形状から波打つ/放射する2つのリングがある特定のアニメーションを取得しようとしています。私はその正確なアニメーションを完全に見つけることができません
Codepen Link
これは私が考えていることです それは大雑把な図ですが、それはあなたにアイデアを与えます。円全体ではなく、葉の円の周りにコードペンと同じように波打つリングが必要です。ホバーするとアニメーションが停止し、円がテキスト内で拡大します。
コード
[〜#〜] html [〜#〜]
<div id="tree-wrapper">
<img class="tree" <div><img class="tree" title="source: imgur.com" src="http://i.imgur.com/1dDCOyq.png" alt="" />
<div class="ripple"></div>
<div class="circle-top-left" unselectable="yes" onselectstart="return false;">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para"><u>Training</u><br />Personal, Corporate
</p>
<span></span>
</div>
</div>
</div>
</a>
<div class="circle-top-right" unselectable="yes" onselectstart="return false;">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para"><u>Consulting</u><br />Project, Organization
</p>
<span></span>
</div>
</div>
</div>
</a>
<div class="circle-bot-right" unselectable="yes" onselectstart="return false;">
<a class href="http://veddma.net/our-services/accreditation">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para"><u>Accreditation</u><br />Professional Management Architects
</p>
<span></span>
</div>
</div>
</div>
</a>
<div class="circle-bot-left" unselectable="yes" onselectstart="return false;">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para"><u>Tools</u><br />
</p>
<span></span>
</div>
</div>
</div>
</a>
</div>
[〜#〜] css [〜#〜]
* {
box-sizing: border-box;
}
#tree-wrapper{
position: relative;
width: 668px;
height: 551px;
margin: 0 auto;
}
#tree-wrapper p{
margin: 0;
padding: 0;
}
.tree {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
margin-top: 75px;
}
.circle-top-left,
.circle-top-right,
.circle-bot-left,
.circle-bot-right {
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
font-size: 9px;
-webkit-backface-visibility: hidden;
position: absolute;
background: #b20312;
width: 58px;
height: 58px;
border-radius: 50%;
transition: all .5s ease-in-out;
margin: 0;
text-align: center;
}
.circle-top-left:hover,
.circle-top-right:hover,
.circle-bot-left:hover,
.circle-bot-right:hover {
width: 200px;
height: 200px;
padding: 0.6em 2.5em;
color: transparent;
}
.circle-top-left {
top: 23.9%;
left: 11.2%;
}
.circle-top-right {
top: 13%;
left: 54.5%;
}
.circle-bot-left {
top: 73.8%;
left: 0;
}
.circle-bot-right {
top: 53.5%;
left: 91.2%;
}
.circle-top-left:hover,
.circle-top-right:hover,
.circle-bot-left:hover,
.circle-bot-right:hover {
transform: translate(-60px, -60px);
}
.circle__wrapper {
display: table;
width: 100%;
height: 100%;
}
.title_subtitle_holder {
display: block;
padding: 30px 0 0;
position: relative;
}
.circle__content {
display: table-cell;
padding: 1em;
vertical-align: middle;
}
.para {
line-height: 25px;
display: none;
font-size: 15px;
color: white;
text-align: center;
vertical-align: middle;
}
.circle-top-right:hover .para,
.circle-bot-right:hover .para,
.circle-top-left:hover .para,
.circle-bot-left:hover .para {
display: block;
}
.circle-top-right:hover span,
.circle-bot-right:hover span,
.circle-top-left:hover span,
.circle-bot-left:hover span {
display: none;
}
/*@import url(http://fonts.googleapis.com/css?family=Norican);*/
@-webkit-keyframes rip
{
/* 0% {
box-shadow:0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent;
}*/
/* 5% {
box-shadow:0 0 0 0 #45c2c5,
0 0 0 0 rgba(255,255,255,0.5),
0 0 0 0 #45c2c5,
0 0 0 0 rgba(0,0,0,0.1);
}*/
50% {
box-shadow:0 0 40px 100px rgba(178,3,18, 0.5),
0 0 10px 110px transparent,
0 0 30px 120px rgba(178,3,18, 0.5),
0 0 5px 130px transparent;
}
75% {
box-shadow:0 0 40px 200px rgba(178,3,18, 0.1);
}
100% {
box-shadow:0 0 40px 250px transparent;
}
}
@-moz-keyframes rip
{
/* 0% {
box-shadow:0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent;
}*/
/* 5% {
box-shadow:0 0 0 0 #b20312,
0 0 0 0 rgba(255,255,255,0.5),
0 0 0 0 #b20312,
0 0 0 0 rgba(0,0,0,0.1);
}*/
/* 50% {
box-shadow:0 0 40px 100px rgba(178,3,18, 0.5),
0 0 10px 110px transparent,
0 0 30px 120px rgba(178,3,18, 0.5),
0 0 5px 130px transparent;
}
75% {
box-shadow:0 0 40px 250px rgba(178,3,18, 0.5);
}
100% {
box-shadow:0 0 40px 250px transparent;
}*/
}
@-moz-keyframes rip-lg
{
/* 0% {
box-shadow:0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent,
0 0 0 0 transparent;
}
5% {
box-shadow:0 0 0 0 #b20312,
0 0 0 0 rgba(255,255,255,0.5),
0 0 0 0 #b20312,
0 0 0 0 rgba(0,0,0,0.1);
}*/
50% {
box-shadow:0 0 240px 200px rgba(178,3,18, 0.5),
0 0 210px 210px transparent,
}
/* 75% {
box-shadow:0 0 40px 250px rgba(178,3,18, 0.1);
}
100% {
box-shadow:0 0 40px 250px transparent;
}*/
}
.ripple {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
}
h1 {
/*display:block;*/
/*font-size:50px;
font-family: 'Norican', cursive;*/
/*color: white;*/
/*background-image: radial-gradient(10px at 47px 50% , #b20312 0%, #b20312 50%, rgba(178,3,18, 0) 50px);*/
/*background-color: #45C2C5;*/
/*background-color:#fa0;*/
/*border-radius: 50%;*/
/*box-shadow:3px 5px 0 rgba(0,0,0,0.15);*/
/*position: absolute;*/
/* margin:-20px 0 0 -20px;*/
/* text-shadow:0 2px 0 #8ed2d4,2px 3px 15px rgba(0,0,0,0.5);*/
/* transition: all 5s ease-in-out;*/
}
html:hover h1 {
/*transform: translateY(-200px);*/
}
.ripple,.ripple:before,.ripple:after {
display:block;
border-radius:2px;
width:2px;
height:2px;
-webkit-animation:rip 4s infinite;
-moz-animation:rip 2s infinite;
}
.ripple {
position:absolute;
z-index:-1;
top: 28%;
left: 15%;
}
.ripple:before,.ripple:after {
content:'';
position:absolute;
}
.ripple:before {-webkit-animation-delay: 4s;-moz-animation-delay: 2s;}
.ripple:after {-webkit-animation-delay:.8s;-moz-animation-delay:.8s;}
使用しようとしているようにanimation
を使用できますが、box-shadow
および:before
疑似要素で:after
を使用する代わりに、単純なborder
を使用します。 。
以下は簡単な例です。円にカーソルを合わせると停止します。 (すべての接頭辞付きプロパティが-webkit-
などであるとは限らないことに注意してください)
.circle {
height:100px;
width:100px;
border-radius:50%;
background-color:red;
position:relative;
top:100px;
left:300px;
-webkit-transition:height .25s ease, width .25s ease;
transition:height .25s ease, width .25s ease;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
.circle:hover{
height:150px;
width:150px;
}
.circle:before,
.circle:after {
content:'';
display:block;
position:absolute;
top:0; right:0; bottom:0; left:0;
border-radius:50%;
border:1px solid red;
}
.circle:before {
-webkit-animation: ripple 2s linear infinite;
animation: ripple 2s linear infinite;
}
.circle:after {
-webkit-animation: ripple 2s linear 1s infinite;
animation: ripple 2s linear 1s infinite;
}
.circle:hover:before,
.circle:hover:after {
-webkit-animation: none;
animation: none;
}
@-webkit-keyframes ripple{
0% {-webkit-transform:scale(1); }
75% {-webkit-transform:scale(1.75); opacity:1;}
100% {-webkit-transform:scale(2); opacity:0;}
}
@keyframes ripple{
0% {transform:scale(1); }
75% {transform:scale(1.75); opacity:1;}
100% {transform:scale(2); opacity:0;}
}
<div class="circle"></div>
使用できます:border-style:double
、padding
、background-clip
。
* {
box-sizing: border-box;
}
#tree-wrapper {
position: relative;
width: 668px;
height: 551px;
margin: 0 auto;
}
#tree-wrapper p {
margin: 0;
padding: 0;
}
.tree {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
margin-top: 75px;
}
.circle-top-left,
.circle-top-right,
.circle-bot-left,
.circle-bot-right {
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
font-size: 9px;
-webkit-backface-visibility: hidden;
position: absolute;
background: #b20312;
width: 68px;
height: 68px;
border-radius: 50%;
transition: all .5s ease-in-out;
margin: 0;
text-align: center;
background-clip:content-box;
padding:10px;
border:double 0px #b20312
}
.circle-top-left:hover,
.circle-top-right:hover,
.circle-bot-left:hover,
.circle-bot-right:hover {
width: 170px;
height: 170px;
color: transparent;
border:double 20px #b20312;
}
.circle-top-left {
top: 23.9%;
left: 11.2%;
}
.circle-top-right {
top: 13%;
left: 54.5%;
}
.circle-bot-left {
top: 73.8%;
left: 0;
}
.circle-bot-right {
top: 53.5%;
left: 91.2%;
}
.circle-top-left:hover,
.circle-top-right:hover,
.circle-bot-left:hover,
.circle-bot-right:hover {
transform: translate(-60px, -60px);
}
.circle__wrapper {
display: table;
width: 100%;
height: 100%;
}
.title_subtitle_holder {
display: block;
padding: 30px 0 0;
position: relative;
}
.circle__content {
display: table-cell;
padding: 1em;
vertical-align: middle;
}
.para {
line-height: 25px;
display: none;
font-size: 15px;
color: white;
text-align: center;
vertical-align: middle;
}
.circle-top-right:hover .para,
.circle-bot-right:hover .para,
.circle-top-left:hover .para,
.circle-bot-left:hover .para {
display: block;
}
.circle-top-right:hover span,
.circle-bot-right:hover span,
.circle-top-left:hover span,
.circle-bot-left:hover span {
display: none;
}
/*@import url(http://fonts.googleapis.com/css?family=Norican);*/
.ripple {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
}
h1 {
/*display:block;*/
/*font-size:50px;
font-family: 'Norican', cursive;*/
/*color: white;*/
/*background-image: radial-gradient(10px at 47px 50% , #b20312 0%, #b20312 50%, rgba(178,3,18, 0) 50px);*/
/*background-color: #45C2C5;*/
/*background-color:#fa0;*/
/*border-radius: 50%;*/
/*box-shadow:3px 5px 0 rgba(0,0,0,0.15);*/
/*position: absolute;*/
/* margin:-20px 0 0 -20px;*/
/* text-shadow:0 2px 0 #8ed2d4,2px 3px 15px rgba(0,0,0,0.5);*/
/* transition: all 5s ease-in-out;*/
}
html:hover h1 {
/*transform: translateY(-200px);*/
}
.ripple,
.ripple:before,
.ripple:after {
display: block;
border-radius: 2px;
width: 2px;
height: 2px;
-webkit-animation: rip 4s infinite;
-moz-animation: rip 2s infinite;
}
.ripple {
position: absolute;
z-index: -1;
top: 28%;
left: 15%;
}
.ripple:before,
.ripple:after {
content: '';
position: absolute;
}
.ripple:before {
-webkit-animation-delay: 4s;
-moz-animation-delay: 2s;
}
.ripple:after {
-webkit-animation-delay: .8s;
-moz-animation-delay: .8s;
}
<div id="tree-wrapper">
<img class="tree" <div><img class="tree" title="source: imgur.com" src="http://i.imgur.com/1dDCOyq.png" alt="" />
<div class="ripple"></div>
<div class="circle-top-left" unselectable="yes" onselectstart="return false;">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para"><u>Training</u><br />Personal, Corporate
</p>
<span></span>
</div>
</div>
</div>
</a>
<div class="circle-top-right" unselectable="yes" onselectstart="return false;">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para"><u>Consulting</u><br />Project, Organization
</p>
<span></span>
</div>
</div>
</div>
</a>
<div class="circle-bot-right" unselectable="yes" onselectstart="return false;">
<a class href="http://veddma.net/our-services/accreditation">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para"><u>Accreditation</u><br />Professional Management Architects
</p>
<span></span>
</div>
</div>
</div>
</a>
<div class="circle-bot-left" unselectable="yes" onselectstart="return false;">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para"><u>Tools</u><br />
</p>
<span></span>
</div>
</div>
</div>
</a>
</div>