每日分享html之1个卡片选择、2个加载、1个背景、1个开关
生活随笔
收集整理的這篇文章主要介紹了
每日分享html之1个卡片选择、2个加载、1个背景、1个开关
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我是c站的一個小博主，近期我會每天分享前端知識包括（原生的web語句，以及vue2和vue3，微信小程序的寫法及知識點）本篇文章收錄于html特效專欄中，如果想每天在我這學到一些東西，請關注我并訂閱專欄，每天都分享前端知識哦~
歡迎關注b站：小淼前端
有更多的前端特效，及視頻講解+源代碼可領取哦~
歡迎關注b站：小淼前端
有更多的前端特效，及視頻講解+源代碼可領取哦~
目錄
我是c站的一個小博主，近期我會每天分享前端知識包括（原生的web語句，以及vue2和vue3，微信小程序的寫法及知識點）本篇文章收錄于html特效專欄中，如果想每天在我這學到一些東西，請關注我并訂閱專欄，每天都分享前端知識哦~
歡迎關注b站：小淼前端
有更多的前端特效，及視頻講解+源代碼可領取哦~
歡迎關注b站：小淼前端
有更多的前端特效，及視頻講解+源代碼可領取哦~
前端是做什么的？
前端的特效視覺：
1.鼠標懸停圖片縮小文字出現
2.跳跳糖版
3.實時時間背景效果
4.滑動簡約特效
5.單圈環繞流光加載
歡迎關注b站：小淼前端
有更多的前端特效，及視頻講解+源代碼可領取哦~
歡迎關注b站：小淼前端
有更多的前端特效，及視頻講解+源代碼可領取哦~
前端是做什么的？
1.前端工程師主要利用HMTL與CSS建構頁面（其中html構建骨架，css構建樣式），用JavaScript獲取后端數據以及完善交互以及用戶體驗。
2.通俗來講，前端在一個項目里，拿到UI設計師設計的設計稿，然后實現UI設計師設計稿，調用后端程序員給的數據接口以獲取數據，然后測試，最后部署上線。
3.前端可以對設計圖負責,大部分情況下,不需要特別的去理解業務邏輯,因為我們90后都是玩著十幾年手機電腦長大的,十幾年的經驗足夠我們在潛意識里想明白應該怎么做,怎么去一步步實現,會有什么意外情況。
4.我感覺前端發展有個很大的缺陷----晉升問題. 正如第三點所言,作為領導必須對項目有足夠的了解,顯然是要重點包括業務邏輯,這點上,后端開發者需要涉及數據庫邏輯,是必須要跟業務邏輯打交道的(重中之重),因此,大部分的領導崗位都是后端開發者更有晉升的機會。當然,個別公司有專門的前端組長(這也不算什么),如果說前端開發者在自己工作范圍之外還要騰出時間去研究業務邏輯,屬實是覺得出力不討好(因為這樣的操作需要持續很久才能看出效果),而且再怎么研究業務邏輯也不會比每時每刻跟業務邏輯打交道的后端開發者了解更多。說實在的,大部分情況下,前端在配合后端進行開發.后端需要了解業務邏輯,要跟領導和客戶商量細節,露臉機會很大,在老板面前刷臉次數眾多。這些都是拉開前后端程序員晉升機會差距的因素。
前端的特效視覺：
層次結構的表現
動態效果，如縮放，覆蓋，滑出網頁或單個視覺元素，可幫助用戶理解網頁信息架構。通常是通過轉場和菜單來展開網頁。
表現層級關系
為了展現層與層的關系，是抽屜，是打開，還是平級切換等等。讓用戶知道這個界面和上一個、下一個的關系。
清晰明確
動效可以清晰地表明各種數據塊中間的邏輯結構，即使在數據高度飽和的情況下也能使一切從觀感上有組織性。
添加了圖層
在網站制作過程中加上特效，每個元素都在用戶滾動頁面或者是鼠標經過的地方有動態效果，就像在平面層上多出了一個動態層，這樣看起來更加有層次感。
我想借此專欄發布的內容幫助那些正在入坑前端的家人們，同時作為我以后復習的筆記，希望我們可以互相幫助，共同加油！！！
1.鼠標懸停圖片縮小文字出現
?代碼：
<!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>鼠標懸停圖片縮小文字出現</title><style>*{/* 初始化 */margin: 0;padding: 0; } body{/* 100%窗口高度 */height: 100vh;/* 彈性布局 水平+垂直居中 */display: flex;justify-content: center;align-items: center;/* 漸變背景 */background: linear-gradient(200deg,#517fa4,#243949); } .card{/* 相對定位 */position: relative;width: 300px;height: 450px;margin: 20px;background-color: #758a99;border-radius: 20px;/* 溢出隱藏 */overflow: hidden;/* 彈性布局 */display: flex;/* 元素縱向排列 */flex-direction: column;/* 居中 */align-items: center;color: #fff;/* 陰影 */box-shadow: 0 0 30px rgba(0,0,0,0.5);/* 不讓其被擠壓 */flex-shrink: 0; } .card .photo img{width: 100%;height: 100%;/* 保持原有尺寸比例，裁切長邊 */object-fit: cover; } /* 默認大圖 */ .card .photo{/* 絕對定位 */position: absolute;top: 0;width: 100%;height: 100%;border-radius: 0%;overflow: hidden;/* 動畫過渡 */transition: 0.5s; } /* 鼠標移入變小圖 */ .card:hover .photo{top: 30px;width: 120px;height: 120px;border-radius: 50%;box-shadow: 0 0 20px rgba(0,0,0,0.8); } /* 這里加個黑色到透明的漸變背景，可以更好的看清楚名字 */ .card .photo::before{content: "";position: absolute;width: 100%;height: 100%;background: linear-gradient(to bottom,transparent 50%,#222); } .card h1{position: absolute;top: 370px;transition: 0.5s; } .card:hover h1{top: 170px; } .card h2{margin-top: 220px;width: 80%;border-bottom: 1px solid rgba(235, 23, 23, 0.3);font-size: 20px;text-align: center;margin-bottom: 20px;padding-bottom: 20px; } .card p{width: 90%;text-indent: 32px;font-size: 16px;margin-bottom: 15px;line-height: 30px; } .card a{font-size: 14px;color: rgba(255,255,255,0.8);text-decoration: none;border: 1px solid rgba(247, 4, 4, 0.5);padding: 8px 32px;border-radius: 8px; } .card a:hover{color: #fff;background-color: rgba(255,255,255,0.2); }</style> </head><body><div class="card"><div class="photo"><img src="a.jpg" alt=""></div><h1>艾斯</h1><h2>“火拳”艾斯</h2><p>波特卡斯·D·艾斯，日本漫畫《航海王》及其衍生作品中的角色。薩博與路飛的結義兄弟。</p><a href="#">了解更多</a></div><div class="card"><div class="photo"><img src="s.jpg" alt=""></div><h1>薩博</h1><h2>革命軍的二把手</h2><p>薩博，日本漫畫《航海王》及其衍生作品中的角色。是路飛與艾斯的結義兄弟。</p><a href="#">了解更多</a></div><div class="card"><div class="photo"><img src="l.jpg" alt=""></div><h1>路飛</h1><h2>草帽小子</h2><p>蒙奇·D·路飛，日本漫畫《航海王》及其衍生作品中的男主角。是草帽海賊團的船長。</p><a href="#">了解更多</a></div> </body></html>2.跳跳糖版
代碼：
<!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>跳跳糖版</title><style>*{/* 初始化 */margin: 0;padding: 0; } body{/* 100%窗口高度 */height: 100vh;/* 彈性布局 水平+垂直居中 */display: flex;justify-content: center;align-items: center;background-color: #333; } .loader{width: 650px;height: 200px;/* 相對定位 */position: relative; } /* 小球 */ .loader span.ball{width: 50px;height: 50px;border-radius: 50%;background-color: lightseagreen;/* 絕對定位 */position: absolute;/* 通過var函數調用自定義屬性--i，計算出每個小球的位置 */left: calc(var(--i) * 100px);/* 執行動畫：動畫名 時長 線性的 無限次播放 利用變量讓小球的運動拉開時間 */animation: jump 2s linear infinite calc(var(--i) * 0.3s); } /* 小球陰影 */ .loader span.shadow{width: 50px;height: 25px;border-radius: 50%;background-color: #000;position: absolute;left: calc(var(--i) * 100px);bottom: -12.5px;z-index: -1;animation: shadow 2s linear infinite calc(var(--i) * 0.3s); }/* 定義動畫 */ /* 小球跳動的動畫 */ @keyframes jump {0%,100%{bottom: 150px;}40%,60%{bottom: 0;height: 50px;}50%{height: 25px;/* 加個顏色濾鏡，改變小球的顏色 *//* 可以設置不同的度數來改變顏色 */filter: hue-rotate(180deg);} } /* 小球陰影的變化 */ @keyframes shadow {0%,100%{transform: scale(2);opacity: 0.1;/* 模糊濾鏡 */filter: blur(5px);}40%,60%{transform: scale(1);opacity: 1;filter: blur(2px);} }</style> </head><body><div class="loader"><!-- --i為自定義屬性，可通過var函數對其調用 --><span class="ball" style="--i:1;"></span><span class="shadow" style="--i:1;"></span><span class="ball" style="--i:2;"></span><span class="shadow" style="--i:2;"></span><span class="ball" style="--i:3;"></span><span class="shadow" style="--i:3;"></span><span class="ball" style="--i:4;"></span><span class="shadow" style="--i:4;"></span><span class="ball" style="--i:5;"></span><span class="shadow" style="--i:5;"></span></div> </body></html>3.實時時間背景效果
代碼：
<!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>實時時間背景</title><style>/* 引用網絡字體（Kanit字體） */ @import url("http://fonts.googleapis.com/css?family=Kanit");*{/* 初始化 */margin: 0;padding: 0; } body{/* 100%窗口高度 */height: 100vh;/* 彈性布局 水平+垂直居中 */display: flex;justify-content: center;align-items: center;/* 背景色：白桃粉 */background-color: #eacccc;/* 禁止文本被選取 */user-select: none; } .clock{display: flex; } .clock p{width: 95px;font-size: 150px;color: rgb(0, 109, 252);text-align: center;/* 設置字體 */font-family: "Kanit";font-weight: 900;/* 文字陰影 實現3D效果 */text-shadow: 0 1px 0 #deafaf,0 2px 0 #bda8a8,0 3px 0 #d8a1a1,0 4px 0 #d59999,0 5px 0 #d29292,0 6px 0 #cf8b8b,0 7px 0 #cc8484,0 8px 0 #c97d7d,0 0 5px rgba(231,156,156,0.05),0 -1px 3px rgba(231,156,156,0.2),0 9px 9px rgba(231,156,156,0.3),0 12px 12px rgba(231,156,156,0.3),0 15px 15px rgba(231,156,156,0.3); }</style><script type="text/javascript">function myTime(){let time=new Date();let hh=time.getHours(); //時let mm=time.getMinutes(); //分let ss=time.getSeconds(); //秒// Math.floor() 向下取整document.getElementById("1").innerText=Math.floor(hh/10);document.getElementById("2").innerText=hh%10;document.getElementById("4").innerText=Math.floor(mm/10);document.getElementById("5").innerText=mm%10;document.getElementById("7").innerText=Math.floor(ss/10);document.getElementById("8").innerText=ss%10;}// 一秒執行一次setInterval(myTime,1000);</script> </head><body><div class="clock"><p id="1">0</p><p id="2">0</p><p id="3">:</p><p id="4">0</p><p id="5">0</p><p id="6">:</p><p id="7">0</p><p id="8">0</p></div> </body></html>4.滑動簡約特效
?代碼：
<!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>滑動簡約特效</title><style>*{/* 初始化 */margin: 0;padding: 0; } body{/* 100%窗口高度 */height: 100vh;/* 彈性布局 水平+垂直居中 */display: flex;justify-content: center;align-items: center;background-color: #2b2b2b; } .container{/* 彈性布局 縱向排列 */display: flex;flex-direction: column; } .container label{/* 相對定位 */position: relative;margin: 5px 0;cursor: pointer; } .container label span{position: relative;display: block;width: 80px;height: 40px;background-color: #222;border-radius: 40px;/* 內陰影 */box-shadow: inset 0 2px 15px rgba(0,0,0,0.2),inset 0 2px 2px rgba(0,0,0,0.2),inset 0 -1px 1px rgba(0,0,0,0.2); } /* 滑塊 */ .container label .indicator{/* 絕對定位 */position: absolute;left: 0;top: 0;width: 40px;height: 40px;/* 漸變背景 */background: linear-gradient(to bottom,#444,#222);border-radius: 50%;/* 陰影 */box-shadow: 0 2px 5px rgba(0,0,0,0.5),inset 0 1px 1px rgba(255,255,255,0.1);/* 縮小 */transform: scale(0.9);/* 動畫過渡 */transition: 0.5s; } /* 滑塊中心的發光點 */ .container label .indicator::before{content: "";width: 5px;height: 5px;/* 絕對定位 居中 */position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: #f00;border-radius: 50%;/* 陰影制造發光效果 */box-shadow: 0 0 2px #f00,0 0 5px #f00,0 0 10px #f00,0 0 15px #f00,0 0 20px #f00,0 0 25px #f00,0 0 30px #f00,0 0 35px #f00;transition: 0.5s; } /* 勾選復選框后滑塊的變化 */ .container label input:checked ~ .indicator{left: 40px; } .container label input:checked ~ .indicator::before{background-color: #0f0;box-shadow: 0 0 2px #0f0,0 0 5px #0f0,0 0 10px #0f0,0 0 15px #0f0,0 0 20px #0f0,0 0 25px #0f0,0 0 30px #0f0,0 0 35px #0f0; }</style> </head><body><div class="container"><label><input type="checkbox" hidden><span></span><i class="indicator"></i></label><label><input type="checkbox" hidden checked><span></span><i class="indicator"></i></label></div> </body></html>5.單圈環繞流光加載
?代碼：
<!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>單圈環繞流光</title><style>*{/* 初始化 */margin: 0;padding: 0; } body{/* 100%窗口高度 */height: 100vh;/* 彈性布局 水平+垂直居中 */display: flex;justify-content: center;align-items: center;background-color: #000; } .loader{/* 相對定位 */position: relative;width: 240px;height: 240px;/* 漸變背景 金色到透明 */background: linear-gradient(gold,transparent 40%);border-radius: 50%;/* 執行動畫：動畫名 時長 線性 無限次播放 */animation: roll 1s linear infinite; } /* 遮罩層 */ .loader::before{content: "";width: calc(100% - 20px);height: calc(100% - 20px);background-color: #000;/* 絕對定位 居中 */position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);border-radius: 50%; } .loader::after{content: "";position: absolute;width: 100%;height: 100%;background: linear-gradient(gold,transparent 40%);border-radius: 50%;/* 模糊濾鏡 */filter: blur(30px);z-index: -1; }/* 定義動畫 */ @keyframes roll{to{transform: rotateZ(360deg);/* 轉動時再加個顏色變化 *//* 顏色濾鏡 通過設置度數可改變顏色 */filter: hue-rotate(360deg);} }</style> </head><body><div class="loader"></div> </body></html>總結
以上是生活随笔為你收集整理的每日分享html之1个卡片选择、2个加载、1个背景、1个开关的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学习笔记14--其他自动驾驶开发平台
- 下一篇： Echarts中tooltip显示的数据