CSS3畫鋼鐵俠
阿新 • • 發佈：2020-12-25
技術標籤：css3
鋼鐵俠效果
鋼鐵俠頭盔在螢幕內放大發光，在縮小變暗。
效果圖：
變化前：
變化後
不斷來畫變化
然後我們再來怎麼編寫吧：
html：主要有div盒子通過相對定位和絕對定位佈局組合而成
<div id="box2">
<div id="box_1"></div>
<div id="box_2"></div>
<div id="box_3">
< css部分：
主要有設計到邊框的的應用，盒子陰影，css3動畫
組合而成。
1.通過boder-radius設定頭盔外邊框的弧度，同時也可以用這個方法話頭部的2個角和2個眼睛。
2.講外面的盒子設定為相對定位，你面的元素設定為絕對定位
子絕父相，便於操作
2.transform講開始的大小設定為原來的0.5倍。
3.通過animation為該盒子設定關鍵幀動畫，在一定時間內倍數變 大,背景顏色變紅。
4.通過邊框的將其他方位的背景顏色設為透明色。就畫出了兩邊的三角。
5.嘴巴可以通過transform的旋轉屬性將高度小的盒子通過相對定位進行拼接。
6.最左下和右下部分的尖角弧度，也是通過邊框來縮小的，只給di設定高度不設定寬度，在影藏另外的兩個角就完成了這個尖角的繪製。
7.眼睛和外邊框同時關鍵幀動畫新增邊框陰影，形成發紅光的效果。
#box2{
width: 300px;
height: 490px;
/* border: 1px solid white; */
position: relative;
margin: 100px auto;
border-top-left-radius: 22% 7%;
border-top-right-radius: 22% 7%;
/* background-color: red; */
border-bottom-left-radius: 45%;
border-bottom-right-radius: 45%;
transform: scale(0.5,0.5);
animation: run 5s linear infinite alternate;
/* display: none; */
}
div[id*="box_"]{
/* border: 1px solid #000; */
position: absolute;
background-color: white;
opacity: 50%;
}
#box_1{
width: 100px;
height: 95px;
position: absolute;
border-top-left-radius: 110% 50%;
border-top-right-radius: 20% 100%;
top: 5px;
}
#box_2{
width: 100px;
height: 95px;
top: 5px;
position: absolute;
left: 200px;
border-top-right-radius: 110% 50%;
border-top-left-radius: 20% 100%;
}
div[id*="box-"]{
position: absolute;
}
#box_3{
width: 300px;
height: 200px;
top: 100px ;
}
#box-4{
width: 0;
height: 30px;
top: 300px;
border-top: 90px solid rgba(255, 255, 255, 0.5);
border-right: 50px solid rgba(255, 255, 255, 0.5);
border-left: 45px solid transparent;
border-bottom: 50px solid transparent;
left: 0px;
}
#box-5{
width: 0;
height: 30px;
left: 205px;
top: 300px;
border-top: 90px solid rgba(255, 255, 255, 0.5);
border-left: 50px solid rgba(255, 255, 255, 0.5);
border-right: 45px solid transparent;
border-bottom: 50px solid transparent;
}
#box_6{
width: 110px;
height: 170px;
left: 95px;
top: 300px;
}
/* 眼睛 */
div[id*="eye"]{
width: 80px;
height: 30px;
background-color:rgba(243, 242, 190, 0.7);
position: absolute;
animation: run 5s linear infinite alternate;
}
#eye_1{
left: 20px;
top: 180px;
transform: rotate(20deg);
border-bottom-right-radius:75% 100% ;
border-bottom-left-radius:75% 50% ;
}
#eye_2{
left: 200px;
top: 180px;
transform: rotate(-20deg);
border-bottom-left-radius:75% 100% ;
border-bottom-right-radius:75% 50% ;
}
/* 嘴 */
div[id*="bot"]{
background-color: #000;
position: absolute;
margin-left: 10px;
opacity: 50%;
}
#bot_1{
width: 40px;
height: 5px;
left: 60px;
top: 380px;
transform: rotate(60deg);
}
#bot_2{
width: 30px;
height: 5px;
left: 85px;
top: 390px;
transform: rotate(-30deg);
}
#bot_3{
width: 70px;
height: 5px;
left: 112px;
top: 383px;
}
#bot_4{
width: 30px;
height: 5px;
left: 179px;
top: 390px;
transform: rotate(30deg);
}
#bot_5{
width: 40px;
height: 5px;
left: 196px;
top: 382px;
transform: rotate(-60deg);
}
/* 中部 */
#box2 #mi_1{
width: 0;
height: 0;
border-top: 130px solid transparent;
border-left: 15px solid #000;
border-right: 0 solid transparent;
border-bottom: 50px solid transparent;
position: absolute;
top: -30px;
}
#box2 #mi_2{
width: 0;
height: 0;
border-top: 130px solid transparent;
border-left: 0 solid transparent;
border-right: 15px solid #000;
border-bottom: 50px solid transparent;
position: absolute;
left: 285px;
top: -30px;
}
@keyframes run{
0%{}
100%{
box-shadow: 0px 0px 30px 20px rgba(255, 255, 255, 0.5),
inset 0px 0px 10px 5px rgba(255, 255, 255, 0.5);
background-color: rgba(241, 86, 86, 0.3);
transform: scale(1,1);
}
}