时间:2021-05-08
一、css3动画
☺css3动画相对于通过JavaScript动态改变元素样式性能更好,更加容易。CSS3中有三个关于动画的属性:transform、transition和animation。
1、transform
transform主要用来改变元素形状:rotate(旋转)、scale(缩放)、skew(扭曲)、translate(移动)和matrix(矩阵变形)。
例:
1.1、transform-origin基点
所有变形都基于基点,基点默认为元素的中心点。用法:transform-origin:(x,y),X、Y可以是百分比、px、rem,也可以是left、right、center(X)和top、center、bottom(Y)。
例:
1.2、rotate旋转
通过指定的角度对元素进行旋转变形,若正数则为顺时针旋转,若负数则为逆时针旋转。
例:
1.3、scale缩放
scale有三种用法:scale(x,y)、scaleX(x)、scale(Y)。缩放比例如果大于1则放大,等于1 为原始大小,小于1则缩小。
例:
1.4、translate移动
translate有三种情况:translate(x,y)、translateX(x)、translateY(y)。
例:
1.5、skew扭曲
skew有三种写法:skew(xdeg,ydeg)、skewX(xdeg)、skewY(ydeg),单位deg为角度。
例:
1.6、matrix
略matrix详述
2、transition
transition是用来设置元素是如何从一种状态平滑到另外一种状态:
3、animation
animation比较类似于flash中的逐帧动画,就像电影的播放一样,表现非常细腻并且有非常大的灵活性。而transition只指定了开始和结束状态。逐帧动画由关键帧组成,很多个关键帧的连续播放就组成了动画,在CSS3中是由属性keyframes来完成逐帧动画的。
@keyframes
例:
@keyframes animationName { from { properties: value; } percentage { properties: value; } to { properties: value; }}//or@keyframes animationName { 0% { properties: value; } percentage { properties: value; } 100% { properties: value; }}二、H5新特性
表单控件:calendar、date、time、email、url、search。
(选择器)
到此这篇关于CSS3动画和HTML5新特性详解的文章就介绍到这了,更多相关css3动画 html5新特性内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
这是一款基于HTML5和jQuery的3D焦点图动画,焦点图中的图片利用了CSS3的相关特性实现图片倾斜效果,从而让图片出现3D的视觉效果。这款HTML5焦点图
新技术支持。移动Web前端页面主要用HTML5、CSS3、JavaScript与jQuery开发,移动端浏览器主要以webkit内核为主,对于HTML5的新特性
方法一:html5配合css3实现带提示文字的输入框(摆脱js);webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以
图片悬停放大效果:HTML5代码如下:CSS3图片悬停放大动画另外附上两个css样式(image-hover.css和image-hover-main.css)
随着Css3和html5的风靡,越来越多的前端人员开始学习Css3,今天的文章就是来说说前端应该掌握10个Css3属性。1.Border-radiusBorde