单位网站建设的重要性,盐城城南建设局一局网站,鞍山网站设计,xyz域名最终实现效果 demo放在最后了。。。。 问题一
怎么实现满屏气球#xff1f;简单理解就是多个气球的合并#xff0c;难道要写多个盒子吗#xff1f;确实是这样子#xff0c;但可以有更好的办法#xff0c;其实就是通过原生操作多个盒子生成#xff0c;所以只需要实现一个…最终实现效果 demo放在最后了。。。。 问题一
怎么实现满屏气球简单理解就是多个气球的合并难道要写多个盒子吗确实是这样子但可以有更好的办法其实就是通过原生操作多个盒子生成所以只需要实现一个颜色、大小、位置可自定义的气球即可。 问题二
如何实现一个气球 从图上我们可以找出四个点红气球、红气球上的白椭圆、捆绑气球、气球棒、气球口。我们真正渲染就两个盒子
设置气球包括气球、气球捆绑、气球棒通过两个盒子实现借助伪元素:before、:after在元素前后添加相关样式实现。
实现步骤
step1 定义气球的样式并在气球上添加白色椭圆形。
step2 定义气球棒和气球口。
step3 设置气球动画实现气球从下到上匀速移动就可以升空了。
step4 设置气球颜色、大小、位置变量。
step5 生成多个气球盒子将变量传入。 涉及的知识点
1、border-radius
border-radius 属性是一个简写属性用于设置四个 border-*-radius 属性 分别是以下组成 左上圆角半径border-top-left-radius 右上圆角半径border-top-right-radius 右下圆角半径border-bottom-right-radius 左下圆角半径border-bottom-left-radius
形式定义 初始值as each of the properties of the shorthand:border-top-left-radius: 0border-top-right-radius: 0border-bottom-right-radius: 0border-bottom-left-radius: 0 属性值个数为 1
border-radius: 40px;
它表示该元素的四个方向的圆角大小都是一样的。 属性值个数为 2
border-radius: 40px 10px;
第一个值表示左上角和右下角(对角)第二个值表示右上角和左下角(对角) 属性值个数为 3
border-radius: 40px 20px 10px;
第一个值表示左上角第二个值表示右上角和左下角(对角)第三个值表示右下角 属性值个数为 4
border-radius: 40px 30px 20px 10px;
分别代表左上角、右上角、右下角、左下角(顺时针方向) 在上述用法中每个圆角的“水平半径”与“垂直半径”都是相同的当然也可以分别设置。 完整形式语法 border-radius length-percentage [0,∞]{1,4} [ / length-percentage [0,∞]{1,4} ]? length-percentage length | percentage border-radius属性带了/符号第一组值表示“水平半径”第二组值表示“垂直半径”每组值同时可以设置 1 个到 4 个值规则与之前相同。 通过画一个来帮助更好的理解把
border-radius: 75px 75px 75px 75px/125px 125px 75px 75px; 异形图快捷生成https://9elements.github.io/fancy-border-radius/#50.100.40.32--. 2、calc函数
calc() 函数用于动态计算长度值。
需要注意的是运算符前后都需要保留一个空格例如width: calc(100% - 10px)
任何长度值都可以使用calc()函数进行计算
calc()函数支持 , -, *, / 运算
calc()函数使用标准的数学运算优先级规则
自动调整表单域的大小以适应其容器的大小
calc() 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间而不会在保持合适的外边距的同时因挤压超出其容器的边缘。 3、vmin、vmax
1vw、vh、vmin、vmax 是一种视窗单位也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗Viewport大小来决定的单位 1代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—换句话说是你的不包括工具栏和按钮的网页浏览器。
2具体描述如下 vw视窗宽度的百分比1vw 代表视窗的宽度为 1% vh视窗高度的百分比 vmin当前 vw 和 vh 中较小的一个值 vmax当前 vw 和 vh 中较大的一个值
3vmin、vmax 用处 做移动页面开发时如果使用 vw、wh 设置字体大小比如 5vw在竖屏和横屏状态下显示的字体大小是一样的。 4、Hsla函数
定义与用法
hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。
HSLA 即色调、饱和度、亮度、透明度英语Hue, Saturation, Lightness, Alpha 。 1色调hue 亮度的单位可以是度、弧度、梯度或者转角如果传参时不带单位则默认为度。根据色轮也叫色盘、色彩三原色的色环定义红色为0度其他的颜色均匀分布在圆的周围比如绿色是120度、蓝色是240度等等。 有时我们可以使用负的角度值来定义色调因为圆的角度的周期性因此-120度-120360240度。 如果使用大于360度的色调参数则等同于其减去N个360度得出的小于360度的角度值如480度480-360120度。 2饱和度saturation 饱和度的范围为0%-100%0%代表完全不饱和100%代表完全饱和。
3亮度lightness 亮度值的取值范围为0%-100%亮度为0%代表黑色亮度为50%时代表正常100%时为白色。
4透明度 可选参数alpha 透明度的取值范围为0-1可以是用小数形式也可使用百分比形式1对应100%代表完全不透明0对应0%代表完全透明。
⚠️需要注意的是饱和度和亮度不同于透明度可用小数表示饱和度和亮度参数必须使用百分比形式如不可用0.5表示50%虽然他们在数值上是相等的。 hsl()函数和hsla()函数的使用
hsl()函数经常和conic-gradient()函数一起使用因为两者都是处理角度。如我们使用CSS制作一个色相环效果代码如下
.box {width: 200px;height: 200px;background: conic-gradient(hsl(0, 100%, 50%), hsl(45, 100%, 50%), hsl(90, 100%, 50%), hsl(135, 100%, 50%), hsl(180, 100%, 50%), hsl(225, 100%, 50%), hsl(270, 100%, 50%), hsl(315, 100%, 50%), hsl(360, 100%, 50%));clip-path: circle(closest-side);
}
效果如下 5、css全局变量和局部变量
(1设置全局变量
CSS全局变量的声明是在变量名称前加两个中横线--。
body {--Color: #2C51CD;--BackGround: #B4D4FD;
}:root {--Color: #2C51CD;--BackGround: #B4D4FD;
}
上述代码中body选择器中声明了Color和BackGround两个变量。而使用--是因为$被Sass占用了被Less占用了。
⚠️变量的声明对大小写敏感。如Color和color表示两个不同的变量。
2设置局部变量
其实设置局部变量和全局变量的方式大致一致具体操作如下 a.如果我们需要在一个id为box的容器内声明一个局部变量让其在整个box容器内都是可调用的我们可以如下操作
#box{ --cssname : value;
}//此变量的作用域仅限于在#box容器的任何子元素调用方法如下#box .child{ color : var(--cssname)
} b.局部变量定义在元素标签的行内式 style 中表示只作用于当前元素标签。
div classtext style--font-size:20pxvar 函数/div 6、var函数
1读取变量使用var()函数来读取变量。
p { background: var(--Color);
}
2var()函数还可以使用第二个参数表示变量的默认值。如果该变量不存在就会使用这个默认值。
p { background: var(--Color, #2C51CD);
}
3第二个参数不处理内部的逗号或空格都视作参数的一部分。
p {font-family: var(--fontF, Roboto, Helvetica);margin: var(--Margins, 15px 20px 25px);
}
4var()函数还可以用在变量声明中
body { --Color: #2C51CD; --BackGround: var(--Color);
}
5变量只能作为属性值不能作为属性名
6变量值的类型 a.如果变量值是字符串则可以与其他字符串拼接
:root { --Hi: hello;--Name: var(--Hi),world;
} b.如果是数值则不可以拼接
:root { --pSizeVal: 20; --pSize: var(--pSizeVal)px; //无效
} 但可以通过calc()函数将他们拼接起来
:root {--pSizeVal: 20; --pSize: calc(var(--pSizeVal)*1px);
} c.如果变量值带单位则不能写成字符串形式
:root { --pSize: 20px; margin-top: var(--pSize); //无效
}
:root { --pSize: 20px; margin-top: var(--pSize); //有效
}
代码地址
https://github.com/14130110048/balloon
