css3动画 | 易学教程

CSS3 Transform的perspective属性

阅读更多关于 CSS3 Transform的perspective属性

以下两行语句有什么区别？ Css <div id="animateTest" style="-webkit-transform: perspective(400px) rotateY(40deg);"> Css <div id="animateTest" style="-webkit-transform: rotateY(40deg) perspective(400px);"> 如果大家不清楚，请听我娓娓道来。 CCS3中的Transform是设置界面样式和动画的一大利器。而且在Chrome和FF中还支持3D变换。IE9不支持，IE10支持。只要是3D场景都会涉及视角问题和透视的问题。在Transform中的设置方法比较简单：只能选择透视方式，也就是近大远小的显示方式。镜头方向只能是平行Z轴向屏幕内，也就是从屏幕正前方向里看。可以调整镜头与平面位置： a) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。 b) perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。下面用一个正方体（或者说骰子）向大家演示视角不同视角（perspective 以及）的差别。镜头距离z=0平面的不同距离的效果。镜头在z坐标固定时

css3——3D动画、transform-style：preserve-3d、transform：perspective()、perspective-origin

阅读更多关于 css3——3D动画、transform-style：preserve-3d、transform：perspective()、perspective-origin

1. transform-style：preserve-3d，该属性设置在父级元素中，它的子级元素具有3d效果注意：设置了该属性，就不能防止子级元素溢出，即不能设置overf：hidden属性；如果设置了overflow：hidden，那么transform-style：preserve-3d就无效。 2. transform：perspective；景深，观察者到物体的距离；单位：px，比如：transform：perspective(500px); 英语：perspective：透镜，望远镜;观点，看法;远景，景色;洞察力（1）该属性设置在父级元素中，对于子级元素而言，都只有一个公共的视角比如：该例子中，父级设置3d属性，设置景深；三个子级元素的旋转角度都是 60度，但是视觉上却不一样，因为观察者的视角是某个特定位置。该视角下去看三个子级， <style> .wrapper{ position: absolute; top: 100px; left: 100px; width: 100px; height: 300px; border: 1px solid black; transform-style: preserve-3d; transform: perspective(500px); } .wrapper div:nth-of-type(1){ width:

CSS3 学习笔记（动画多媒体查询）

阅读更多关于 CSS3 学习笔记（动画多媒体查询）

动画　　1、@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果　　2、使用animation进行动画捆绑。两个值：动画名称、时长　　3、我们一般情况下使用0%~100%来规定动画发生的时机。或者使用关键词from...to...，效果等同于0%~100%。　　4、加上一个infinite值就可以无限执行了　　5、ease——默认开始慢慢加速，结束时慢慢减速。　　linear——默认始终使用相同速度运行。　　alternate——交替执行（也可以成为正反执行）　　代码： !DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; background-color: #000000; position: relative;/* 需要位置改变所以添加了position */ animation: myfirst 3s alternate infinite linear;/* 动画捆绑两个值动画名称动画时长再加一个无限执行和交替执行 */ } @keyframes myfirst{ from

css3 动画

阅读更多关于 css3 动画

<img src="" /> 添加css img{ width:400px;height:auto; animation: heart 0.5s infinite; } /*animation:动画名称消耗时间运动曲线开始时间播放次数是否添加反方向*/ 1.变化大小 @keyframes heart {　　　　0%{transform:scale(1);} 　　50%{transform:scale(1.2);} 　　100%{transform:scale(1);} } 2.移动/颜色变化 @keyframes move { 　　from{left:0;background:red;} 　　to{left:1000px;background-color:yellow;} } 3.旋转 @keyframes rotate{ 　　from{transform:rotate(0deg);} 　　to{transform:rotate(360deg);} } 来源： https://www.cnblogs.com/Tianjieqiangzhelingfeng/p/11782360.html

CSS 常用技巧

阅读更多关于 CSS 常用技巧

本文转载于: 猿2048 网站➸ https://www.mk2048.com/blog/blog.php?id=hikii1c2ab 概述相信大家在写css属性的时候，会遇到一些问题，比如说：垂直对齐，垂直居中，背景渐变动画，表格宽度自适应，模糊文本，样式重置，清除浮动，通用媒体查询，自定义选择文本，强制出现滚动条，固定头部和页脚，自己在网上看到的一篇关于css的文章，感觉这里边一些常用的css代码片段对大家很有帮助，所以我就把这篇文章分享给大家，希望大家能够喜欢。 css代码片段 1、垂直对齐如果你用 CSS ，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用 CSS3 的 Transform ，可以很优雅的解决这个困惑： .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } 使用这个技巧，从单行文本、段落到box，都会垂直对齐。目前浏览器对 Transform 的支持是需要关注的， Chrome 4 , Opera 10 , Safari 3 , Firefox 3 , and Internet Explorer 9 均支持该属性

CSS3 滤镜

阅读更多关于 CSS3 滤镜

了解摄影活着美图秀秀之类美图软件的同学对滤镜肯定不陌生，CSS3对各种滤镜效果有了支持，可以做出很多好玩儿效果，走马观花了解一下 filter: function(param); 很很多CSS3属性一样，监狱支持情况需要使用浏览器前缀，CSS滤镜支持的方法有 grayscale 灰度 sepia 褐色 saturate 饱和度 hue-rotate 色相旋转 invert 反色 opacity 透明度 brightness 亮度 contrast 对比度 blur 模糊 drop-shadow 阴影拿图片做例子，看看效果 ԭͼ -webkit-filter:none; 以下效果都不是截图，Chrome上看 -webkit-filter:blur(10px); -webkit-filter:grayscale(0.5); -webkit-filter:sepia(0.5); -webkit-filter:brightness(3); -webkit-filter:hue-rotate(180deg); -webkit-filter:invert(1); -webkit-filter:opacity(0.5); -webkit-filter:saturate(5); -webkit-filter:contrast(0.5); -webkit-filter:drop-shadow

CSS3动画效果transform

阅读更多关于 CSS3动画效果transform

1.transform浏览器支持情况也就是说目前不考虑老浏览器的话是不用加前缀的，感谢菜鸟教程：https://www.runoob.com/cssref/css3-pr-transform.html transform默认值none;就是不转换，不继承，js中对其更改示例：object.style.transform="rotate(7deg)" 2.transform能干啥？ transform属性让元素进行2D或3D转换。可以将元素：旋转，缩放，移动，倾斜等。 transform: none|transform-functions; none是默认的，就是不进行转换，好理解。transform-functions有哪些？如下表： transform-functions的值描述测试 matrix( n , n , n , n , n , n ) 定义 2D 转换，使用六个值的矩阵。测试 matrix3d( n , n , n , n , n , n , n , n , n , n , n , n , n , n , n , n ) 定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate( x , y ) 定义 2D 转换。测试 translate3d( x , y , z ) 定义 3D 转换。 translateX( x ) 定义转换，只是用 X

CSS3动画效果transition

阅读更多关于 CSS3动画效果transition

1.transition的浏览器支持情况 2. 还是一步一步说说怎么用transition吧页面只有一个div，其css如下： 1 <style type="text/css"> 2 div { 3 width:100px; 4 height:30px; 5 background-color:#FF9900; 6 } 7 div:hover { 8 width: 300px; 9 } 10 </style> 鼠标移动到div上，div立刻变宽为300px，效果如下：现在在div身上加上 transition:0.5s; 1 <style type="text/css"> 2 div { 3 width:100px; 4 height:30px; 5 background-color:#FF9900; 6 /* 加上这个，让变化慢一点 */ 7 transition: 0.5s; 8 } 9 div:hover { 10 width: 300px; 11 } 12 </style> 效果如下：原来是瞬间，现在div的css样式中加入了transition属性，变成了缓慢的动画了。那么问题来了，如下： 3.transition写在哪？将div里的transition:0.5s删掉，放在div:hover中，（css代码略）效果如下鼠标放在上面，效果还好，慢慢伸长，鼠标一松

CSS3景深-perspective

阅读更多关于 CSS3景深-perspective

3D视图正方体： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3景深-perspective</title> 6 </head> 7 <style> 8 #div1{ 9 position: relative; 10 width: 500px; 11 height: 500px; 12 perspective: 1000px; /* 景深面的 (宽+高)*2 */ 13 background-color: #123456; 14 } 15 #div1 ul{ 16 transform-origin: 50% 50%; /* 旋转中心 */ 17 position: absolute; 18 left: 50%; 19 top: 50%; 20 width: 250px; 21 height: 250px; 22 transform-style: preserve-3d; /* 设置3D属性让子元素三维空间呈现 */ 23 list-style: none; 24 margin: -125px 0 0 -125px; 25 padding: 0; 26 font-size: 120px; 27 animation: move 6s linear infinite

关于css3的50道常见面试题

阅读更多关于关于css3的50道常见面试题

1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽 3 CSS选择器有哪些？哪些属性可以继承？ CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）可继承的属性：font-size, font-family, color 不可继承的样式：border, padding, margin, width, height 优先级（就近原则）：

订阅 css3动画