css布局实现一个机械铅笔效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个机械铅笔效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
height: 98vh;
display: flex;
justify-content: center;
align-items: center;
position: static;
z-index: 0;
}
:root {
--speed: 20s;
}
body * {
position: absolute;
content: "";
z-index: 1;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
height: 500px;
width: 900px;
/* background-color: #f3bcbc42; */
z-index: 1;
}
.mid {
height: 30px;
width: 300px;
background-color: #414141;
position: absolute;
top: 0;
left: -230px;
z-index: 1;
overflow: hidden;
}
.mid::after {
content: "";
width: 10px;
height: inherit;
background-color: #d1d1d1;
top: 0;
right: 0;
position: absolute;
}
.mid::before {
content: "";
z-index: 2;
width: 10px;
height: 3px;
background-color: #4b4b4b;
top: 25px;
right: 0;
position: absolute;
filter: blur(1px);
}
.color-effect {
height: 30px;
width: 290px;
background: linear-gradient(to bottom, #ecffeffb, transparent);
filter: blur(3px);
}
.shine-1 {
height: 2px;
width: 320px;
background-color: rgb(41, 41, 41);
filter: blur(1.4px);
top: 2px;
z-index: 1;
}
.shine-2 {
height: 2px;
width: inherit;
background-color: #ffffff;
top: 3px;
filter: blur(12px);
z-index: 1;
}
.shine-3 {
height: 9px;
width: inherit;
background-color: #e9e9e9;
top: 12px;
filter.........完整代码请登录后点击上方下载按钮下载查看
网友评论0