css3動畫創意
鼠標指向前：
鼠標指向後：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans',sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #000000;
}
.square
{
position: relative;
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.square span:nth-child(1)
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #FFFFFF;
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate 6s linear infinite;
}
.square:hover span:nth-child(1)
{
border: none;
background-color: #0000FF;
}
.square span:nth-child(2)
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #FFFFFF;
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate 4s linear infinite;
z-index: 10;
}
.square:hover span:nth-child(2)
{
border: none;
background-color: yellow;
}
.square span:nth-child(3)
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #FFFFFF;
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
transition: 0.5s;
animation: animate2 10s linear infinite;
}
.square:hover span:nth-child(3)
{
border: none;
background-color: red;
}
@keyframes animate{
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}
@keyframes animate2{
0%
{
transform: rotate(360deg);
}
100%
{
transform: rotate(0deg);
}
}
.content{
position: relative;
padding: 40px 60px;
color: black;
text-align: center;
transition: 0.5s;
z-index: 1000;
}
.content a{
position: relative;
display: inline-block;
margin-top: 10px;
border: 2px solid black;
padding: 6px 18px;
text-decoration: none;
color: black;
font-weight: 600;
border-radius: 73% 27% 44% 56%; / 49% 44% 56% 51%;
}
.content a:hover{
background-color: #FFFFFF;
color: black;
}
</style>
</head>
<body>
<div class="square">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2>hello</h2>
<p>this is text</p>
<a href="#">Read</a>
</div>
</div>
</body>
</html>
————————————————————————————————————————————————
結語：若文章有錯誤的地方，煩請在評論區指出。當然，我會不定時的重新編輯寫過的文章，查錯及優化，希望能將最好的文章展現給讀者。