內容摘要
傷心啊，寫了好幾天博客沒人看~不過沒關係，寫博客的主要目的還是爲了技術積累。在segmentFault上看到有前端每日專欄，覺得不錯，正好css基礎還不夠鞏固決定跟着該專欄每天跟着學習一些有趣的純html+css製作的效果，動畫出處：https://segmentfault.com/a/1190000016774570
最終效果預覽：https://codepen.io/comehope/pen/GYXvez
內容學習
這東西越做越覺得很酷，希望自己能堅持下去吧。做得越多，越習慣裏面的內容以及一切css3屬性的用法，這次的新內容有text-transform: capitalize;的用法，很簡單，規定文本的內容格式，capitalize爲首字母大寫，還有touppercase等就不多解釋了，animation: fade 0.5s ease-in forwards;然後就是這裏的forwards，一開始可能不理解，其實是animation-fill-mode 屬性的一個值，forwards表示保持動畫的最後一個狀態屬性，因爲這裏是初始值display：none，所以不用forwards的話，動畫結束後內容會消失。
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內容彈窗動畫</title>
</head>
<body>
<div class="main">
<a href="#terrestrial" class="open-popup">terrestrial animals</a>
<a href="#aquatic" class="open-popup">aquatic animals</a>
</div>
<section id="terrestrial" class="popup">
<a href="#" class="back"><back</a>
<p>🐅🐆🐘🦏🐃🦌🐐🐫</p>
</section>
<section id="aquatic" class="popup">
<a href="#" class="back">< back</a>
<p>🐋🐳🐬🐟🐠🐡🐙🦑🦐🦀</p>
</section>
</body>
<style>
/*<!--頁面基礎屬性-->*/
body{
margin: 0;
height: 100vh;
overflow: hidden;
}
.main{
height: inherit;
background: linear-gradient(dodgerblue,darkblue);
display: flex;
justify-content:center;
align-items:center;
}
.open-popup{
/*改成IE盒子*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: white;
font-size: 16px;
font-family: sans-serif;
width: 10em;
height: 4em;
border: 1px solid;
text-align: center;
line-height: 4em;
text-decoration: none;
/*轉換文本 capitalize爲首字母大寫*/
text-transform: capitalize;
margin: 1em;
}
.open-popup:hover{
border-width: 2px;
}
.popup {
position: absolute;
top: 0;
width: 100%;
height: inherit;
/*display: flex;*/
flex-direction: column;
justify-content: start;
}
.popup .back{
font-size: 20px;
font-family: sans-serif;
text-align: center;
height: 2em;
line-height: 2em;
background-color: #dddddd;
color: black;
text-decoration: none;
}
.popup .back:visited{
color: black;
}
.popup .back:hover{
background-color: #eee;
}
.popup p{
font-size: 100px;
text-align: center;
margin:0.1em 0.05em;
}
.popup{
display: none;
}
.popup:target{
display: flex;
}
.popup >*{
filter:opacity(0);
/*forwards當動畫完成後保持最後一個屬性值
因爲元素開始時是display none，所以要保持最後一個狀態才能讓畫面一直呈現
*/
animation: fade 0.5s ease-in forwards;
animation-delay: 1s;
}
@keyframes fade{
to{
filter: opacity(1);
}
}
/*製作一個白色背景*/
.popup::before{
content: '';
position: absolute;
box-sizing: border-box;
width: 100%;
height: 0;
top: 50%;
background-color: white;
-webkit-animation: open-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2) forwards;
-o-animation: open-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2) forwards;
animation: open-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2) forwards;
animation-delay: 0.5s;
}
@keyframes open-animate {
to{
height:100vh;
top:0;
}
}
/*製作一條橫線，從頁面左端橫穿到右端*/
.popup::after{
content: '';
position: absolute;
width: 0;
height: 2px;
background-color: white;
top: calc((100% - 2px) / 2);
left: 0;
-webkit-animation: line-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2);
-o-animation: line-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2);
animation: line-animate 0.5s cubic-bezier(0.8, 0.2, 0, 1.2);
}
@keyframes line-animate{
50%,100%{
width: 100%;
}
}
</style>
</html>