一、多个边框阴影
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background-color: greenyellow;margin: 200px auto;border-radius: 50%;box-shadow: 0 0 0px 5px red,0 0 0px 10px orange,0 0 0px 15px yellow;}</style>
</head>
<body><div></div>
</body>
</html>
二、文字阴影
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 1000px;height: 300px;margin: 200px auto;}h1{font-size: 100px;margin-left: 200px;text-shadow: 100px 100px 10px rgba(160, 15, 15, 0.7),200px 200px 10px blue,300px 300px 10px pink;transition: all 1s;}h1:hover{text-shadow: none;}</style>
</head>
<body><div><h1>text-shadow</h1></div>
</body>
</html>
三、线性渐变
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 300px;margin: 200px auto;/*渐变方向*//* background-image: linear-gradient(to bottom right ,red,rgb(81, 81, 180)); *//* background-image: linear-gradient(-30deg,red,rgb(81, 81, 180)); *//* 渐变范围 *//* background-image:linear-gradient(to right,yellow 0%,green 50%, pink 100%) *//* 重复渐变 */background-image:repeating-linear-gradient(to top right,red 0%,blue 30%,red 50%);}</style>
</head>
<body><div></div>
</body>
</html>
四、星空渐变
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html{height: 100%;}body{transition: all 1s;margin: 0;height: 100%;background-repeat: no-repeat;background-size: 100% 100%;/*星空*//* background-image:linear-gradient(rgb(82, 4, 82),rgb(116, 78, 116));*//* 黎明 *//* background-image: linear-gradient(orange 0% ,white 20%, blue 40%, black 85%); */background-image: linear-gradient(rgb(219, 210, 193) 0% ,white 30%, rgb(169, 204, 221) 90%, rgb(115, 177, 228) 100%);}body:hover{background-size:100% 300%;}img{position: absolute;top: 0;left: 0;bottom: -400px;right: 0;margin: auto;}</style>
</head>
<body><img src="image/xkbg.png" alt="">
</body>
</html>
五、倒影
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html{height: 100%;}body{transition: all 1s;margin: 0;height: 100%;background-repeat: no-repeat;background-size: 100% 100%;background-image: linear-gradient(lightblue 0%,rgb(253, 253, 251) 20% ,white 30%, rgb(169, 204, 221) 90%, rgb(115, 177, 228) 100%);}img{position: absolute;top: 0;left: 0;bottom: -200px;right: 0;margin: auto;-webkit-box-reflect: below 0px linear-gradient(transparent 40%, white 100% );}div{width: 100px;height: 100px;border-radius: 50%;position: absolute;top: 100px;left: 100px;background-color:rgb(228, 124, 40);transition: all 2s;}body:hover div{box-shadow: 0 0 100px 200px rgb(211, 172, 46);}</style>
</head>
<body><div></div><img src="image/xkbg.png" alt="">
</body>
</html>
六、径向渐变
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 300px;margin: 200px auto;/* background-image:radial-gradient(red,blue); *//* 圆 *//* background-image:radial-gradient(circle,red,blue); *//* 中心位置 *//* background-image:radial-gradient(circle at bottom right,red,blue); *//* 像素*//* background-image:radial-gradient(at 150px 150px,red,blue); *//* 百分比*//* background-image:radial-gradient(at 20% 20%,red,blue); *//* background-image:radial-gradient(at 60px 100px,red,blue); *//* 大小 *//* background-image:radial-gradient(150px 300px,red,blue); *//* 大小+中心点 *//* background-image:radial-gradient(400px 300px at top left,red,blue); *//* 色标 *//* background-image:radial-gradient( at top left,red 20%,blue 50%); *//* background-image:radial-gradient( at center center,red 20%,blue 50%,yellow 70%,pink 100%); *//* 黑洞 *//* background-image:radial-gradient( at center center,black 50%,rgb(235, 157, 14)); *//* background-image:radial-gradient(200px 200px at center bottom,white 30%,red 35%,orange 40%,yellow 45%,green 50%,cyan 55%,blue 60%,purple 65% ,white 70%); *//* 调整大小 */background-image:radial-gradient(closest-side at 20% 30%,red,blue);background-image:radial-gradient(farthest-side at 20% 30%,red,blue);background-image:radial-gradient(closest-corner at 20% 30%,red,blue);background-image:radial-gradient(farthest-corner at 20% 30%,red,blue);}</style>
</head>
<body><div></div>
</body>
</html>
七、背景剪切
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 300px;height: 300px;margin: 200px auto;background-image: linear-gradient(red,blue);background-repeat: no-repeat;border:20px solid red;padding:30px;/* background-clip: padding-box; */-webkit-background-clip: text;font-size: 100px;font-weight: bold;text-align: center;color: rgba(0,0,0,0);background-size: 100% 100%;transition: all 1s;}div:hover{background-size: 100% 150%;}</style>
</head>
<body><div>蜗牛学院</div>
</body>
</html>
八、滑动解锁
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin: 0;background-color: darkslategray;}h1{height: 100px;font-size: 70px;text-align: center;line-height: 100px;/* background-size: 0% 0%; */background-color: rgba(0, 0, 0,0.5);transition: all 1s;-webkit-background-clip: text;color: rgba(0,0,0,0.3);background-image: repeating-linear-gradient(100deg,rgba(0, 0, 0,0.5) 0%,white 3%,rgba(0, 0, 0,0.5) 3%,rgba(0, 0, 0,0.5) 30%);}h1:hover{background-position: 500px 0;}</style>
</head>
<body><h1>滑动解锁</h1>
</body>
</html>
九、内部阴影
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;box-shadow: 0 0 10px 10px #000 inset;margin:200px auto;}</style>
</head>
<body><div></div>
</body>
</html>
十、transition
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;transition: margin-left 5s linear 3s;/* transition-delay: 1s;transition-timing-function: linear; */}div:hover{/* background-color: blue; */margin-left: 300px;}#ease-box{transition-timing-function: ease;}button,input{width: 200px;height: 50px;line-height: 50px;border:1px solid #ccc;outline: none;}button{background-image: linear-gradient(100deg, rgb(205, 230, 238) ,rgb(4, 188, 250) );background-repeat: no-repeat;text-align: center;color: white;background-size: 100% 100%;transition:all .5s;font-size: 24px;cursor: pointer;}input{height: 30px;width: 300px;transition:all .5s;}input:focus{box-shadow: 0 0 10px 0 lightblue;border:1px solid lightblue;width: 350px;height: 35px;}button:hover{/* width: 100px;height: 100px;border-radius: 50%; *//* background-size: 180% 100%; */background-position-x:200px;}</style>
</head>
<body><!-- <div></div><div id="ease-box"></div> --><input type="text"> <br><button>登录</button></body>
</html>
十一、animation
1、渐变图形
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {width: 200px;height: 200px;background-color: red;border-radius: 0px;}/* 定义动画，向右移动200px *//* 1. 定义动画 */@keyframes moveRight {0% {margin-left: 0px; }100% {margin-left: 200px;background-color: blue;border-radius: 50%;}}/* 2 执行 */div{animation: moveRight 2s ;/* 保留结束状态 */animation-fill-mode: forwards;}</style></head><body><div></div></body>
</html>
2、渐变按钮
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>button{width: 200px;height: 50px;line-height: 50px;border:1px solid #ccc;outline: none;}button{background-image: linear-gradient(100deg, rgb(205, 230, 238) ,rgb(4, 188, 250) );text-align: center;color: white;background-size: 100% 100%;transition:all .5s;font-size: 24px;cursor: pointer;animation: buttonAnimation 3s linear infinite;}/* */@keyframes buttonAnimation {0%{background-position:0px 0px;}100%{background-position:200px 0px;}}</style>
</head>
<body><button>登录</button></body>
</html>
3、多段animation
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>div {width: 200px;height: 200px;background-color: red;border-radius: 0px;border-radius: 50%;}/* 定义动画.绕页面一周 *//* 1. 定义动画 */@keyframes moveRight {0%,100% {margin-left: 0px; margin-top: 0px; }25%{margin-left: 1000px;margin-top: 0px;}50%{margin-top: 400px;margin-left: 1000px;background-color: blue;}75%{margin-left: 0px;margin-top: 400px;}}/* 2 执行 */div{animation: moveRight 5s ;}</style></head><body><div></div></body>
</html>
4、云雾缭绕
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-image: url("image/photo.jpg");background-repeat: no-repeat;background-size: cover;overflow: hidden;margin: 0;}body,html{height: 100%;}div{position: absolute;top: 0;left: 0;width: 3300px;height: 100%;background-size: contain;background-repeat:repeat-x;animation:move 20s infinite linear;}.fog1{background-image: url("image/fog-1.png");}.fog2{background-image: url("image/fog-2.png");}@keyframes move {0%{left: 0px;}100%{left: -1580px;}}</style>
</head>
<body><div class="fog1"></div><div class="fog2"></div>
</body>
</html>
5、translate
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;/* 向右移动100px *//* transform: translate(100px,100px); *//* transform: translate(100px); *//* transform: translateY(100px); */transform: translateX(100px);/* margin-left: 100px;margin-top: 100px; */}</style>
</head>
<body><div></div><p>这是一个p标签</p>
</body>
</html>
6、rotate
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;background-color: red;transform: translate(100px) rotate(45deg) ;line-height: 200px;text-align: center;/* transition: all 5s; */}/* div:hover{transform: rotate(36000deg);border-radius: 50%;} */</style>
</head>
<body><div>
这是div中 内容</div>
</body>
</html>
7、scale
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{text-align: center;}div{width: 200px;height: 200px;background-color: red;margin: 200px auto;line-height: 200px;text-align: center;transition: all 5s;/* transform: scale(2); */transform: scale(0.5);}input{width: 200px;height: 30px;margin: 0 auto;transition: all 3s;}div:hover{transform: scale(2);}input:focus{transform: scale(2);/* width: 400px;height: 60px; */}</style>
</head>
<body><div>
这是div中 内容</div><input type="text">
</body>
</html>
8、图片集
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box{width: 500px;height: 600px;border-radius: 15px;border: 1px solid #cccccc;/* padding:20px; */margin: 100px auto;position: relative;}#box img{width: 100%;}#box div{width: 250px;height: 250px;padding:20px;border: 1px solid #cccccc;border-radius: 5px;position: absolute;transition: all 1s;box-sizing: border-box;}.item1{top:254px;left: 200px;transform: rotate(45deg);}.item2{transform: rotate(-45deg) translate(100px,130px);}.item3{top:200px;left: 50px;transform: rotate(145deg);}#box .item1:hover{width: 500px;height: auto;top: 0px;left: 0;transform: rotate(0deg) ;z-index: 1;}</style>
</head>
<body><div id="box"><div class="item1"><img src="image/flo1.jpg" alt=""></div><div class="item2"><img src="image/flo4.jpg" alt=""></div><div class="item3"><img src="image/flo5.jpg" alt=""></div></div>
</body>
</html>
9、基点演示
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>transform-origin</title><style>html,body {display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 0 auto;height: 100%;width: 100%;}.outer {/**定义子元素水平居中**/display:flex;justify-content:center;width: 100px;height: 100px;background-color: #6a5acd8c;position:relative;}/**竖向辅助线**/.vertical-line{position:absolute;left:50%;transform:translateX(-50%);height:100%;width:1px;background:#000;}/**横向辅助线**/.horizontal-line{position:absolute;top:50%;transform:translateY(-50%);width:100%;height:1px;background:#000;}.inner {width:20px;height:20px;/* border-radius:50%; */background-color: #6a5acdeb;/* transform-origin:50% 50px ;*50px为环绕半径 */animation:an-circle 3s linear infinite;}@keyframes an-circle {to {transform: rotate(360deg);}}</style>
</head>
<body><div class="outer"><div class="horizontal-line"></div><div class="vertical-line"></div><div class="inner"></div></div><br/><p>圆周环绕动画</p>
</body>
</html>
今天的分享就到这里了
🌈本篇博客的内容【网页核心页面设计】已经结束。
🌈若对你有些许帮助，可以点赞、关注、评论支持下博主，你的支持将是我前进路上最大的动力。
