# 1.公共样式的提取
>减少代码的冗余度，简洁易增改
把共有的，常用的css封装在base.css里
~~~
*(margin:0;padding:0);
text-decoration: none;
text-align: center;
.row::after{
content:"";
display: block;
clear: both;
}
.row::before{
content:"";
display: block;
clear: both;
}
margin-left: auto;
margin-right: auto;
~~~
# 2. `css2d`转换
~~~
transform:translate(x,y) rotate(30deg)
//位移
translate(x,y)
//旋转
rotate()
//缩放
scale(x,y)
//倾斜
skew(x,y)
配合transform属性使用
~~~
### 2.1 另一种位移 translate
~~~
//translate(x,y) x横坐标方向移动的距离,y纵坐标方向移动的距离
{
transform:translate(50px,100px);
}
~~~
###2.2 另一种垂直水平居中
~~~
.parent{
width: 300px;
height: 300px;
background: red;
position: relative;
}
.child{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
~~~
### 2.3 transition 动画过渡
>宽加长一倍的过渡效果
~~~
div{
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover{
width: 200px;
}
~~~
- 以下是悬停时的跳动加阴影效果的自然过渡实现
~~~
div{
width: 100px;
height: 100px;
background: red;
/* all -->hover的所有属性都过渡的效果，
1s -->在一秒内完成 */
transition: all 1s;
}
div:hover{
transform: translateY(-10px);
//阴影效果
box-shadow: 0 0 10px 3px #333;
}
~~~
### 2.4 rotate 旋转
~~~
div{
width: 100px;
height: 100px;
background: red;
transition: all 1s;
//旋转的原点改为右下角
transform-origin: right bottom;
}
div:hover{
//顺时针旋转180度（也可以取负值
transform: rotate(180deg);
}
~~~
### 2.5 scale 缩放 skew倾斜
~~~
div{
width: 100px;
height: 100px;
background: red;
transition: all 1s;
}
div:hover{
//缩放为原来的0.8倍
transform: scale(0.8);
//倾斜30度
transform: skew(30deg);
/* 倾斜也有x有y */
transform: skew(30deg,20deg);
}
~~~
# 3. animate 动画
>注意关键帧 @keyframes
以下是类似于进度条的无限循环动画效果
~~~
@keyframes animate{
0%{
background: #333;
}
25%{
background: yellow;
width: 25%
}
50%{
background: aqua;
width: 50%;
}
70%{
background: aquamarine;
width: 70%;
}
100%{
background: green;
width: 100%;
}
}
div{
//infinite -->无限循环
animation: animate 2s infinite;
width: 0;
height: 1px;
}
~~~
# 4. 点击转换小页面的demo
- 模板为小米登录界面，应用于小米登录界面作业中
~~~
//需要去CDN引用在线 jQuery
//<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style>
//常规操作
*{margin: 0;padding: 0}
.form{
text-align: center;
width: 400px;
border: 1px solid #333;
margin-left: auto;
margin-right: auto;
}
.form-content{
position:relative;
height: 300px;
}
//垂直水平居中
.form-content>div{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
//key
/* 默认隐藏 */
.saoma{
display: none;
}
.nav{
line-height: 50px;
border-bottom: 1px solid #333;
}
input{
width: 300px;
height: 40px;
margin-top: 30px;
}
//class为active的经典应用
.active{
color: orangered;
}
/* 效果是悬停时光标变为小手 */
.nav span{
cursor: pointer;
}
</style>
<body>
<!-- 关键点：把点击导航栏的参数传到显示栏 -->
<div class="form">
<div class="nav">
<!-- 这样这时给class="active",可以达到初始默认为选中后字体橙色效果 -->
<span class="active">账号登录</span>
<span>扫码登录</span>
</div>
<div class="form-content">
<div class="account">
<p><input type="text" placeholder="请输入用户名"></p>
<p><input type="password" placeholder="请输入密码"></p>
</div>
<div class="saoma">
<img src="images/erwei.png" alt="">
</div>
</div>
</div>
<script>
$(".nav span").click(function(){
$(this).addClass("active").siblings().removeClass("active");
// 获取参数并打印
console.log($(this).index())
// eq是块的意思，index是参数的意思
$(".form-content>div").eq($(this).index()).show().siblings().hide()
})
</script>
//小米登录界面在实际敲码的时候有一些变化
//主要是.nav-tabs有三个参数，而传送0和2的才是我们想要转换的
<script>
$(".nav-tabs a").click(function(){
$(this).addClass("active").siblings().removeClass("active");
// 获取参数并打印
console.log($(this).index())
// eq是块的意思，index是参数的意思
//不使用 $(".form-content>div").eq($(this).index()).show().siblings().hide()
if($(this).index()==0){
$(".tab-now").show()
$(".ertab-link").hide()
}
else{
$(".ertab-link").show().siblings().hide()
}
})
</script>
//另外，在实际运用中还有所不同的是
//因为.nav-tabs中是a标签，span标签，a标签的结构
/* .nav-tabs a.active
在小米的代码里扒的方法，这样可以让两个a标签在已设置过默认颜色后，
被选中的a标签仍能变颜色*/
.nav-tabs a.active{
color: #f56600;
}
~~~
# 5. 收藏夹下拉菜单的自然过渡效果
> 下拉菜单的基本动作实现
~~~
<style>
*{margin: 0;padding: 0}
li{
float:left;
list-style: none;
width: 100px;
text-align: center;
}
a{color: #fff;text-decoration: none;display: block}
ul{
line-height: 50px;
background: pink;
width: 1000px;
margin-right: auto;
margin-left: auto;
}
.drop-nav{
position: relative;
}
//key
.drop-menu{
width: 100px;
background: deeppink;
/* 绝对位置消除了菜单粉色的不必要区域 */
position: absolute;
/* 事先收起下拉菜单 */
display: none;
}
a:hover{
color: gainsboro;background: palevioletred;
}
/* key ，没有去除悬浮影响的话，li悬浮之后，因为悬浮的影响，啥都出不来*/
.row::after{
content: "";
display: table;
clear: both;
}
//key 意为点击.drop-nav时，.drop-menu以块元素形式出现
.drop-nav:hover .drop-menu{
display: block;
}
</style>
<body>
<ul class="row">
<li class="drop-nav">
<a href="#">收藏夹</a>
<div class="drop-menu">
<a href="#">收藏宝贝</a>
<a href="#">收藏店铺</a>
</div>
</li>
<li><a href="#">卖家中心</a></li>
<li><a href="#">联系客服</a></li>
</ul>
~~~
> 自然过渡效果
~~~
上面的代码中，下面的可以不要
/* key */
/* .drop-nav:hover .drop-menu{
display: block;
} */
去CDN中引用jQuery
//<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(".drop-nav").mouseover(function(){
// 只有没有执行动画时，才会走动画
// 下面的否定写法也可以用 ！（叹号）来实现
//if(!$(".drop-menu").is(":animated"))
if($(".drop-menu").is(":animated")==false){
$(".drop-menu").slideDown()
//slideDown滑下
}
}).mouseout(function(){
if($(".drop-menu").is(":animated")==false){
$(".drop-menu").slideUp()
//slideUp滑动收起
}
})
</script>
~~~
- 第一章 git
- 1-1 git基本命令
- 1-2 ssh的配置
- 1-3 版本回退
- 第二章 markdown的基本语法
- 第三章 HTML-CSS
- 1-1 HTML基本概念
- 1-2 CSS常见样式
- 第四章
- 1-1 HTML-02am
- 1-2 HTML-02pm
- 命名规范
- 待整理小要点
- 第五章
- 盒子模型（详细）
- HTML-03
- HTML-定位
- 第六章 JS,DOM,jQuery
- 初识JS
- github-netlify-阿里云配置
- jQuery实例
- 初识Vue
- TOP250电影demo
- HTML-04
- HTML-05
- DOM
- 第七章
- node.js
- css(day07)
- css(day06)
- bootstrap
- vue/cli
- 小程序
- 入门第一天
- java