![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css样式
qq_45723051
这个作者很懒,什么都没留下…
展开
-
动画
动画库动画分析过程:1:分析动画运动轨迹,运动现象2:想一下那些css 属性可以实现这样的效果。3:根据轨迹变化,进行百分比划分(不一定是等分),划分方式:找到几个特殊的【峰值】,在峰值与峰值之间进行划分4:在每个不同的百分比区间更改属性的值5:如果是渐进式的;值越来越小,直到小到回到最初的状态动画运动轨迹:常用的:平移 旋转 拉伸 显示 隐藏 透明度 <h2 ...原创 2019-10-28 20:01:07 · 82 阅读 · 0 评论 -
2D和3D
2D.box { width: 200px; height: 200px; background-color: red; /* transform: translate(50px,50px) rotate(45deg) scale(1,2) skew(20deg); */ /*...原创 2019-10-28 19:48:45 · 97 阅读 · 0 评论 -
过渡和动画
过渡:显示某个属性【值变化】的过程div{ width: 100px; height: 100px; background-color: red; /* 复合属性写法 */ /* transition: width 1s,background-color 1s; */ /* 查看哪个属性过渡过程 ...原创 2019-10-28 19:42:58 · 59 阅读 · 0 评论 -
破坏流式布局
.wrap{width: 300px;height: 300px;background-color: red;/*相对定位1:相对自身位置进行定位定位后:元素脱离文档流,原来的位置没有被其他元素所占据 元素特点没有发生变化top:移动后的位置距离起始位置 上面多远(往下移动)left:移动后的位置距离起始位置 左面多远(往右移动)right:移动后的位置距离起始位置 右面多远(...原创 2019-10-21 11:41:14 · 79 阅读 · 0 评论 -
表格和表单
表格tr,td,th { border: 1px solid black;}table { border-collapse: collapse;}tr { height: 100px;}td { /* width: 150px; */ /* 设置最大宽度 */ /* max-width: 150px; */ /* 设置...原创 2019-10-21 11:34:26 · 57 阅读 · 0 评论 -
盒子模型和盒子阴影
css样式实现阴影和盒子模型盒子阴影.box{width: 200px;height: 200px;border: 1 solid #ccc;/* 设置盒子阴影 // box-shadow: none; //内联阴影:盒子内部阴影样式box-shadow: 5px 5px 5px 5px #000 inset;外联阴影:盒子外部阴影样式 ***//值1:水平位移值2:...原创 2019-10-21 11:26:20 · 126 阅读 · 0 评论 -
css实现三角形
用css边框属性实现三角形.box{width: 0;height: 0;border: 0 solid transparent;border-left-width: 150px;border-right-width: 150px;border-bottom: 300px solid black;}/*如何用css 实现三角形1:设置元素宽度高度为 02:先清空所有边框样式...原创 2019-10-21 11:21:42 · 68 阅读 · 0 评论