前端开发前天 20:06
.elm { width: calc(expression); } 注意事项: 使用“+”、“-”、“*” 和 “/”四则运算; 可以使用百分比、px、em、rem等单位; 可以混合使用各种单位进行计算; 表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的; 表达式中...
前端开发前天 17:29
分享一下之前做的渐变效果(由于最近正好处于温故而知新状态,所以整理以前的po上来的随笔会比较多。 通过js实现的。 传递给函数的内容主要有,需要改变的对象、改变的属性、目标值、以及是否有回调函数。 可以实现物体的不同样式的链式变化,和不同样式的同时变化。 废话不多说,贴上Js代码(附上注释): <script> //获取obj样...
前端开发2025年08月28日
---恢复内容开始--- 渐变 gradients 水平渐变 linear gradients 语法 background:linear-gradient(direction,color1,color2,……) Direction 这个参数可以省略 如果省略了默认方向是从上到下 这个参数如果不省略 写方向的起始值 top(从上到下) left(从左到右) ...
前端开发2025年08月27日
在CSS3中,可以利用transform功能来实现文字或图像的旋转、扭曲、缩放、位移、矩阵、原点这六种类型的变形处理,下面将详细讲解transform的使用。 变形--旋转 rotate() div.box{transform: rotate(45deg);} /*顺时针旋转45度*/ 变形--扭曲 skew() div.box{transform:ske...
前端开发2025年08月26日
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--1.清除输入框内的空格--> <!--<input type=...
前端开发2025年08月23日
css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位 浏览器支持IE9+、FF4.0+、Chrome19+、Safari6+ calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示: .haorooms { width: calc(expression); } 这样pa...
前端开发2025年08月22日
web 前端开发之 CSS3 新特性http://blog.zh66.club/index.php/archives/189/ web 前端开发之 html5 新特性http://blog.zh66.club/index.php/archives/190/ 妙笔生花博客~CSS 初识样式规则http://blog.zh66.club/index.php/a...
前端开发2025年08月18日
CSS3 有3种和动画相关的属性:transform, transition, animation。其中 transform 描述了元素静态样式。而transition 和 animation 却都能实现动画效果。所以transform 常常配合后两者使用 一、transform 描述的是元素静态样式 transform属性应用于元素的2D或3D转换。这个...
前端开发2025年08月16日
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3全屏背景图片缩小渐变自动切换代码</title> <!-- <link rel="stylesheet prefetch" href="http:...
前端开发2025年08月15日
1、CSS3选择器 2、CSS3边框(Borders) 3、CSS3背景 4、CSS3渐变 5、CSS3文本效果 6、CSS3字体 7、CSS3转换和变形 1)2D转换方法 2)3D转换属性 8、CSS3过度 9、CSS3动画 10、CSS3多列 11、CSS3盒模型 12、CSS3伸缩布局盒模型(弹性盒子) 13、CSS3多媒体查询 ...