导购网站开发源码,酒店网络营销推广方案,抖音seo源码搭建,常州做网站一般多少钱大标题小节一、2D1. css3 渐变的语法及应用2. 动画过渡#xff1a;transition3. 2D转换属性#xff1a;transform二、3D1. 3D转换2. 3D视距3. 3D翻转方法4. 3D位置移动5. 3D缩放三、3D动画1. keyframes2. 动画属性animation一、2D
1. css3 渐变的语法及应用#xff1b;
transition3. 2D转换属性transform二、3D1. 3D转换2. 3D视距3. 3D翻转方法4. 3D位置移动5. 3D缩放三、3D动画1. keyframes2. 动画属性animation一、2D
1. css3 渐变的语法及应用
1线性渐变 linear-gradient(方向[可选], 颜色1, 颜色2) 一个方向到另一个方向笔直进行渐变
方向 top/left从上到下 / 从左到右。
!-- 1.从上到下括号里写的第一个颜色在上面 --
stylebackground: linear-gradient(top, #9f9, #ff9);
/style!-- 2.从左到右括号里写的第一个颜色在左边 --
stylebackground: linear-gradient(left, #99f, #f99);
/style此外还可以给渐变过程写百分比。
2径向渐变 radial-gradient(正圆椭圆[可选],颜色1,颜色2) 从起点到终点颜色从内到外进行圆形渐变
circle 渐变为最大的圆形ellipse 椭圆根据元素性质渐变元素为正方形时显示效果与circle无异
3重复渐变 repeating-radial-gradient(方向[可选],颜色1,颜色2) 会按照规律一层一层循环
方向circle / left以圆形方式重复 / 从左到右的方式循环。
全部效果 代码 styleul{margin:0;display: flex;flex-wrap: wrap;}li{margin:0 10px 0;padding:0;list-style: none;width: 100px;height: 100px;border:1px solid #000;}li:first-child{background:-webkit-linear-gradient(top,#f99,#ff9);background:-moz-linear-gradient(top,#f99,#ff9)}li:nth-child(2){background:-webkit-linear-gradient(left,#f00 50%,#00f);background:-moz-linear-gradient(left,#f00 50%,#99f)}li:nth-child(3){background:-webkit-linear-gradient(top,#f00,#0f0,#00f);background:-moz-linear-gradient(top,#f00,#0f0,#00f)}li:nth-child(4){background:-webkit-radial-gradient(circle,#f00,#00f);background: -moz-radial-gradient(#f00,#00f)}li:nth-child(5){width:200px;background:-webkit-radial-gradient(ellipse,#f00,#00f);background: -moz-radial-gradient(ellipse,#f00,#00f)}li:nth-child(6){background:-webkit-repeating-radial-gradient(circle,#f00 10%,#00f 11%,#f00 12%,#00f 13%,#f00 14%);background: -moz-radial-gradient(circle,#f00 10%,#00f 11%,#f00 12%,#00f 13%,#f00 14%)}/style2. 动画过渡transition: transition: 2s linear all;transition有4个属性值。类似 background动画时间是必要属性值如transition: 2s;。 1属性值解读 ① 动画从开始到结束的时间数字s
② 动画过渡的速度
linear匀速ease慢快慢默认ease-in慢开始ease-out慢结束ease-in-out慢开始慢结束cubic-bezier()自定义贝兹尔曲线
③ 动画延时执行数字s 指动画效果在多少时间之后开始执行通常省略。
④ 发生改变的属性名默认all 假设高度发生了改变那么可以写成transition: 2s linear height。
3transition 包含的单个属性
transition-property:all/属性名1,属性名2定义过渡属性transition-duration: 2s定义过渡时间必要参数transition-delay: 2s延迟多少时间开始transition-timing-function: 速度定义过渡速度
4特点 只支持数值的变化背景色也是十六进制的数值谁指标签的样式发生改变 transition 就加在谁身上
stylediv{width:260px; height:40px; border:1px solid #000;background:#f99;margin-bottom:20px;}html:hover div{width: 450px;}html:hover div:nth-child(2){background: #99f;}div.linear{transition: 5s linear all;}div.ease{transition: 5s ease all;}div.ease-in{transition: 5s ease-in all;}div.ease-out{transition: 5s ease-out all;}div.ease-in-out{transition: 5s ease-in-out all;}div.cubic-bezier{transition: 5s cubic-bezier(0.4, 1.9, .6, .8 ) all;}
/style
body div classlinear1. linear匀速/div div classease 2. ease慢快慢默认/div div classease-in 3. ease-in慢开始/div div classease-out 4. ease-out慢结束/div div classease-in-out5. ease-in-out慢开始慢结束/divdiv classcubic-bezier6. cubic-bezier自定义贝兹尔曲线/div
/body3. 2D 转换属性transform:
常与 transition 一起。属性值 1translate(数字px,数字px);平移。 通过 translate() 方法元素从其当前位置移动效果与 position: relative; 相同 两个正数向左向下平移两个负值向右向上平移。
2rotate(数字deg);旋转默认沿中心点旋转。 顺时针 旋转给定的角度负值元素将逆时针旋 转
扩展属性描述transform向元素应用2D 或 3D 转换transform-orign允许你改变被转换元素的位置rotate() 默认绕中心点旋转属性值有left、top、bottom、right、right top靠右靠下、50px 20px水平50px垂直20px的位置、-50px -50px等stylediv{width: 300px;height: 200px;border: 1px solid #000;overflow: hidden; margin:10px auto;}img{display: block;width: 100%;height: 100%; transition:2s} div.one img:nth-child(1){transform-origin: 150px 200px;} /*transform-origin加在要改变2D效果位置的元素上*/div.one img:nth-child(2){transform-origin: 150px 0;}div.one:hover img{transform: rotate(180deg)}div.two{position: relative;}div.two img:nth-child(1){position: absolute;transform-origin: 0 0;}div.two:hover img:nth-child(1){transform: rotate(-90deg)}div.three{position: relative;}div.three img{position: absolute;transform-origin: 0 0;}div.three img:nth-child(2){transform: rotate(90deg)} /*初始就是旋转90度的状态*/div.three:hover img:nth-child(1){transform: rotate(-90deg)}div.three:hover img:nth-child(2){transform: rotate(0)} /*注意这里的选择角度是0而不是90deg*/
/style
bodydiv classoneimg src../imgs/蔡蔡1.jpg alt srcsetimg src../imgs/蔡蔡2.jpg alt srcset/divdiv classtwoimg src../imgs/蔡蔡1.jpg alt srcsetimg src../imgs/蔡蔡2.jpg alt srcset/divdiv classthreeimg src../imgs/蔡蔡1.jpg alt srcsetimg src../imgs/蔡蔡2.jpg alt srcset/div
/body3scale(2,1);缩放。 第一个参数水平宽度缩放第二个参数垂直高度缩放 缩小的值在 0-1 之间负数会让元素倒过来常用于图片缩放。
4skew(数字deg, 数字deg);倾斜 第一个参数正数水平向右倾斜负数水平向左倾斜。第二个参数正数顺时针向下倾斜负数逆时针向上倾斜
5matrix();矩阵。 martrix() 方法需要六个参数包含数学函数允许旋转、缩放、移动以及倾斜元素。
属性值中含两个参数前一个参数通常是水平方向后一个是垂直方向。
styleul{word-wrap: break-word;}ul li{list-style: none; width: 120px; height: 100px; background:#99f; margin-bottom: 20px;transition:.6s;}ul li:nth-child(1):hover{transform: translate(20px, 5px);}ul li:nth-child(2):hover{transform: rotate(45deg);}ul li:nth-child(3):hover{transform: scale(2,1);}ul li:nth-child(4):hover{transform: skew(15deg,-15deg);}ul li:nth-child(5):hover{transform: matrix(1.2, 1, 0, 1, 10, 10);}ul li:nth-child(6):hover{transform: translate(20px, 5px) scale(1, .5);}
/style
bodyulli平移br/translate(20px, 5px)/lili旋转br/rotate(45deg)/lili缩放br/scale(2,1)/lili倾斜br/skew(15deg,-15deg)/lili矩阵br/matrix(1.2, 1, 0, 1, 10, 10)/lili多个2D效果br/translate(20px, 5px) scale(1, .5)/li/ul
/body二、3D
1. 3D转换 3D转换中转换是使元素改变形状、尺寸和位置的一种效果。你可以使用2D或3D转换来转换元素。 兼容性 1IE10及以上和 Firefox 支持3D转换 2Chorme 和 Safari 需要前缀 -webkit- 3OperaIE9 仍不支持 3D 转换它只支持 2D 转换
3D 效果仍然是使用 transform 来实现的主要看后面的属性值是属于2D 还是 3D 的。 2. 3D视距 在平面上看出3D效果有种近大远小的感觉通常需要在写完后删掉perspective 1perspective(距离px) 当使用3D效果时需要 perspective 属性配合
2使用方法 ① 给父元素写操作所有子元素
stylediv{perspective:200px;}p{width:100px;height:100px;transform:translate3d(0,0,-500);background:#f99;}
/styledivp/p
div② 给子元素写操作单个子元素
stylep{width:100px;height:100px;transform:perspective(200px) translate3d(0,0,-50px);background:#f99;}
/stylep/p3. 3D翻转方法
1 rotateX(30deg); 、rotateY(30deg);
2 rotate() 的效果和 rotateZ() 效果相同
style*{margin:0; padding:0;}ul{perspective:400px;width: 500px; margin: auto;}li{width: 200px; height: 80px;background: #f99;margin-bottom:20px;list-style: none;transition: 2s;}ul.rotate li:nth-child(1):hover{transform: rotateX(30deg);-webkit-transform: rotateX(30deg);}ul.rotate li:nth-child(2):hover{transform: rotateY(30deg);-webkit-transform: rotateY(30deg);}ul.rotate li:nth-child(3):hover{transform: rotateZ(30deg);-webkit-transform: rotateZ(30deg);}
/style
bodyul classrotateli水平X翻转/liliY翻转/liliZ翻转/li/ul
/body4. 3D位置移动
3种写法 1transform:translate3d(30px,30px,800px); 2transform:translateZ(800px)translateY(30px); 3transform:translateZ(800px)translate(30px,30px);
style*{margin:0; padding:0;}ul{perspective:400px;width: 500px; margin: auto;}li{width: 200px; height: 80px;background:#f90;margin-bottom:20px;list-style: none;transition: 2s;}ul.translate li:nth-child(1):hover{transform: translate3d(30px ,0, 0);-webkit-transform: translate3d(30px ,0, 0);}ul.translate li:nth-child(2):hover{transform: translate3d(0 ,30px, 0);-webkit-transform: translate3d(0 ,30px, 0);}ul.translate li:nth-child(3):hover{transform: translate3d(0 ,0, 30px);-webkit-transform: translate3d(0 ,0, 30px);}
/style
/head
bodyul classtranslateli水平X平移translate3d(30px ,0,0)/liliY平移/liliZ平移/li/ul
/body5. 3D缩放
1scaleZ
2父框设置
stylediv{perspective:1200px;/*3D视距*/transform-style:preserve-3D;/*3D视角旋转时能看到的效果*/transform-origin:left/top/right/bottom;/*子元素保持3D位置*/}
/style三、3D动画 通过 CSS3我们能够创建动画这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 1. keyframes keyframes 规则用于创建动画具体查看 w3c-css动画。 1使用方法 在 keyframes 中规定某项 CSS 样式就能创建由当前样式逐渐改为新样式的动画效果。
style keyframes 自定义名称1{from {background: yellow;}to {background: green;}to {background: red;}}-moz-keyframes 自定义名称2{/* Firefox */{from {background: red;}to {background: yellow;}to {background: blue;}}
/style2兼容 ① IExplorer 10、Firefox 以及 Opera 支持keyframes ② Internet Explorer 9以及更早的版本不支持 keyframes 规则或 animation 属性。
3注意 ① 当您在 keyframes 中创建动画时请把它捆绑到某个选择器的动画属性上否则不会产生动画效果。 ② 通过规定至少以下两项 CSS3 动画属性即可将动画绑定到选择器动画属性规定动画的名称、规定动画的时长。即 animation 和它的两个属性值
4示例
stylediv{width: 600px; height: 500px; border:2px solid #000;position: relative;}p{width: 100px; height: 100px; background: #f99; animation: move 2s 1s;position: absolute;}keyframes move{ /*这个animation中的move要与这里的一致*/0%{left: 0; top: 0;}100%{left: 500px; top: 0;}}
/style
bodydivp/p/div
/body2. 动画属性animation animation可以理解为循环过度动画效果它是所有动画属性的简写属性除了 animation-play-state 属性。。更多参考 w3c-animation。 1animation-name动画名必要
2animation-duration时间默认0
3animation-timing-function曲线默认ease匀速linear除了w3c给的几个值以外还有step-end与step-start
4animation-delay延时默认0
5animation-iteration-count播放次数默认1无限infinte
6animation-direction周期后是否倒放默认normal倒放alternate
7animation-play-state是否暂停 paused默认 running
8animation-fill-mode动画结束后的状态默认none当动画完成后保持最后一帧forwards当无限播放时该属性失效。
案例示范
style*{margin:0; padding:0;}div{width: 600px; height: 500px; border:2px solid #000;position: relative;}p{width: 100px; height: 100px; background: #f99; animation: move 2s 1s linear 3 alternate;position: absolute;}p:hover{animation-play-state: paused;}keyframes move{0%{left: 0; top: 0;}50%{left: 500px; top: 0;}100%{left: 500px; top: 400px;}}
/style
bodydivp/p/div
/body
