CSSでぷかぷか浮かぶタイトルを作りたい！
//css
.title,
.title span {
position: relative;
display: inline-block;
}
.title span {
padding: .65em 4em;
background: -webkit-linear-gradient(#fe5f95 , #ff3f7f);
background: linear-gradient(#fe5f95 , #ff3f7f);
border: 1px solid #fe3276;
border-radius: 4px;
color: #fff;
box-shadow: 10px 10px 15px -10px;
/* text-decoration: none; */
text-align: center;
animation: 3s float ease-in-out infinite;
animation: 3s float ease-in-out infinite;
}
.title::after {
position: absolute;
bottom: -15px;
left: 50%;
z-index: -1;
content: '';
width: 100%;
height: 24px;
background-color: rgba(0, 0, 0, 0.3);
box-shadow: 10px 10px 15px -10px;
border-radius: 50%;
transform: translateX(-50%);
transform: translateX(-50%);
animation: 3s shadow ease-in-out infinite;
animation: 3s shadow ease-in-out infinite;
}
@-webkit-keyframes float {
50% {
transform: translateY(-10px);
}
}
@keyframes float {
50% {
transform: translateY(-10px);
}
}
@-webkit-keyframes shadow {
50% {
width: 70%;
height: 18px;
}
}
@keyframes shadow {
50% {
width: 70%;
height: 18px;
}
}
//HTML
<h1 class="title"><span>タイトル</span></h1>
↧