创造视觉魔法：探索 CSS 动画和转换
CSS 动画和转换是为网页添加生动和吸引人的效果的关键。本文将引导你学习如何使用 CSS 动画和转换属性，为你的网页增添一份魔法。
2024年10月23日
CSS 动画和转换是为网页添加生动和吸引人的效果的关键。本文将引导你学习如何使用 CSS 动画和转换属性，为你的网页增添一份魔法。
2024年10月23日
1. 盒模型分为标准盒模型和怪异盒模型(IE模型)
2. box-sizing：content-box //标准盒模型
3. box-sizing：border-box //怪异盒模型
4. 标准盒模型：元素的宽度等于style里的width+margin+border+padding宽度
2024年10月23日
在考察应试者CSS基础的时候，有时候会要求用CSS绘制一些基础图形。今天向大家介绍一下平行四边形的绘制，如果用到了不用谢我。
一种思路是使用一个矩形的div和两个三角形拼接来形成平行四边形，当然可以使用伪类，这样就不用使用三个元素了。
另一种是使用skew属性。
举个栗子：
// css
.parallelogram {
display: inline-block;
padding: 50px 100px;
border: 1px solid black;
transform: skew(-20deg);
} //html <div class="parallelogram"></div>2024年10月23日
*{
margin: 0;
padding: 0;
height: 100%;
body{
width: 60%;
height: 75%;
border: 1px solid;
//margin:上左右下
margin: 15% auto 0;
&:hover #wrap{
/**
如果暴露的为2个property
1.先根据hover的property重新定义transition，进行渲染height和font
2.在移出#wrap后，再次调用已定义的proterty，进行渲染background和width
*/
transition-property: height,font;
height: 100px;
font: 20px/100px "微软雅黑";
background: salmon;
width: 100px;
}
#createDiv{
height: 800px;
position: relative;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: height;
transition-duration: 2s;
transition-timing-function: cubic-belizer(.12,1.36,.65,-0.28);
}
#wrap{
width: 300px;
height: 300px;
font: 50px/300px "微软雅黑";
text-align: center;
background: aquamarine;
border-radius: 50%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
transition-property: background,width;
transition-duration: 4s,3s;
//cubic-bezier: 函数中定义值。可能的值是 0 至 1 之间的数值(开始时间值，开始峰值，结束时间值，结束峰值)
transition-timing-function: cubic-belizer(.12,1.36,.65,-0.28);
}
}
}
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556572024年10月23日
一、px rem em区别
px
1.相对长度单位。相对于显示器屏幕分辨率而言。 2.存在浏览器不兼容问题。
em
1.相对长度单位。相对于当前对象内文本字体尺寸。 2.em值并不是固定的，em会继承父级元素的大小. 3.如果父级设置font-size:20px. 那么1em=20px. 2em=40px；如果父级设置font-size为30px. 1em=30px. 2em=60px. 4.存在容易造成字体设置混乱问题。
2024年10月23日
好程序员web前端技术之CSS3过渡
transition
css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值
transition-property：检索或设置对象中的参与过渡的属性
transition-duration：检索或设置对象过渡的持续时间
2024年10月23日
今天要布局的网页背景是一个平行四边形，切图作为背景不好，很影响网页的打开速度，，那么这个平行四边形就css代码写出来，可以用css3的CSS3 transform 旋转的属性写出来，就是transform：skew，全是css代码写的可好了，大爱css3。
先看下效果：
代码如下：
<!Doctype html>
<html>
2024年10月23日
有兴趣了解更多关于前端开发和网页设计的知识吗？请阅读关于CSS转换属性的优秀教程。
如果没有CSS转换，转换属性只能将其应用到的对象翻转。所以，在现实生活中，这两种选择是一起应用的。
这个属性拥有的权力:
rotate(angle),
skew(angle),
translate(x,y),
2024年10月23日
1.什么是CSS？
2024年10月23日
基本概念：transform 属性向元素应用 2D 或 3D 转换；该属性允许我们对元素进行旋转、缩放、移动或倾斜。
这两点是Transform的概念和应用场景，重点在于2D和3D的转换，那么呢？2D和3D的转换是有一定的数学基础的，为什么这么说呢？我们需要了解两个概念
第一个：透视投影
从某一点发射出去的光线，是互不平行的，然后就会有一个近大远小的效果。比如：家里的灯泡，我们把一个东西离得灯泡越近，那么它的影子就越大，离得越远，影子就越小。