柚子快報邀請碼778899分享：css css3 前端代碼基礎(chǔ)

http://yzkb.51969.com/

文章目錄

引言實戰(zhàn)一：漸變背景實戰(zhàn)二：輪播圖輪播圖（1）輪播圖（2）

實戰(zhàn)三：簡單的綜合應(yīng)用

引言

此文為html+css+JavaScript的項目實戰(zhàn)，是全棧開發(fā)的前端基礎(chǔ)，這項基礎(chǔ)會持續(xù)到ssm框架后進行拓展至mpvue，vue3，uniapp，React. 下面主要實現(xiàn)為使網(wǎng)頁更加美觀我們先進行兩個基礎(chǔ)實戰(zhàn)，漸變背景和輪播圖，最后進行一個項目實戰(zhàn)做一個簡單的前端網(wǎng)站

實戰(zhàn)一：漸變背景

這個為css文件，可以加入任意css文件中設(shè)置漸變背景，顏色可以進行更改，下面有代碼詳解，幫助二次開發(fā)

*{

margin: 0;

padding: 0;

}

body{

font-family: "monotype corsiva";

background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c);

background-size: 400%;

animation:jb 15s infinite;

}

.text{

color: white;

text-align: center;

text-transform: uppercase;

margin: 300px 0;

font-size: 22px;

}

@keyframes jb{

0%{

background-position: 0% 50%;

}

50%{

background-position: 100% 50%;

}

100%{

background-position: 0% 50%;

}|

}

代碼分析： 這是一個CSS樣式代碼片段，它描述了一個網(wǎng)頁的背景漸變色、字體樣式、文字顏色和動畫效果。具體解釋如下：

第一行 *{ margin: 0; padding: 0; } 表示將所有HTML標(biāo)簽的外邊距和內(nèi)邊距設(shè)置為0，這是初始化頁面樣式的常見做法。body{ ... } 表示組合選擇器，下面的代碼塊描述了 body 標(biāo)簽的樣式，其中：font-family: "monotype corsiva"; 表示使用"monotype corsiva"字體，用于設(shè)置頁面中所有字體的樣式。background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c); 表示使用 linear-gradient 屬性創(chuàng)建一個從左上角到右下角的漸變背景色，并設(shè)置了四個顏色值，參與漸變的顏色范圍。顏色值以逗號分隔。background-size: 400%; 表示設(shè)置背景圖片大小為父元素的400%。animation:jb 15s infinite; 表示將動畫效果應(yīng)用于 jb 關(guān)鍵幀，動畫播放時間為15秒，重復(fù)播放無限次。.text{ ... } 表示類選擇器，下面的代碼塊描述了 .text 類的樣式，其中：color: white; 表示文字顏色為白色。text-align: center; 表示文字居中對齊。text-transform: uppercase; 表示將文字轉(zhuǎn)換為全大寫。margin: 300px 0; 表示文字的上下邊距為300像素。font-size: 22px; 表示文字大小為22像素。@keyframes jb{ ... } 表示定義一個名為 jb 的關(guān)鍵幀動畫，其中：0%{ ... } 表示動畫開始時的狀態(tài)。50%{ ... } 表示動畫播放到一半時的狀態(tài)。100%{ ... } 表示動畫結(jié)束時的狀態(tài)。background-position: 0% 50%; 表示背景圖片位置，第一個值表示水平方向位置，第二個值表示垂直方向位置。在這個動畫中，背景圖片的位置會從左到右不斷變化，最終回到初始位置。

資源下載連接地址：鏈接: link

實戰(zhàn)二：輪播圖

輪播圖為小項目，可以放到頁面頂頁或index頁面進行二次開發(fā)，下面介紹兩種輪播圖，下面為css文件

輪播圖（1）

* {

/* 初始化 取消頁面的內(nèi)外邊距 */

padding: 0;

margin: 0;

/* 盒子模型 */

box-sizing: border-box;

}

