开启移动Web开发之旅：第一天体验

平面转换

平面转换的意思就是在x轴或者y轴进行转换。

<style>

div {

margin: 100px 0;

width: 100px;

height: 100px;

background-color: pink;

/* 过渡 */

transition: all 1s;

}

/* 鼠标滑过：添加动态效果 */

div:hover {

/* translate 位移 rotate 旋转 scale 缩放 skew 倾斜 */

transform: translate(800px) rotate(360deg) scale(2) skew(180deg);

}

</style>

平面转换-平移

注意坐标轴方向，右+下+

平移实现定位居中

left top指定50%之后左上角居中了，因此还需要进行平移上左各50%。

案例-双开门

平面转换-旋转

转换原点

案例

多重转换

缩放

案例-播放效果

opacity:0,表示透明度是0

倾斜

渐变

线性渐变

默认从上往下渐变，to right从左往右渐变、45deg表示倾斜45度渐变 red80%表示占比80%渐变。

background-image: linear-gradient(

red,

green

);

background-image: linear-gradient(

to right,

red,

green

);

background-image: linear-gradient(

45deg,

red,

green

);

background-image: linear-gradient(

red 80%,

green

);

线性渐变案例

径向渐变

从中间开始逐渐向外渐变。

50px表示半径大小 center center表示水平垂直居中。

综合案例-喜马拉雅

箭头旋转

鼠标悬停到这发生旋转

所有频道由上往下滑出来

/* TODO 2. 弹窗频道 */

.x-header-nav .nav-item:hover .channel-layer {

transform: translateY(0);

}

本来是transform: translateY(-120);，在Y轴上面，这次在鼠标悬停的时候使用transform: translateY(0);使其回归到顶端。

效果如下

渐变按钮

/* TODO 3. 渐变按钮 */

.x-header-search form .btn {

position: absolute;

top: 0;

right: 0;

width: 60px;

height: 40px;

line-height: 40px;

text-align: center;

background-color: #f86442;

border-top-right-radius: 20px;

border-bottom-right-radius: 20px;

background-image: linear-gradient(

to right,

rgba(255, 255, 255, 0.3),

#f86442

);

}

以下代码设置了渐变，以白色半透明为背景。

background-image: linear-gradient(

to right,

rgba(255, 255, 255, 0.3),

#f86442

);

登陆按钮

右键检查一下，发现了css位置如下

点ctrl+g,即可输入行号488进行定位。

效果如下

线性渐变代码如下——

background-image: linear-gradient(

to right,

rgba(255, 255, 255, 0.2),

#ff7251

);

下载按钮加渐变

效果如下

banner

摆放left right两张图片

缩放造成了本来靠左的，结果不靠左了，因此使用transform-origin改变原点，从左边或右边进行缩放。

效果如下

动态效果

鼠标悬停的时候加了遮罩渐变盒子，加了背景图播放按钮，加了放大效果。

父级准备好了relative

子级添加了播放按钮和遮罩

位置采用了left 0 top 0 postion:absolute

no-repeat ,设置不平铺

center,居中

/ 20px,设置播放按钮大小

opacity: 0;表示默认看不见

transition: all .5s; 表示0.5秒的过渡效果

使用hover让遮罩显示出来

.album-item .album-item-box:hover::after {

opacity: 1; 表示显示遮罩

background-size: 50px; 表示让背景变大

}