怎么新建MySQL数据库

发布时间:2022-06-29 作者:admin
阅读:303
这篇文章给大家分享的是“CSS3动画新特性有哪些,含义和用法是什么”,对大家学习和理解有一定的参考价值和帮助,有这方面学习需要的朋友,接下来就跟随小编一起学习一下吧。


一、css3动画

css3动画相对于通过JavaScript动态改变元素样式性能更好,更加容易。CSS3中有三个关于动画的属性:transformtransitionanimation
1、transform
transform主要用来改变元素形状:rotate(旋转)、scale(缩放)、skew(扭曲)、translate(移动)和matrix(矩阵变形)。
例:

.transform-class {
    transform : rotate(30deg) scale(2,3);
}

1.1、transform-origin基点
所有变形都基于基点,基点默认为元素的中心点。用法:transform-origin:(x,y),X、Y可以是百分比、px、rem,也可以是left、right、center(X)和top、center、bottom(Y)。
例:

.transform-class {
    transform-origin: (left, bottom);
}

1.2、rotate旋转
通过指定的角度对元素进行旋转变形,若正数则为顺时针旋转,若负数则为逆时针旋转。
例:

.transform-rotate {
    transform: rotate(30deg);
}

1.3、scale缩放
scale有三种用法:scale(x,y)scaleX(x)scale(Y)。缩放比例如果大于1则放大,等于1 为原始大小,小于1则缩小。
例:

.transform-scale {
    transform: scale(2,1.5);
}

.transform-scaleX {
    transform: scaleX(2);
}

.transform-scaleY {
    transform: scaleY(1.5);
}

1.4、translate移动
translate有三种情况:translate(x,y)translateX(x)translateY(y)
例:

.transform-translate {
    transform: translate(400px, 20px);
}

.transform-translateX {
    transform: translateX(300px);
}

.transform-translateY {
    transform: translateY(20px);
}

1.5、skew扭曲
skew有三种写法:skew(xdeg,ydeg)skewX(xdeg)skewY(ydeg),单位deg为角度。
例:

.transform-skew {
    transform: skew(30deg, 10deg);
}

.transform-skewX {
    transform: skewX(30deg);
}

.transform-skewY {
    transform: skewY(10deg);
}

1.6、matrix
略matrix详述
2、transition
transition是用来设置元素是如何从一种状态平滑到另外一种状态:

  • transition-property(变换的属性)
  • transition-duration(变换延续的时间)
  • transition-timing-function(变换的速率)
  • transition-delay(变换的延迟)

3、animation
animation比较类似于flash中的逐帧动画,就像电影的播放一样,表现非常细腻并且有非常大的灵活性。而transition只指定了开始和结束状态。逐帧动画由关键帧组成,很多个关键帧的连续播放就组成了动画,在CSS3中是由属性keyframes来完成逐帧动画的。
@keyframes

  • animationName:动画名称(自己命名)
  • percentage:百分比值 [pəˈsentɪdʒ]
  • properties:样式属性名称(color、left等)
     

例:

@keyframes animationName {
   from {
       properties: value;
   }
   percentage {
       properties: value;
   }
   to {
       properties: value;
   }
}
//or
@keyframes animationName {
   0% {
       properties: value;
   }
   percentage {
       properties: value;
   }
   100% {
       properties: value;
   }
}

二、H5新特性

  1. 用于绘画 canvas 元素。
  2. 用于媒介回放的 video 和 audio 元素。
  3. 本地离线存储至localStorage 长期存储数据,浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除。
  4. 新标签)语意化更好的内容元素

表单控件:calendar、date、time、email、url、search。

选择器
 



关于“CSS3动画新特性有哪些,含义和用法是什么”就介绍到这了,如果大家觉得不错可以参考了解看看,如果想要了解更多,欢迎关注群英网络,小编每天都会为大家更新不同的知识。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

二维码-群英

长按识别二维码并关注微信

更方便到期提醒、手机管理

7*24 全天候服务

售前 400-678-4567

售后 0668-2555666

售后 400 678 4567

信息安全 0668-2555 118

域名空间 3004329145