CSS-3D按钮学习知识点（一）
来源：互联网 发布：工业大数据案例 编辑：程序博客网 时间：2024/06/08 02:35
一、知识点
1.font-family:设置字体
可以把多个字体名称作为一个“回退”系统来保存，如果浏览器不支持第一个字体，则会尝试下一个，浏览器会使用它可识别的第一个值eg：font-family: 'microsoft yahei', Arial, sans-serif;font-family: 微软雅黑;2.display属性：规定元素应该生成的框的类型
可能的值：(太多，列出几个比较常见的)
扩展：display:none与visible:hidden的区别：
display:none和visible:hidden都能把网页上某个元素隐藏起来。display:none 不占位隐藏。visible:hidden 占位隐藏3.position（定位）
position:absolute和position:relative 都脱离文档流，都在文档流的上方。绝对的坐标系在浏览器的左上角。相对的坐标系在自己的左上角。绝对不占位，相对占位。如果要以父集作为原点，有个口诀：**父集相对子集绝对**（自己慢慢体会吧）。另外还有fixed，static（默认），inherit就不做多解释了。4.Html属性：
<h1> align 对齐方式<body> bgcolor 背景颜色。 background 背景图片。<a> target规定在何处打开链接，_blank打开新标签，_self默认当前页面打开。5.css选择器
1）基础选择器
1. * 通用选择器。 *{margin:0;} 2. E 标签选择器。 p{font-size:20px} 3. id id选择器。 .info{} || p.info{} 4. # class选择器。 ＃info{} || p#info{}2）组合选择器
1. E,F 多元素选择器。 div,p{color:#f00;} 2. E F 后代元素选择器(匹配所有属于E元素后代的F元素，E和F之间用空格分隔)。#nav li{display:block} 3. E>F 子元素选择器，匹配所有E元素的子元素F。div > strong { color:#f00; } 4. E+F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F。p + p { color:#f00; } 5. E ~ F 匹配任何在E元素之后的同级F元素。 eg： ul ~ p{ color:red } 选择了ul之后的同级所有的元素3）属性选择器
1. ［id］匹配所有具有id属性的元素，不考虑它的值. 2. [id=user] 匹配所有id属性等于"user"的E元素. 3. [name*=us] 属性name的值包含"en"的字符串元素. 4. [name^=en] 属性name的值以"en"开头的元素. 5. [name$=en] 属性name的值以"en"的结尾元素. 6. ...4）伪类选择器
1. E:hover 鼠标悬停其上的E元素. 2. E:focus 获得当前焦点的E元素. 3. E:selection 用户当前选中的元素. 4. ...属性选择器参考地址，更多请点击查看
6.伪对象选择器
:before 选择器在被选元素的内容前面插入内容。:after 选择器在被选元素的内容后面插入内容。注意：before 和after必须和content结合使用，即使没有内容插入也要写content=' '. 实例： //css部分 style{ #s:before{ content: '元素前插入内容，'; } #s:after{ content: '元素后插入内容。'; } } //body部分<body> <p id="s">我是正文，</p></body>运行结果：元素前插入内容，我是正文，元素后插入内容。
7.阴影
1.box-shadow: 1)阴影水平偏移量。2）阴影垂直偏移量。必选 3）阴影模糊半径。 4）阴影扩展半径。5）阴影颜色。可选 6）阴影类型：如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影。可选 eg： box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset;2.text-shadow: 基本文字阴影 1）水平。 2）垂直。必选 3）模糊距离。 4）阴影颜色。 可选8.2D之移动、旋转、缩放、斜切 ( Transform )
1.移动（translate）.button{ position:absoulate; top:50%; left:50; transform:translate(-50%,-50%);//向左向上一点}2.旋转(rotate) transform:totate(45deg);//deg表示度数。3.缩放(scale) transform:scale(0.5);//x,y轴都缩放0.54.斜切（skewX） transform:skewX(8deg); transform:skewY(8deg);9.translation(过渡)
translation: 1.过渡效果的css属性名称:none | all | [ <IDENT> ] [ ',' <IDENT> ]* i) none(没有属性改变)；all（所有属性改变 默认值)；indent（元素属性名） ii)当其值为none时，transition马上停止执行 当指定为all时，则元素产生任何属性值变化时都将执行transition效果 ident是可以指定元素的某一个属性值。其对应的类型如下： 1)color 2)length 3)percentage 4)integer 5)number 6)transform list 7)rectangle 8)visibility 9)shadow 10)gradient 11)paint server(SVG) 12)space-separated list of above 13)a shorthand property 2.过渡效果时间: 3.速度效果属性: 1)ease:(逐渐变慢)默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0). 2)linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0). 3)ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0). 4)ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0). 5)ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 6、cubic-bezier：(该值允许你去自定义一个时间曲线) 4.何时开始:举例一：将div的宽度加大
<html lang="en"><head> <meta charset="UTF-8"> <title>测试</title> <style> div { width: 100px; height: 100px; background: red; transition: width 2s; } div:hover { width: 300px; } </style></head><body><div>将鼠标悬停此处，逐步改变表格的宽度从100px到300px</div></body></html>举例二：改变div的颜色和阴影
<head> <meta charset="UTF-8"> <title>测试</title> <style> * { font-family: 微软雅黑; font-size: 30px; } div { color: #00A2CA; } div:hover { cursor: pointer; color: #1fcc0d; text-shadow: 5px 3px 3px #f84738; transition: text-shadow 3s ease-in 0s, color 3s ease-in 0s; } </style></head><body><div>将鼠标悬停此处</div></body>10.浏览器兼容：
-ms 代表 IE内核识别码-moz 代表 火狐内核识别码-webkit 代表谷歌和Safari-o 代表Opera2、简单实例
1.定义一个div居中显示在屏幕上
<html lang="en"><head> <meta charset="UTF-8"> <title>纯css3实现的3D按钮</title> <style> body { background-color: #1c1d1f; font-family: 'microsoft yahei', Arial, sans-serif; } .button { width: 400px; height: 120px; position: absolute;/*设置绝对定位 下面的top和left属性才生效(居中)*/ top: 50%; left: 50%; /*以上代码并未完全居中，还需下面操作达到完全居中显示*/ transform: translate(-50%,-50%);/*(div(button))左移动50%，上移50%*/ background-color: #000000; } </style></head><body><div class="button"></div></body></html>运行结果如下：
2.3D按钮实现初步实现（准备工作）
效果如如下：
代码实现如下：
<html lang="en"><head> <meta charset="UTF-8"> <title>纯css3实现的3D按钮</title> <style> body { background-color: #1c1d1f; font-family: 'microsoft yahei', Arial, sans-serif; } .button { display: block; width: 400px; height: 120px; position: absolute; /*设置绝对定位 下面的top和left属性才生效(居中)*/ top: 50%; left: 50%; /*以上代码并未完全居中，还需下面操作达到完全居中显示*/ -webkit-transform: translate(-50%, -50%); /*谷歌，safair内核识别码*/ -ms-transform: translate(-50%, -50%); /*ie内核识别码*/ transform: translate(-50%, -50%); /*（统一）左移动50%，上移50%*/ background-color: #000000; border-radius: 20px; /*overflow: hidden;*/ cursor: pointer; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.2) inset; } /*开关标签*/ .button span { display: block; width: 194px; height: 108px; top: 6px; background-color: #1c1d1f; position: absolute; } /*开*/ .button span:first-of-type { left: 6px; /*设置左上角和左下角弧度半径*/ border-top-left-radius: 18px; border-bottom-left-radius: 18px; } /*关*/ .button span:last-of-type { right: 6px; /*设置右上角和右下角弧度半径*/ border-top-right-radius: 18px; border-bottom-right-radius: 18px; } /*消除默认check*/ .button input[type="checkbox"] { display: none; } </style></head><body><label class="button"> <input type="checkbox"> <span></span> <span></span></label></body></html>CSS-3D按钮学习知识点（二）
0 0
- CSS-3D按钮学习知识点（一）
- CSS-3D按钮实现实例（二）
- react知识点学习（一）——定义CSS样式
- HTML+CSS知识点（一）
- HTML&CSS知识点（一）
- css的知识点（一）
- 使用纯 CSS 设计3D按钮
- 使用纯CSS设计3D按钮
- 3d按钮(纯CSS实现)
- 【Unity 3D】学习笔记五：Toggle（开关按钮）
- CSS基础知识点轨迹（一）
- HTML+CSS知识点总结（一）
- HTML&CSS 知识点快速入门（一）
- 【前端新手】css知识点随记（一）
- 入门--使用纯 CSS 设计3D按钮
- 纯CSS实现的3D简洁按钮设计
- 纯CSS实现的3D简洁按钮设计
- 【转】纯CSS实现3D效果的按钮
- 值得推荐的C/C++框架和库
- swift3.0 String篇 -- 警:个人理解
- V尼熊的java之旅——java基础篇
- dedecms5.7发布文章提示“标题不能为空”的解决方法
- 大话数据库： 第五章 操作表中的数据
- CSS-3D按钮学习知识点（一）
- 在pycharm中导入mysql-python时包没有
- unity3d 调用函数与协程的区别和适用范围
- maven常见错误
- java 创建一个Class的对象来获取泛型的class
- 关于linux上的mysql异常：Starting MySQL. ERROR! The server quit without updating PID file ……
- 小明一家过桥
- 当提示mysql数据库被锁解锁方法
- Oracle实例迁移_真实场景实操
