2-1汉克狗
来源：2-1 汉克狗头部轮廓和耳朵
soso_crazy
2019-02-18 11:58:41
:root {
--bg: rgb(249, 249, 246);
--hl: rgb(27, 47, 144);
--t: 2s;
}
1.为什么要放在：root下？
2.这些自定义的属性的写法有什么要求，需要怎么引用？
.chin {left: 50%; transform: translate(-50%, 0); width: 104px; height: 36px; position: absolute; background: var(--bg); z-index: 1; border-radius: 50% / 0 0 36px 36px; top: 41px;}3.为什么border-radius有两种值？border-radius的取值是怎样计算出来的？
.ear {animation: rotate var(--t) ease-out infinite; position: absolute; left: 50%; margin-left: -38px; top: 14px; z-index: 0; background-color: var(--hl); width: 16px; height: 70px; border-radius: 50%;} .ear.right {animation: rotate-right var(--t) ease-out infinite; transform: scale(-1, 1); margin-left: 22px;}
4.两只耳朵的transform编写有顺序要求吗？
1回答
-
好帮手慕星星
2019-02-18
你好，
1、:root 选择器匹配文档根元素。在根元素下定义属性，使用的时候调用即可。
2、自定义属性是带有前缀--的属性名，可以通过 var 函数在全文档范围内使用。例如：
效果：
3、border-radius
语法：border-radius: 1-4 length|% / 1-4 length|%;
（1）如果 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同
（2）如果属性值中有/分隔，是细分了垂直方向和水平方向的情况。
例如：
效果：
视频中是根据效果来调试border-radius的值。
4、两只耳朵的transform: translate(-42px, 0) rotate(30deg);值顺序是有关系的，因为平移和旋转都会改变原始坐标的位置，所以换顺序之后需要进行调整。
祝学习愉快！
0
相似问题