前端开发2025年09月10日
css3总结: 对于webkit内核的浏览器, 除media、text-shadow外，使用其它属性基本上要加上webkit前缀. gradient在低版本的系统中渲染效果不丰富 ios3.2~4.3不支持position:fixed，不推荐使用 android2.1~2.3对动画的支持效果不丰富 android2.1~2.3不支持translate3d，...
前端开发2025年09月10日
首先要定义一个动画效果 keyframes 关键字 这里动画效果执行完毕后 恢复本身的css样式 有的动画效果 移动到位置 要保持 就需要写好css 元素的位置 css里直接写 (这里是一般的 也就是ie10 ie11) @keyframes 动画名称{ from{ color:#000;} to{ color:red;} } 谷歌等webkit @-we...
前端开发2025年09月08日
css3跟html5一样是css的最新版本，但也是很多年前了 css3更新了 max/min-width/height 最大最小宽高 border-radius 圆角 background（image，size，repeat，position，Origin，clip） 背景，可以用图片作为背景 Gradients 渐变 text-shadow 字体阴影 b...
前端开发2025年09月07日
CSS3提供两种方式来实现动画，transition与animation。animation涉及自定义一种为“@keyframes”的东西，这个需要动用到insertRule太复杂了，因此本文跳过它。有人它为transform也算一种，但它是静态的，需要结合transition才能变成动态，因此也跳过。 transition主要就是以下四个属性,后面跟着的...
前端开发2025年09月02日
实际效果： @-webkit-keyframes gogogo { 0%{ -webkit-transform: rotate(0deg); border:5px solid red; } 50%{ -webkit-transform: rotate(180deg); background:black; border:5px solid yellow; }...
前端开发2025年08月31日
.elm { width: calc(expression); } 注意事项： 使用“+”、“-”、“*” 和 “/”四则运算； 可以使用百分比、px、em、rem等单位； 可以混合使用各种单位进行计算； 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的； 表达式中...
前端开发2025年08月31日
分享一下之前做的渐变效果（由于最近正好处于温故而知新状态，所以整理以前的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=...