css3

最新推荐文章于 2020-09-24 23:28:03 发布

qianran1

最新推荐文章于 2020-09-24 23:28:03 发布

阅读量152

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qianran1/article/details/80170879

版权

1:@keyframes及其引用

 .block{
           position:absolute ;
           top:0;
           left:0;
            background-color: black;
            width: 200px;
            height: 200px;
           animation: mymove 10s linear infinite;
       }
       @keyframes mymove
       {
           0%   {top:0px; left:0px; background:red;}
           25%  {top:0px; left:100px; background:blue;}
           50%  {top:100px; left:100px; background:yellow;}
           75%  {top:100px; left:0px; background:green;}
           100% {top:0px; left:0px; background:red;}
       }
    </style>
</head>
<body>
<div class="block"></div>

结果为每隔2.5s该动画变换一个样式，也可以不用百分比表示，用from和to表示

引用为animation其中

mymove:规定需要绑定到选择器的 keyframe 名称。也可用all指所有的属性

10s:规定完成动画所花费的时间，以秒或毫秒计。

linear:规定动画的速度曲线，linear值为中间慢两边快

infinite:循环播放

2：transform：这个属性允许你将元素旋转，缩放，移动，倾斜

from{
    transform: rotatex(0deg) rotatey(0deg);
}
to{
    transform: rotatex(360deg) rotatey(360deg);
}

指该动画绕x与y轴旋转360度

transform: translatez(-200px);

沿着z轴平移-200像素值

还有两个属性skew与scale

3：：before与：after

   <style>
      p:before{
          content: "Hi";
      }
    </style>
</head>
<body>
<p>Excuse me!</p>

在p元素之前插入内容

同理after

4:transform-style属性指定嵌套元素是怎样在三维空间中呈现

transform-style: preserve-3d;

以3d形式显示

flat表示所有子元素在2D平面呈现。

qianran1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3

1:@keyframes及其引用 .block{ position:absolute ; top:0; left:0; background-color: black; width: 200px; height: 200px; animat...
复制链接

扫一扫