前端CSS魔法
雪天web
共 36201字，需浏览 73分钟
· 2024-04-10
本文推荐一些实用且有趣的CSS片段或网站
01 国旗头像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
position: relative;
margin: auto;
width: 200px;
height: 200px;
background: url('https://img0.baidu.com/it/u=3435975908,2384326966&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500') no-repeat;
background-size: cover;
}
div::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('https://img1.baidu.com/it/u=331200533,2965705563&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333') no-repeat;
background-size: cover;
mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
核心代码：
mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);
02 css多边形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(255, 255, 255);
}
.box {
background-color: #00aa7f;
color: azure;
width: 200px;
height: 225px;
text-align: center;
line-height: 225px;
clip-path: polygon(50% 0%,
100% 25%,
100% 75%,
50% 100%,
0% 75%,
0% 25%);
}
.box2 {
margin-left: 10px;
background-color: #00aa7f;
color: azure;
width: 200px;
height: 225px;
text-align: center;
line-height: 225px;
clip-path: polygon(50% 0%,
25% 100%,
100% 100%);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
核心代码：
clip-path: polygon(50% 0%,25% 100%,100% 100%);
关于多边形-推荐一个网站，可以复制对应样式：
https://bennettfeely.com/clippy/
03 毛玻璃
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: url("https://img0.baidu.com/it/u=2934556745,713129916&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800") no-repeat;
background-size: cover;
}
.box {
width: 300px;
height: 225px;
display: flex;
justify-content: center;
align-items: center;
background: rgba( 255, 255, 255, 0.3 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 13.5px );
-webkit-backdrop-filter: blur( 13.5px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
}
img{
width: 120px;
height: 120px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">
<img src="https://img2.baidu.com/it/u=3453764062,377256032&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
</div>
</body>
</html>
关于毛玻璃-推荐一个网站，可以复制对应样式：
https://hype4.academy/tools/glassmorphism-generator
04 生成svg/png背景
https://app.haikei.app/
05 矢量背景生成
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
html {
--s: 30px;
/* control the size */
--_c: #5E9FA3;
background:
conic-gradient(at 50% calc(100%/6), var(--_c) 60deg, #0000 0),
conic-gradient(at calc(100%/6) 50%, #0000 240deg, var(--_c) 0),
conic-gradient(from 180deg at calc(100%/6) calc(500%/6), var(--_c) 60deg, #0000 0),
conic-gradient(from 180deg at calc(500%/6), #0000 240deg, var(--_c) 0) calc(4*.866*var(--s)) 0,
repeating-linear-gradient(-150deg, #B05574 0 calc(100%/6), #0000 0 50%),
repeating-linear-gradient(-30deg, #B39C82 0 calc(100%/6), #DCD1B4 0 50%);
background-size: calc(6*.866*var(--s)) calc(3*var(--s))
}
</style>
</head>
<body>
</body>
</html>
网站链接：
https://css-pattern.com/
06 css动态背景生成
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
@keyframes move {
100% {
transform: translate3d(0, 0, 1px) rotate(360deg);
}
}
.background {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: #3E1E68;
overflow: hidden;
}
.background span {
width: 20vmin;
height: 20vmin;
border-radius: 20vmin;
backface-visibility: hidden;
position: absolute;
animation: move;
animation-duration: 45;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.background span:nth-child(0) {
color: #FFACAC;
top: 90%;
left: 47%;
animation-duration: 8s;
animation-delay: -17s;
transform-origin: 2vw 17vh;
box-shadow: -40vmin 0 5.494502440636581vmin currentColor;
}
.background span:nth-child(1) {
color: #FFACAC;
top: 31%;
left: 5%;
animation-duration: 40s;
animation-delay: -14s;
transform-origin: -5vw -14vh;
box-shadow: -40vmin 0 5.192195104974926vmin currentColor;
}
.background span:nth-child(2) {
color: #FFACAC;
top: 18%;
left: 62%;
animation-duration: 20s;
animation-delay: -5s;
transform-origin: -18vw -12vh;
box-shadow: 40vmin 0 5.72205756381233vmin currentColor;
}
.background span:nth-child(3) {
color: #FFACAC;
top: 71%;
left: 45%;
animation-duration: 30s;
animation-delay: -2s;
transform-origin: -4vw -20vh;
box-shadow: -40vmin 0 5.303503038071778vmin currentColor;
}
.background span:nth-child(4) {
color: #E45A84;
top: 90%;
left: 38%;
animation-duration: 15s;
animation-delay: -48s;
transform-origin: 7vw -9vh;
box-shadow: -40vmin 0 5.882238754040052vmin currentColor;
}
.background span:nth-child(5) {
color: #583C87;
top: 34%;
left: 32%;
animation-duration: 30s;
animation-delay: -36s;
transform-origin: -6vw -15vh;
box-shadow: 40vmin 0 5.183333217256063vmin currentColor;
}
.background span:nth-child(6) {
color: #583C87;
top: 25%;
left: 41%;
animation-duration: 21s;
animation-delay: -47s;
transform-origin: -10vw -5vh;
box-shadow: 40vmin 0 5.345257098222438vmin currentColor;
}
.background span:nth-child(7) {
color: #E45A84;
top: 16%;
left: 39%;
animation-duration: 30s;
animation-delay: -33s;
transform-origin: -15vw 3vh;
box-shadow: -40vmin 0 5.693872337330205vmin currentColor;
}
.background span:nth-child(8) {
color: #583C87;
top: 42%;
left: 55%;
animation-duration: 46s;
animation-delay: -50s;
transform-origin: -6vw 25vh;
box-shadow: 40vmin 0 5.588315610213253vmin currentColor;
}
.background span:nth-child(9) {
color: #E45A84;
top: 78%;
left: 25%;
animation-duration: 44s;
animation-delay: -21s;
transform-origin: -4vw -12vh;
box-shadow: -40vmin 0 5.82170170819547vmin currentColor;
}
.background span:nth-child(10) {
color: #E45A84;
top: 73%;
left: 77%;
animation-duration: 41s;
animation-delay: -40s;
transform-origin: 21vw -11vh;
box-shadow: -40vmin 0 5.838449416658446vmin currentColor;
}
.background span:nth-child(11) {
color: #E45A84;
top: 48%;
left: 81%;
animation-duration: 33s;
animation-delay: -42s;
transform-origin: 6vw 19vh;
box-shadow: 40vmin 0 5.848850560573668vmin currentColor;
}
.background span:nth-child(12) {
color: #E45A84;
top: 77%;
left: 7%;
animation-duration: 25s;
animation-delay: -1s;
transform-origin: 15vw 24vh;
box-shadow: -40vmin 0 5.800039290361969vmin currentColor;
}
.background span:nth-child(13) {
color: #E45A84;
top: 77%;
left: 38%;
animation-duration: 51s;
animation-delay: -40s;
transform-origin: -1vw -13vh;
box-shadow: -40vmin 0 5.876822672246133vmin currentColor;
}
.background span:nth-child(14) {
color: #583C87;
top: 58%;
left: 98%;
animation-duration: 7s;
animation-delay: -1s;
transform-origin: -19vw -20vh;
box-shadow: -40vmin 0 5.622075629639948vmin currentColor;
}
.background span:nth-child(15) {
color: #583C87;
top: 79%;
left: 31%;
animation-duration: 39s;
animation-delay: -46s;
transform-origin: 14vw 21vh;
box-shadow: 40vmin 0 5.022352355698978vmin currentColor;
}
.background span:nth-child(16) {
color: #E45A84;
top: 41%;
left: 74%;
animation-duration: 37s;
animation-delay: -4s;
transform-origin: -19vw 3vh;
box-shadow: 40vmin 0 5.049960684696969vmin currentColor;
}
.background span:nth-child(17) {
color: #583C87;
top: 56%;
left: 34%;
animation-duration: 26s;
animation-delay: -35s;
transform-origin: -16vw -7vh;
box-shadow: -40vmin 0 5.11253385954465vmin currentColor;
}
.background span:nth-child(18) {
color: #583C87;
top: 84%;
left: 2%;
animation-duration: 14s;
animation-delay: -39s;
transform-origin: -10vw -6vh;
box-shadow: 40vmin 0 5.903761483531039vmin currentColor;
}
.background span:nth-child(19) {
color: #E45A84;
top: 61%;
left: 39%;
animation-duration: 21s;
animation-delay: -36s;
transform-origin: 14vw 9vh;
box-shadow: 40vmin 0 5.448311817969409vmin currentColor;
}
.background span:nth-child(20) {
color: #E45A84;
top: 33%;
left: 5%;
animation-duration: 8s;
animation-delay: -7s;
transform-origin: 4vw 2vh;
box-shadow: 40vmin 0 5.013421190075091vmin currentColor;
}
</style>
</head>
<body>
<div class="background">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
地址：
https://wweb.dev/resources/animated-css-background-generator
07 css动态波浪
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
display: block;
background-color: #0e4166;
background-image: linear-gradient(to bottom, rgba(14, 65, 102, 0.86), #0e4166);
}
</style>
</head>
<body>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMax slice">
<defs>
<linearGradient id="bg">
<stop offset="0%" style="stop-color:rgba(130, 158, 249, 0.06)"></stop>
<stop offset="50%" style="stop-color:rgba(76, 190, 255, 0.6)"></stop>
<stop offset="100%" style="stop-color:rgba(115, 209, 72, 0.2)"></stop>
</linearGradient>
<path id="wave" fill="url(#bg)" d="M-363.852,502.589c0,0,236.988-41.997,505.475,0
s371.981,38.998,575.971,0s293.985-39.278,505.474,5.859s493.475,48.368,716.963-4.995v560.106H-363.852V502.589z" />
</defs>
<g>
<use xlink:href='#wave' opacity=".3">
<animateTransform
attributeName="transform"
attributeType="XML"
type="translate"
dur="10s"
calcMode="spline"
values="270 230; -334 180; 270 230"
keyTimes="0; .5; 1"
keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0"
repeatCount="indefinite" />
</use>
<use xlink:href='#wave' opacity=".6">
<animateTransform
attributeName="transform"
attributeType="XML"
type="translate"
dur="8s"
calcMode="spline"
values="-270 230;243 220;-270 230"
keyTimes="0; .6; 1"
keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0"
repeatCount="indefinite" />
</use>
<use xlink:href='#wave' opacty=".9">
<animateTransform
attributeName="transform"
attributeType="XML"
type="translate"
dur="6s"
calcMode="spline"
values="0 230;-140 200;0 230"
keyTimes="0; .4; 1"
keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0"
repeatCount="indefinite" />
</use>
</g>
</svg>
</body>
</body>
</html>
推荐网站：
https://animatedbackgrounds.me/
08 loading
09 和其他css语言相互转换
网站：
https://codebeautify.org/css-tools
如有帮助，点个在看可否
评论
密切移动前端 CSS 框架
密切（Mobile-Internet.css）源自“MobileInternetCSS”,是由切图网针对webapp移动前端自主开发的一款html5/css3框架，是国内移动前端框架发起者和领导者，它
密切移动前端 CSS 框架
0
前端面试css篇一
display: none;与visibility: hidden;的区别联系：它们都能让元素不可见区别:1、display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续...
jeckson
0