body {

/* 彈性布局 讓頁面元素垂直+水平居中 */

display: flex;

justify-content: center;

align-items: center;

/* 讓頁面始終占屏幕總高 */

height: 100vh;

}

.swiper {

/* 相對定位 */

position: relative;

width: 857px;

height: 441px;

overflow: hidden;

}

input {

display: none;

}

label {

position: absolute;

bottom: 30px;

width: 20px;

height: 20px;

border: 3px solid #fff;

border-radius: 50%;

background-color: #fff;

}

label[for="btn1"] {

left: 35%;

}

label[for="btn2"] {

left: 40%;

}

label[for="btn3"] {

left: 45%;

}

label[for="btn4"] {

left: 50%;

}

label[for="btn5"] {

left: 55%;

}

label[for="btn6"] {

left: 60%;

}

label[for="btn7"] {

left: 65%;

}

ul {

/* 讓li水平排列 */

display: flex;

/* 自動計算寬度 */

width: calc(857px * 7);

/* 過渡時間 */

transition: all 0.5s;

}

li {

list-style-type: none;

}

#btn1:checked ~ ul {

margin-left: 0;

}

#btn2:checked ~ ul {

margin-left: -857px;

}

#btn3:checked ~ ul {

margin-left: calc(-857px * 2);

}

#btn4:checked ~ ul {

margin-left: calc(-857px * 3);

}

#btn5:checked ~ ul {

margin-left: calc(-857px * 4);

}

#btn6:checked ~ ul {

margin-left: calc(-857px * 5);

}

#btn7:checked ~ ul {

margin-left: calc(-857px * 6);

}

#btn1:checked ~ label[for="btn1"] {

background-color: #f00;

}

#btn2:checked ~ label[for="btn2"] {

background-color: #f00;

}

#btn3:checked ~ label[for="btn3"] {

background-color: #f00;

}

#btn4:checked ~ label[for="btn4"] {

background-color: #f00;

}

#btn5:checked ~ label[for="btn5"] {

background-color: #f00;

}

#btn6:checked ~ label[for="btn6"] {

background-color: #f00;

}

#btn7:checked ~ label[for="btn7"] {

background-color: #f00;

}

該輪播圖為自己點擊切換，設(shè)置好圖片信息即可 代碼詳解： 這段代碼是實現(xiàn)一種輪播圖效果的CSS樣式代碼，具體實現(xiàn)過程如下：

給所有元素的內(nèi)外邊距設(shè)置為0，盒子模型設(shè)置為border-box，保證元素的寬高不會因為邊框和內(nèi)邊距而發(fā)生變化。給body元素設(shè)置display屬性為flex，通過justify-content和align-items屬性實現(xiàn)頁面元素的垂直和水平居中，同時通過height屬性讓頁面始終占據(jù)屏幕總高度。給輪播圖.swiper元素設(shè)置position屬性為relative，為子元素提供定位的參考點，同時設(shè)置寬度和高度，overflow屬性為hidden，讓超出部分隱藏。給input元素設(shè)置display屬性為none，讓其在頁面中不可見。給label元素設(shè)置position屬性為absolute，bottom屬性為30px，使其在輪播圖的底部，并通過left屬性設(shè)置每個按鈕的位置。給ul元素設(shè)置display屬性為flex，讓li元素水平排列，width屬性設(shè)置為7個輪播圖的總寬度，transition屬性設(shè)置過渡時間。給li元素設(shè)置list-style-type屬性為none，去掉li元素的默認樣式。對7個輪播圖分別設(shè)置:checked偽類，每個偽類對應(yīng)一個label元素和ul元素的樣式，通過margin-left屬性實現(xiàn)輪播圖的切換，同時通過background-color屬性控制哪個按鈕處于選中狀態(tài)。 這段代碼實現(xiàn)的輪播圖效果是通過7個單選框和7個label元素控制圖片的切換，通過CSS偽類:checked控制輪播圖的位置，同時通過label元素的背景色標(biāo)示哪張圖片處于選中狀態(tài)。

