前言
變形、旋轉(zhuǎn)、轉(zhuǎn)換、過渡和動畫是現(xiàn)在前端必備的技能之一，也是為了更加便捷作出較為美觀的頁面。
因此個人會實踐日常工作可能實現(xiàn)的功能作為例子讓我們更加熟悉變形、旋轉(zhuǎn)、轉(zhuǎn)換、過渡和動畫。以下是兩者的相關(guān)敘述
《CSS3動畫》、《CSS3過渡》、《CSS3變形、轉(zhuǎn)換、旋轉(zhuǎn)》
1.gif
HTML
<div id="main">
<button type="button" class="press">點擊彈出</button>
<div id="contain">
<button class="end">X</button>
</div>
</div>
JS
let pre=document.querySelector(".press")//點擊按鈕
let end=document.querySelector(".end")//退出按鈕
pre.addEventListener("click",clickChange)
end.addEventListener("click",clickChange)
//點擊事件觸發(fā)方法，添加或刪除樣式
function clickChange(){
let change=document.querySelector("#main").classList
let contain=document.querySelector("#contain").classList
change.contains("change")? change.remove("change"):change.add("change")
contain.contains("change")?contain.remove("change"):contain.add("change")
}
CSS
html,body{
padding: 0;
margin: 0;
}
body{
background-color: #C3BED4;
background-size: 100% 100%;
}
#main{
height: 100vh;/*取視高*/
display: flex;
justify-content: center;
align-items: center;
font-size: large;
font-family: "arial, helvetica, sans-serif";
color: #42B983;
}
#main.change::before {/*添加change樣式后的before偽元素，作為點擊后的背景陰影*/
content: "";
position: absolute;/*z-index必須有position:absolute*/
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 100;
background-color: #fff;
animation:my-animation 1s ;/*定義動畫名稱和時長*/
opacity: 0.6;
}
@keyframes my-animation{/*動畫規(guī)則*/
from{
opacity: 0;
}
to{
opacity: 0.6;
}
}
.press{/*點擊按鈕的樣式*/
display: block;
width: 80px;
height: 30px;
border-radius: 10px;
background-color:#FFE4C4;
font-family: "arial black";
font-weight: bold;
color: #3079AB;
}
#contain{/*窗口的設(shè)定，此時的top為-50%*/
position: absolute;
z-index: 1000;
top: -50%;
left: 50%;
height: 200px;
width: 240px;
transform: translate(-50%,-50%);
background-color: #FD5B78;
border: solid #F7F7F7 6px;
border-radius: 10px;
display: flex;
flex-direction: row-reverse;
transition: top 1s;/*top的過渡*/
}
#contain.change{/*點擊按鈕添加樣式后的窗口樣式，top為50%*/
position: absolute;
z-index: 1000;
top: 50%;
left: 50%;
height: 200px;
width: 240px;
transform: translate(-50%,-50%);
background-color: #FD5B78;
border: solid #F7F7F7 6px;
border-radius: 10px;
display: flex;
flex-direction: row-reverse;
}
.end{
width: 30px;
height: 30px;
display: block;
border: solid #E9E9E9 2px;
background-color: #FA8072;
}
