1. 創建專案結構
背景設定 body：（青銅級）
/*1.設定背景顏色*/
body{
height: 100vh;/*vh：1vh等于視口高度的1%*/
margin: 0;/*無外邊距*/
display: flex;/*body里面的內容為彈性盒子模型*/
align-items: center;/*交叉軸居中*/
justify-content: center;/*主軸居中*/
background: linear-gradient(to bottom,cyan, #0041c2, #180029);/*背景顏色漸變*/
}
/*html代碼：*/
<body>
</body>
效果圖：
水母主體部分 ：（白銀級）
.jellyfish 全部身體的容器
.body 主身體部分（腦袋（上半圓））
/*身體整體設定,成為一個容器*/
.jellyfish{
position: relative;/*使用相對定位*/
}
/*創建身體部分*/
.jellyfish .body{
background: cyan;/*身體的顏色*/
/*谷歌瀏覽器默認的字體大小為16px；*/
width: 10em;/*10倍的像素值*/
height: 5em;/*5倍的像素值*/
position: relative;
opacity: 0.65;/*opacity：元素的不透明度*/
/*
設定陰影效果
H是色度，取值在0度~360度之間，0度是紅色，120度是綠色，240度是藍色。360度也是紅色。
S是飽和度，是色彩的純度，是一個百分比的值，取值在0%~100%，0%飽和度最低，100%飽和度最高
L是亮度，也是一個百分比值，取值在0%~100%，0%最暗，100%最亮。
A是不透明度，取值在0.0~1.0，0.0完全透明，1.0完全不透明。
*/
box-shadow: inset 0 0.2em 0 cyan,inset 0em 0.4em 0 hsla(0, 0%, 100%, 0.6);
/*border-top-left-radius 屬性定義左上角邊框的形狀*/
border-top-left-radius: 50% 100%;
/*border-top-right-radius 屬性定義右上角邊框的形狀*/
border-top-right-radius: 50% 100%;
}
/*html代碼：*/
<body>
<!-- 新增主體部分 -->
<div class="jellyfish">
<div class="body">
</div>
</div>
</body>
效果圖：
身體的底部 .base：波浪部分 （黃金級）
/*底部波浪部分*/
.jellyfish .body .base{
position: absolute;
width: 3em;
height: 1.5em;
background: cyan;
/*距離底端的距離 負值為溢位*/
bottom: -1.5em;
/*左下角*/
border-bottom-left-radius: 50% 100%;
/*右下角*/
border-bottom-right-radius: 50% 100%;
/*復制兩個影子出來*/
box-shadow: 3.5em 0 0 cyan, 7em 0 0 cyan;
}
/*html代碼：*/
<body>
<div class="jellyfish">
<div class="body">
<!-- 新增底部部分 -->
<div class="base"></div>
</div>
</div>
</body>
效果圖：
波浪連接部分渲染：使用偽元素（.base:after，.base:before）（黃金級）
/*:after 偽元素在元素之后添加內容。*/
.jellyfish .body .base:after {
content: '';
position: absolute;
width: 3em;
height: 1em;
left: 1.75em;
top: -0.25em;
background: radial-gradient(at 50% 120%,transparent 25%,cyan 0%);
}
/*:before 偽元素在元素之前添加內容。*/
.jellyfish .body .base:before {
content: '';
position: absolute;
width: 3em;
height: 1em;
left: 5.25em;
top: -0.25em;
background: radial-gradient(at 50% 120%,transparent 25%,cyan 0%);
}
/*html代碼：*/
<body>
<div class="jellyfish">
<div class="body">
<div class="base"></div>
</div>
</div>
</body>
效果圖：
內臟部分：.guts （白銀級）
/*內臟部分*/
.jellyfish .guts {
width: 4em;
height: 4em;
background: white;
position: absolute;
left: 3em;
top: 1em;
border-radius: 50%;
/*使用多個陰影來渲染*/
box-shadow:
-1.5em 0.7em 0 -0.8em white,
-1.7em -0.5em 0 -1.4em white,
1.8em -0.1em 0 -1.3em white,
1em 1em 0 -0.6em white,
-0.4em 1.8em 0 -1.3em white,
1.4em -1em 0 -1.5em white,
-1.3em 1.8em 0 -1.5em white;
}
/*html代碼：*/
<body>
<div class="jellyfish">
<!-- 新增內臟部分 -->
<div class="guts"></div>
<div class="body">
<div class="base"></div>
</div>
</div>
</body>
效果圖：
眼睛部分 .eyes .left .eyes .right （黃金級）
/*眼睛部分（左右眼）*/
.jellyfish .eyes .eye {
position: absolute;
width: 2em;
height: 2em;
border-radius: 50%;
background: white;
left: 2.85em;
top: 3em;
}
/*右眼的位置*/
.jellyfish .eyes .eye.right {
left: 5.15em;
}
/*眼球*/
.jellyfish .eyes .eye:before {
content: '';
position: absolute;
width: 70%;
height: 70%;
background: darkblue;
border-radius: 50%;
left: 15%;
top: 15%;
}
/*眼球中的閃光*/
.jellyfish .eyes .eye:after {
content: '';
position: absolute;
width: 25%;
height: 25%;
background: #fff;
border-radius: 50%;
left: 25%;
top: 25%;
box-shadow: 0.4em 0.4em 0 -0.12em white, 0.5em 0.05em 0 -0.15em white;
}
/*html代碼：*/
<body>
<div class="jellyfish">
<div class="guts"></div>
<div class="body">
<div class="base"></div>
</div>
<!-- 新增眼睛部分 -->
<div class="eyes">
<div class="eye left">
</div>
<div class="eye right">
</div>
</div>
</div>
</body>
效果圖：
觸須部分 .tentacles （黃金級）
/*觸須*/
.jellyfish .tentacles .tentacle {
position: absolute;
top: 4em;
width: 10em;
height: 8em;
border: 1px solid rgba(0, 255, 255, 0.6);/*觸須顏色*/
border-bottom: none;/*去掉底border*/
border-top: none;/*去掉頂border*/
border-top-left-radius: 20% 50%;/*左上*/
border-top-right-radius: 20% 50%;/*右上*/
border-bottom-right-radius: 10% 50%;/*右下*/
border-bottom-left-radius: 10% 50%;/*左下*/
}
/*第2、3、4、5只觸須依次遞減即可*/
.jellyfish .tentacles .tentacle:nth-child(2) {
transform: scaleX(0.8);
}
.jellyfish .tentacles .tentacle:nth-child(3) {
transform: scaleX(0.6);
}
.jellyfish .tentacles .tentacle:nth-child(4) {
transform: scaleX(0.4);
}
.jellyfish .tentacles .tentacle:nth-child(5) {
transform: scaleX(0.2);
}
/*html代碼：*/
<body>
<div class="jellyfish">
<!--新增觸須部分-->
<div class="tentacles">
<div class="tentacle"></div>
<div class="tentacle"></div>
<div class="tentacle"></div>
<div class="tentacle"></div>
<div class="tentacle"></div>
</div>
<div class="guts"></div>
<div class="body">
<div class="base"></div>
</div>
<div class="eyes">
<div class="eye left">
</div>
<div class="eye right">
</div>
</div>
</div>
</body>
效果圖：
觸角部分 （王者級）
制作腿的思路：
（1） 制作一個矩形，邊框為：
height: 6em;
border-left: 1em solid #ffffff;
border-right: 1em solid #000;
border-top: 1em solid #ffffff;
border-bottom: 1em solid #000;
效果：
（2）修改，添加圓角效果，并去掉right和top兩個屬性
效果：
（3）將黑色改為透明色，代碼及效果：
.jellyfish .arms .arm {
position: absolute;
width: 2em;
height: 6em;
top: 3em;
border-radius: 50%;
border-left: 1em solid #ccffff;
border-bottom: 0.3em solid transparent;
}
效果：
（4）同樣的方法完成第二、三節觸手的效果，為了效果明顯，使用不同的顏色顯示，專案中會調整顏色
/*觸角的制作*/
.jellyfish .arms .arm {
position: absolute;
width: 2em;
height: 6em;
top: 3em;
border-radius: 50%;
border-left: 1em solid #ccffff;
border-bottom: 0.3em solid transparent;
/*使用css宣告變數的方法 var(--varname) calc() 函式用于動態計算值。*/
transform: scaleX(var(--scaleX)) scaleY(var(--scaleY)) rotate(calc(var(--rotate) * 1deg));
/*添加不透明度*/
opacity: 0.4;
}
/*同樣的方法完成第二節觸手*/
.jellyfish .arms .arm:before {
content: '';
position: absolute;
width: 1.6em;
height: 3em;
top: 5.1em;
left: -1.5em;
border-radius: 50%;
border-right: 0.6em solid #ccffff;
border-top: 0.3em solid transparent;
border-bottom: 0.3em solid transparent;
transform: rotate(-10.4deg);
}
/*同樣的方法完成第三節觸手*/
.jellyfish .arms .arm:after {
content: '';
position: absolute;
width: 1em;
height: 2em;
top: 7.5em;
left: -0.05em;
border-radius: 50%;
border-top: 0.4em solid transparent;
border-left: 0.4em solid #ccffff;
transform: rotate(10deg);
}
/*除錯每個觸腳的位置，使用 :nth-child(n)*/
.jellyfish .arms .arm:nth-child(1) {
left: 2.2em;
}
.jellyfish .arms .arm:nth-child(2) {
left: 3em;
}
.jellyfish .arms .arm:nth-child(3) {
left: 3.6em;
}
.jellyfish .arms .arm:nth-child(4) {
left: 2.3em;
}
.jellyfish .arms .arm:nth-child(5) {
left: 3.8em;
}
.jellyfish .arms .arm:nth-child(6) {
left: 4.5em;
}
.jellyfish .arms .arm:nth-child(7) {
left: 3em;
}
.jellyfish .arms .arm:nth-child(8) {
left: 4.5em;
}
/*html代碼：*/
<body>
<div class="jellyfish">
<!--新增觸角部分-->
<div class="arms">
<div class="arm" style="--scaleX:1;--scaleY:1;--rotate:3;"></div>
<div class="arm" style="--scaleX:1;--scaleY:1.1;--rotate:2;"></div>
<div class="arm" style="--scaleX:1;--scaleY:1.2;--rotate:1;"></div>
<div class="arm" style="--scaleX:-1;--scaleY:1.15;--rotate:0;"></div>
<div class="arm" style="--scaleX:-1;--scaleY:1.1;--rotate:0;"></div>
<div class="arm" style="--scaleX:-1;--scaleY:1;--rotate:-1;"></div>
<div class="arm" style="--scaleX:-1;--scaleY:1.15;--rotate:-2;"></div>
<div class="arm" style="--scaleX:.5;--scaleY:1.15;--rotate:-3;"></div>
</div>
<div class="tentacles">
<div class="tentacle"></div>
<div class="tentacle"></div>
<div class="tentacle"></div>
<div class="tentacle"></div>
<div class="tentacle"></div>
</div>
<div class="guts"></div>
<div class="body">
<div class="base"></div>
</div>
<div class="eyes">
<div class="eye left">
</div>
<div class="eye right">
</div>
</div>
</div>
</body>
效果圖：
至此結構整體已完成
uj5u.com熱心網友回復：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/195554.html
標籤：HTML(CSS)
上一篇：怎么才能使這個背景圖超出表單 我只會全屏鋪滿或者和表單一樣大小
下一篇：vue中怎么引入jsp頁面？？