資源下載地址：鏈接: link

輪播圖（2）

改輪播圖為自動輪播，可以通過鼠標(biāo)控制輪播圖的暫停與開始或者跳轉(zhuǎn)，只需設(shè)置一個 .js 文件即可，下面為css文件

*{

margin: 0;

padding:0;

}

body{

position: absolute;

width: 100%;

height: 100%;

perspective:2000px;

}

.back{

position: absolute;

width: 100%;

height: 100%;

top: 0;

}

h1{

position: relative;

top:100px;

color: white;

text-align: center;

font-family: "微軟雅黑";

font-size: 50px;

z-index: 999;

}

.section{

position:absolute;

width: 300px;

height: 300px;

transform-style: preserve-3d;

margin: 200px auto;

top:10%;

left: 40%;

animation: rotate 5s linear infinite;

z-index: 999;

}

.section div{

position: absolute;

width: 300px;

height: 300px;

border-radius: 30px;

font-family: "微軟雅黑";

font-size: 50px;

display: flex;

justify-content: center;

align-items: center;

}

.section:hover{

animation-play-state: paused;

}

@keyframes rotate{

0%{

transform: rotateY(0);

}

100%{

transform: rotateY(360deg);

}

}

.section div:nth-child(1){

transform: rotateY(60deg) translateZ(300px);

background:url(../img/be297bc5ly1gjlx659lprj20jg0jg18a.jpg) no-repeat;

}

.section div:nth-child(2){

transform: rotateY(120deg) translateZ(300px);

background:url(../img/be297bc5ly1gkl0cpboyhj20jg0jg195.jpg) no-repeat;

}

.section div:nth-child(3){

transform: rotateY(180deg) translateZ(300px);

background: white;

background: url(../img/be297bc5ly1gkl0cpsrixj20jg0jgnbw.jpg) no-repeat;

}

.section div:nth-child(4){

transform: rotateY(240deg) translateZ(300px);

background: url(../img/be297bc5ly1gkl0cqpmuvj20jg0jgnbs.jpg) no-repeat;

}

.section div:nth-child(5){

transform: rotateY(300deg) translateZ(300px);

background: url(../img/be297bc5ly1gkl0cqbgghj20jg0jg7jz.jpg) no-repeat;

}

.section div:nth-child(6){

transform: rotateY(360deg) translateZ(300px);

background: url(../img/be297bc5ly1gkl0cr6d1ij20jg0jg4b4.jpg) no-repeat;

}

代碼解釋 這是一個CSS代碼，用于創(chuàng)建一個帶有不同圖像的三維旋轉(zhuǎn)立方體。該立方體位于屏幕中心，并無限旋轉(zhuǎn)。當(dāng)鼠標(biāo)懸停在其上方時，動畫會暫停。 以下是代碼功能的詳細解釋：

將頁面上所有元素的邊距和內(nèi)邊距設(shè)置為0。將透視設(shè)置為2000px，以創(chuàng)建三維效果。定義一個覆蓋整個屏幕的背景元素。在頁面上方定義一個帶有文本的h1元素。定義一個section元素，其中包含六個div元素，每個表示立方體的一個面。將transform-style設(shè)置為preserve-3d，以維持3D效果。對section元素應(yīng)用rotate動畫，以旋轉(zhuǎn)立方體。對每個div元素定義一個背景圖像，并應(yīng)用transform來使用rotateY和translateZ屬性將其定位在立方體面上。當(dāng)鼠標(biāo)懸停在section元素上方時，動畫暫停。 你可以使用此代碼創(chuàng)建帶有自己的圖像的旋轉(zhuǎn)立方體，或修改它以適應(yīng)你的需求。 具體成果：

資源下載地址：鏈接: link

實戰(zhàn)三：簡單的綜合應(yīng)用

插畫展示平臺，使用了html+css+JavaScript綜合應(yīng)用以及表單的使用 主要代碼為 html：