HTML5+CSS3實(shí)現(xiàn)酷炫的ANIPLEX文字特效，這個(gè)案例動(dòng)畫有點(diǎn)多尤溜，不過(guò)效果是真的酷炫倔叼，可以用來(lái)做網(wǎng)站的開(kāi)屏動(dòng)畫，不多廢話宫莱，直接看效果吧丈攒。
效果：
源碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>純CSS實(shí)現(xiàn)ANIPLEX特效</title>
<link rel="stylesheet" href="../css/24.css">
</head>
<body>
<div class="box">
<div class="chars">A</div>
<div class="chars">N</div>
<div class="chars">I</div>
<div class="chars">P</div>
<div class="chars">L</div>
<div class="chars">E</div>
<div class="chars">X</div>
<div class="ll a"></div>
<div class="ll n"></div>
<div class="ll i"></div>
<div class="ll p"></div>
<div class="ll l"></div>
<div class="ll e"></div>
<div class="ll x"></div>
<div class="pcov"></div>
</div>
</body>
</html>
*{
/* 初始化 取消頁(yè)面內(nèi)外邊距 */
margin: 0;
padding: 0;
}
/* 動(dòng)畫容器 */
.box{
background: #000;
/* 100%窗口寬度和高度 */
width: 100vw;
height: 100vh;
/* 彈性布局 水平、垂直居中 */
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
/* 將平面圖形轉(zhuǎn)換為具有透視的3D圖形 */
perspective: 300;
-webkit-perspective: 300;
}
/* 動(dòng)畫字符所在的塊 */
.chars{
color: #fff;
/* 相對(duì)定位 */
position: relative;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 54px;
font-weight: 900;
/* 斜體 */
font-style: italic;
opacity: 0;
margin: 0 10px;
}
/* 字符外的方框 */
.ll{
/* 絕對(duì)定位 */
position: absolute;
margin-left: -480px;
width: 60px;
height: 60px;
border-radius: 3px;
opacity: 0;
}
.x{
border: 4px solid #f5b5fc;
/* 執(zhí)行動(dòng)畫：動(dòng)畫名稱 時(shí)長(zhǎng) 線性的 停留在最后一幀 */
animation: xmove 2s linear forwards;
}
.e{
border: 4px solid #96f7d2;
animation: emove 2s linear forwards;
/* 動(dòng)畫延遲 */
animation-delay: 0.1s;
}
.l{
border: 4px solid #f0f696;
animation: lmove 2s linear forwards;
animation-delay: 0.2s;
}
.p{
border: 4px solid #fcb1b1;
animation: pmove 2s linear forwards;
animation-delay: 0.3s;
}
.i{
border: 4px solid #f0f696;
animation: imove 2s linear forwards;
animation-delay: 0.4s;
}
.n{
border: 4px solid #96f7d2;
animation: nmove 2s linear forwards;
animation-delay: 0.5s;
}
.a{
border: 4px solid #f5b5fc;
animation: amove 2s linear forwards;
animation-delay: 0.6s;
}
/* 正中間的一條線 */
.pcov{
position: absolute;
width: 4px;
height: 60px;
background-color: #fcb1b1;
opacity: 0;
animation: showp forwards;
animation-delay: 2.3s;
}
/* 定義動(dòng)畫 */
/* 顯示正中間的那條線 */
@keyframes showp {
from{
opacity: 0;
}
to{
transform: scale(1,2);
opacity: 1;
}
}
/* A字符外方框的動(dòng)畫 */
@keyframes amove {
0%{
opacity: 1;
transform: rotateY(0deg);
}
50%{
transform: rotateY(180deg);
}
100%{
opacity: 1;
transform: rotateY(360deg);
}
}
/* N字符外方框的動(dòng)畫 */
@keyframes nmove {
30%{
opacity: 1;
transform: translate(30px) rotateY(135deg) scale(1.1,1.1);
}
60%{
transform: translate(50px) rotateY(45deg) scale(1.1,1.1);
}
85%{
transform: translate(80px) rotateY(103deg) scale(1.2,1.2);
}
100%{
opacity: 1;
z-index: -99;
transform: translate(80px) rotateY(77deg) scale(1.2,1.2);
}
}
/* I字符外方框的動(dòng)畫 */
@keyframes imove {
30%{
opacity: 1;
transform: translate(60px) rotateY(135deg) scale(1.2,1.2);
}
60%{
transform: translate(120px) rotateY(45deg) scale(1.3,1.3);
}
85%{
transform: translate(160px) rotateY(103deg) scale(1.3,1.3);
}
100%{
opacity: 1;
transform: translate(164px) rotateY(77deg) scale(1.3,1.3);
}
}
/* P字符外方框的動(dòng)畫 */
@keyframes pmove {
30%{
opacity: 1;
transform: translate(60px) rotateY(135deg) scale(1.2,1.2);
}
60%{
transform: translate(120px) rotateY(45deg) scale(1.4,1.4);
}
85%{
transform: translate(240px) rotateY(135deg) scale(1.6,1.6);
}
100%{
opacity: 1;
transform: translate(240px) rotateY(90deg) scale(1.6,1.6);
}
}
/* L字符外方框的動(dòng)畫 */
@keyframes lmove {
33%{
opacity: 1;
transform: translate(80px) rotateY(135deg) scale(1.2,1.2);
}
66%{
transform: translate(240px) rotateY(45deg) scale(1.6,1.6);
}
95%{
transform: translate(320px) rotateY(100deg) scale(1.4,1.4);
}
100%{
opacity: 1;
transform: translate(320px) rotateY(103deg) scale(1.3,1.3);
}
}
/* E字符外方框的動(dòng)畫 */
@keyframes emove {
33%{
opacity: 1;
transform: translate(80px) rotateY(135deg) scale(1.2,1.2);
}
66%{
transform: translate(240px) rotateY(45deg) scale(1.6,1.6);
}
95%{
transform: translate(390px) rotateY(135deg) scale(1.2,1.2);
}
100%{
opacity: 1;
transform: translate(402px) rotateY(103deg) scale(1.2,1.2);
}
}
/* X字符外方框的動(dòng)畫 */
@keyframes xmove {
25%{
opacity: 1;
transform: translate(100px) rotateY(135deg) scale(1.2,1.2);
}
50%{
transform: translate(260px) rotateY(45deg) scale(1.6,1.6);
}
85%{
transform: translate(400px) rotateY(135deg) scale(1.2,1.2);
}
100%{
opacity: 1;
transform: translate(484px) rotateY(0deg) scale(1,1);
}
}
/* 前兩個(gè)字符的動(dòng)畫 */
@keyframes show12 {
0%{
opacity: 1;
transform: rotateY(0deg);
}
100%{
opacity: 1;
transform: rotateY(360deg);
}
}
/* 第3個(gè)及之后的字符的動(dòng)畫 */
@keyframes show3 {
0%{
opacity: 1;
transform: rotateY(90deg);
}
100%{
opacity: 1;
transform: rotateY(360deg);
}
}
/* 為每個(gè)字符添加動(dòng)畫 */
.box div:nth-child(1){
animation: show12 1.2s linear forwards;
animation-iteration-count: 2;
animation-delay: 0.2s;
}
.box div:nth-child(2){
animation: show12 1.2s linear forwards;
animation-iteration-count: 2;
animation-delay: 0.4s;
}
.box div:nth-child(3){
animation: show3 1s linear 1 forwards;
animation-delay: 0.7s;
}
.box div:nth-child(4){
animation: show3 1s linear 1 forwards;
animation-delay: 0.9s;
}
.box div:nth-child(5){
animation: show3 1s linear 1 forwards;
animation-delay: 1.1s;
}
.box div:nth-child(6){
animation: show3 1.2s linear 1 forwards;
animation-delay: 1.3s;
}
.box div:nth-child(7){
animation: show3 1.2s linear 1 forwards;
animation-delay: 1.6s;
}
