2D转换
2D转换之translate
transform:translate(x,y);分开写 transform:translateX(n); transform:translateY(n);
-
定义2D转换中的移动，沿着X、Y轴移动
-
translate不会影响到其他元素的位置
-
translate中的百分比单位是相对于自身元素的
-
对行内标签没有效果
2D转换之rorate
transform:rorate(度数);
-
单位是deg
-
角度为正，顺时针，负、逆时针
-
默认旋转中心点是元素的中心点
CSS3——三角制作
<body> <div></div> </body>
div {
position: relative;
width: 240px;
height: 35px;
border: 1px solid black;
}
div::after {
position: absolute;
content: '';
border-right: 1px solid #000;
border-bottom: 1px solid #000;
top: 8px;
right: 15px;
/*高度宽度记得加，刚开始就忘加了 要加定位定位效果，需要宽高*/
width: 10px;
height: 10px;
transform: rotate(45deg);
/*口诀：谁做动画给谁加过渡*/
transition: all 0.3s;
}
/*鼠标经过谁，让谁旋转搞明白*/
div:hover::after {
transform: rotate(225deg);
}
2D转换中心点transform-origin
transform-origin:x y;
-
注意后面的参数x、y用空格分开
-
默认转换中心点为元素的中心点(50% 50%)
-
还可以给元素设置像素或方位名词（top、right、left、bottom、center）
旋转中心点案例
<body> <div></div> <div></div> <div></div> <div></div> </body>
div {
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid #ccc;
float: left;
}
div::before {
content: "我是伪元素";
width: 100%;
height: 100%;
background-color: aqua;
display: block;
/*谁做过渡给谁加！！！*/
transition: all 0.4s;
transform: rotate(180deg);
transform-origin: left bottom;
}
div:hover::before {
transform: rotate(0deg);
}
2D转换之缩放scale
transform:scale(x,y);
-
其中的x、y用逗号分隔
-
transform:scale(1,1)：宽高放大1倍，相当于不变
-
transform:scale(2)：只写第一个参数，第二个参数和第一个参数一样
-
sacle缩放最大的优势:可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
分页按钮案例
<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </body>
li {
width: 30px;
height: 30px;
background-color: aqua;
border: 1px solid black;
margin: 10px;
list-style: none;
border-radius: 50%;
text-align: center;
float: left;
line-height: 30px;
cursor: pointer;
}
li:hover {
transform: scale(1.3);
}
2D转换综合写法
注意事项：
-
同时使用多个转换，其格式为:transform:translate()rotate0scale0)..等
-
其顺序会影转换的效果。(先旋转会改变坐标轴方向)
-
当我们同时有位移和其他属性的时候，记得要将位移放到最前
动画
1.先定义动画(keyframes)
2.再使用（调用动画）
@keyframes 动画名称 {
/* 0%是动画的开始 */
0% {
background-color: red;
}
/* 100%是动画的结束 */
100% {
background-color: blue;
}
}
div{
/* 调用动画名称 */
animation-name: 动画名称;
/* 调用动画持续时间 */
animation-duration: 1s;
}
动画序列
-
0% 是动画的开始，100%是动画的完成。这样的规则就是动画序列。
-
在 @keyframes 中规定某项CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果
-
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
-
请用百分比来规定变化发生的时间，或用关键词“from"和“to”,等同于0%和100%。
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
div {
height: 200px;
width: 200px;
background-color: aqua;
animation-name: move;
animation-duration: 10s;
}
<body> <div></div> </body>
动画属性简写
animation: name duration timing-function delay iteration-count direction fill-mode;
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画开始或结束的状态
前两个属性必须写 linear匀速
linear匀速
热点图案例
<body> <div class="map"> <div class="city"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div> </div> <div class="city tb"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div> </div> <div class="city gz"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div> </div> </div> </body>
body {
background-color: #333;
}
.map {
position: relative;
width: 747px;
height: 616px;
background: url(media/map.png) no-repeat;
margin: 0 auto;
}
.city {
position: absolute;
top: 227px;
right: 193px;
color: #fff
}
/*就近原则*/
.tb {
/*这里用top right覆盖掉原来的位置，用bottom、left不会覆盖，保持一致*/
top: 500px;
right: 80px;
}
.gz {
top: 547px;
right: 203px
}
.city div[class^="pulse"] {
/* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
width: 8px;
height: 8px;
box-shadow: 0 0 12px #009dfd;
animation: pulse 1.2s linear infinite;
}
/*注意权重问题*/
.city div.pulse2 {
animation-delay: 0.4s;
}
.city div.pulse3 {
animation-delay: 0.8s;
}
@keyframes pulse {
0% {}
70% {
/*不能用transform:scale(x,y)，会让阴影变大*/
width: 40px;
height: 40px;
/*透明度*/
opacity: 1;
}
100% {
width: 80px;
height: 80px;
opacity: 0;
}
}
速度曲线细节
案例：奔跑的熊
<body> <div></div> </body>
body {
background-color: #ccc;
}
/*要让熊跑到舞台中间，需要加定位。子绝父相*/
div {
position: absolute;
width: 200px;
height: 100px;
background: url(media/bear.png) no-repeat;
/*多个动画之间用逗号分隔*/
animation: bear .4s steps(8) infinite, move 5s forwards;
/* steps(8)表示动画分8步完成，infinite表示无限循环 */
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
/*transform: translate(-100px);*/
transform: translate(-50%);
/*走自身宽度的一半，不用随盒子的改变再次计算，方便*/
}
}
3D转换
transform:translate3d(x,y,z);
-
transform:translate3d(x,y,z)：其中 x、y、z 分别指要移动的轴的方向的距离
-
注意：translateZ一般用px单位
-
往外是正值，往里是负值
透视
透视写在被观察元素的父盒子上面的
d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z：就是 z轴，物体距离屏幕的距离，z轴越大（正值） 我们看到的物体就越大，近大远小。
3D旋转 rotate3d
-
transform:rotateX(45deg)：沿着x轴正方向旋转 45度
-
transform:rotateY(45deg) ：沿着y轴正方向旋转 45deg
-
transform:rotateZ(45deg) ：沿着Z轴正方向旋转 45deg
左手准则
左手的手拇指指向 x轴的正方向：
其余手指的弯曲方向就是该元素沿着x轴旋转的方向
左手的手拇指指向 y轴的正方向：
其余手指的弯曲方向就是该元素沿着y轴旋转的方向（正值）
3D呈现 transfrom-style
-
控制子元素是否开启三维立体环境。
-
transform-style: preserve-3d; 子元素开启立体空间
-
transform-style: flat 子元素不开启3d立体空间 默认的
-
代码写给父级，但是影响的是子盒子(这个属性很重要，后面必用)
3D属性简写
如果有移动要先写移动，再写其他的样式
案例：双面翻转⭐
box父盒子里面包含前后两个子盒子
box 是翻转的盒子 front是前面盒子 back是后面盒子
<body> <div class="box"> <div class="font">柯南</div> <div class="back">路飞</div> </div> </body>
body {
perspective: 400px;
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
/*子元素开启立体空间*/
transform-style: preserve-3d;
transition: all .4s;
backface-visibility: hidden;
}
.box:hover {
transform: rotateY(180deg);
}
.font,
.back {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 50%;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 300px;
}
.font {
background-color: aqua;
z-index: 1;
}
.back {
background-color: red;
transform: rotateY(180deg);
}
案例：3D导航栏⭐
<body> <ul> <li> <div class="box"> <div class="font">熊大</div> <div class="bottom">熊二</div> </div> </li> <li> <div class="box"> <div class="font">熊大</div> <div class="bottom">熊二</div> </div> </li> <li> <div class="box"> <div class="font">熊大</div> <div class="bottom">熊二</div> </div> </li> <li> <div class="box"> <div class="font">熊大</div> <div class="bottom">熊二</div> </div> </li> <li> <div class="box"> <div class="font">熊大</div> <div class="bottom">熊二</div> </div> </li> </ul> </body>
* {
margin: 0;
padding: 0;
}
ul {
margin: 100px;
}
ul li {
float: left;
width: 120px;
height: 35px;
list-style: none;
/* 一会我们需要给box 旋转 也需要透视 干脆给1i加 里面的子盒子都有透视效果 */
perspective: 500px;
margin: 10px;
}
.box {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all .4s;
}
.font,
.bottom {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 35px;
}
.font {
background-color: pink;
z-index: 1;
transform: translateZ(17.5px);
}
.bottom {
background-color: skyblue;
/* 这个x轴一定是负值 */
/* 如果有移动要先写移动，再写其他的 */
transform: translateY(50%) rotateX(-90deg);
}
.box:hover {
transform: rotateX(90deg);
}
案例：旋转木马⭐
<body> <section> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </section> </body>
body {
perspective: 1000px;
}
section {
position: relative;
width: 300px;
height: 200px;
margin: 150px auto;
transform-style: preserve-3d;
animation: move 10s linear infinite;
background: url(media/pig.jpg) no-repeat;
}
section div {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(media/dog.jpg) no-repeat;
}
@keyframes move {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
section div:nth-child(1) {
transform: rotateY(0deg) translateZ(300px);
}
section div:nth-child(2) {
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3) {
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4) {
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5) {
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6) {
transform: rotateY(300deg) translateZ(300px);
}
浏览器私有前缀
-
-moz-：代表 firefox 浏览器私有属性
-
-ms-：代表 ie 浏览器私有属性
-
-ms-：代表 ie 浏览器私有属性
-
-webkit-：代表 safari、chrome 私有属性
-
-o-：代表 Opera 私有属性
移动端
meta视口标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2倍图
物理像素&物理像素比
-
我们开发时候的1px 不是一定等于1个物理像素的
-
我们开发时候的1px 不是一定等于1个物理像素的
-
PC端页面，1个px 等于1个物理像素的，但是移动端就不尽相同
-
PC端页面，1个px 等于1个物理像素的，但是移动端就不尽相同
-
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比
多倍图
/* 在 iphone8 下面 */
img{
/*原始图片100*100px*/
width: 50px;
height: 50px;
}
.box{
/*原始图片100*100px*/
background-size: 50px 50px;
}
背景缩放 background-size
background-size: 背景图片宽度 背景图片高度;
-
单位： 长度|百分比|cover|contain;
-
只写一个参数 肯定是宽度 高度省略了 会等比例缩放
-
里面的单位可以跟% 相对于父盒子来说的
-
cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
-
contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
扫一扫
244
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
