WEb开发之H5+CSS篇

最新推荐文章于 2024-04-03 00:11:35 发布

全栈工程师MrL

最新推荐文章于 2024-04-03 00:11:35 发布

阅读量222

点赞数 1

分类专栏：笔记操作手册橘子超酸辣文章标签： node.js npm webkit 前端

本文链接：https://blog.csdn.net/czzyw/article/details/116266568

版权

笔记同时被 3 个专栏收录

150 篇文章 1 订阅

订阅专栏

橘子超酸辣

48 篇文章 0 订阅

订阅专栏

操作手册

38 篇文章 0 订阅

订阅专栏

WEb开发之H5+CSS篇

CSS2 2D转化

transfrom

translate（移动）

---------------------------> x 轴

|

|

| y轴

定义2D转换中的移动，沿着X和Y轴移动元素

不会影响其他元素的位置

百分比单位是相对于自身元素的宽高来对比的

对行内标签没有效果

技巧：盒子水平垂直居中
```
 position: absolute;

      left: 50%;

      top: 50%;

      transform: translate(-50%, -50%);
```
rotate （旋转）

rotate里面跟度数，单位是deg

角度为正，顺时针；角度为负，逆时针

默认旋转的中心点是元素的中心点
transform-origin（转换中心点）

注意后面参数x y 是用空格隔开的

x y默认转换的中心点是元素的中心点（50% 50%）

还可以给x y 设置像素或者方位名词（上下左右中间）
scale （缩放）

注意其中的x y用逗号隔开，不加单位数字表示倍数。

transform：scale（1,1）宽和高都放大一倍，相当于没有放大。

transform：scale（2,2）宽和高都放大了2倍。

transform：scale（2）只写一个参数，第二个参数则和第一个参数一样，相当于 scale（2,2）

transform：scale （0.5,0.5）缩小

sacle缩放最大的优势：可以设置旋转中心点缩放，默认以中心点缩放的，而且不影响其他盒子

综合写法

transform：translate rotate scale

CSS3 动画

animation，可以通过设置多个节点来精确控制一个或者一组动画，实现复杂的动画效果。

动画序列

0%是动画的开始，100%是动画的结束。这样的规则就是动画序列。
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键字“form”和“to”，等同于0%和100%。

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 “ease”。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

简写：前四个一样，（前两个不能省略）后面的可以不一样。

CSS3 3D转化

3D：近大远小，物体后面遮挡不可见，

三维坐标系。

X轴：水平向右 X右边是正值，左边是负值
Y轴：垂直向下 Y下面是正值，上面是负值
Z轴：垂直屏幕往外面是正值，往里面是负值

3D位移：translate3D（x,y,z）

3D旋转：rotate3D(x,y,z)

透视：perspectivw(写在观察元素的父盒子上面)

3D呈现：transfrom-style

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>

    body {

      perspective: 500px;

    }

    

    .box {

      position: relative;

      width: 200px;

      height: 200px;

      margin: 100px auto;

      transform-style: preserve-3d;

    }

    

    .box:hover {

      transform: rotateY(60deg);

    }

    

    .box div {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      background-color: wheat;

    }

    

    .box div:last-child {

      background-color: yellowgreen;

      transform: rotateX(60deg);

    }

  </style>

  <title>Document</title>

</head>



<body>

    <div class="box">

        <div></div>

        <div></div>

  </div>

</body>



</html>

浏览器私有前缀

-moz-:代表Firefox浏览器私有
-ms-:代表ie浏览器私有
-webkit:代表safari，chrome私有属性
-o-:代表Opera私有属性

每日一句
普通人只想到如何度过时间，有才能的人设法利用时间。

全栈工程师MrL

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
WEb开发之H5+CSS篇

WEb开发之H5+CSS篇CSS2 2D转化transfromtranslate（移动）---------------------------> x 轴||| y轴定义2D转换中的移动，沿着X和Y轴移动元素不会影响其他元素的位置百分比单位是相对于自身元素的宽高来对比的对行内标签没有效果技巧：盒子水平垂直居中 position: absolute; left: 50%; top: 50%; transform: tran
复制链接

扫一扫