奥运五环、旋转立方体

455 阅读1分钟

圆角

百分之50的时候为圆环 如果设置圆角 则根据圆的程度设置像素

 <border-radius: 50%>

伪元素::after 、 z-index层级

此处引用css3中奥运五环的案例

  • 在元素后(外部插入)修改样式,首先得先让内容清空,如要设置新的样式 或者令其=新的标签名xxx的
  • 其次如涉及到设置宽高则需要根据具体情况设置为块元素或者行级块元素
  • z-index:1 比原先元素层级高 可以覆盖在其表面
  • 只有在定位的前提下才可以设置层级

关于覆盖层的一些记录

  • 不在相同处设置border的原因是 自己想(原本只需要再盖一层而已,设置了就是两层了)

关于伪元素的定位问题

  • 因为伪元素是在一个元素的内部设置是在边框内如图:

所以若想使其正好覆盖则需要通过定位来移动距离

透明色

根据案例演示来判断哪部分需要透明,被其他颜色覆盖的一侧需要设置透明色

动作

    transform 变换    顺时针是正 在正轴方向看
    rotate 旋转
    translate 位移
    transition 过渡  选择的属性  延迟执行时间 变化效果(常见:
    {linear:线性过渡
    ease:平滑过渡
    )

  transform: rotate(-30deg);
  transform: translateY(100px);
  transform: scale(0.5);

  变换的原点
  transform-origin: 0 0; 

在面转动的同时,轴跟着一起转动,简言之:轴和面相对方向不会改变(个人理解)

黄色框部分意为距离屏幕的距离

名称 执行时间 执行效果 执行次数