div+css布局实现圣诞节装饰图案灯笼效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现圣诞节装饰图案灯笼效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
:root{
--gold: hsl(30 80% 60%);
--clr1: hsl(0 100% 20%);
--clr2: hsl(0 100% 40%);
}
.ornament{
--width: 400px;
--pattern-size: calc(var(--width) / 3);
--crown-color: var(--gold);
--chord-color: var(--gold);
--pattern-color1: var(--clr1);
--pattern-color2: var(--clr2);
--pattern-color3: var(--gold);
width: var(--width);
}
.ornament > .crown{
width: 20%;
aspect-ratio: 2/1;
margin-inline: auto;
background-size: 50% 100%;
background-image: conic-gradie.........完整代码请登录后点击上方下载按钮下载查看
网友评论0