前端开发20小时前

一、transform css3引入了一些可以对网页元素进行变换的属性，比如旋转，缩放，移动，或者沿着水平或者垂直方向扭曲（斜切变换）等等。这些的基础都是transform属性 transform属性有一项奇怪的特性，就是它们对于其周围的元素不会产生影响。换句话说，如果将一个元素旋转45度，它实际上是重叠在元素的上方，下方或者旁边。而不会移动其周围的内容。...

前端开发前天 20:36

一、@font-face语法 1.格式 @font-face { font-family: <identifier>; src: <fontsrc> [<string>] [, <fontsrc> [<string>]]*; [<font>]; } 2.相关参数 identifier：...

前端开发前天 19:00

一、多列布局 1.columns 设置的列数和每列的宽度。复合属性 columns：<' column-width '> || <' column-count '> 2.column-width 设置每列的宽度（类似于最小宽度） length： 用长度值来定义列宽。不允许负值 auto： 根据 &am...

前端开发前天 10:36

css3总结: 对于webkit内核的浏览器, 除media、text-shadow外，使用其它属性基本上要加上webkit前缀. gradient在低版本的系统中渲染效果不丰富 ios3.2~4.3不支持position:fixed，不推荐使用 android2.1~2.3对动画的支持效果不丰富 android2.1~2.3不支持translate3d，...

前端开发前天 06:00

首先要定义一个动画效果 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样...