@media 实现响应式布局

根据不同分辨率使用不同css文件

1
2
<link rel="stylesheet" media="screen and (max-width: 1024px)" href="middle.css" />
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

根据不同分辨率使用不同样式

媒体特性语法：

@media 媒体类型 and （媒体特性）{

​ CSS样式

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
当终端宽度大于1300像素时（常见于电脑屏幕）
@media screen and (min-width: 1300px){
    .box {
        ...
    }
}
当终端宽度在768像素与1300像素时（常见于ipad）
@media screen and (min-width: 768px) and (max-width: 1300px) {
    .box {
        ...
    }
}
当终端宽度小于768像素时（常见于手机） 
@media screen and (max-width: 768px){
    .box {
        ...
    }
}

css3实现div旋转

1
2
3
4
5
6
7
8
9
.music{
   animation:rotating 1.2s linear infinite
   //animation:rotating 5s infinite;
   -webkit-animation:rotating 5s infinite;
}
@keyframes rotating{
   from{transform:rotate(0)}
   to{transform:rotate(360deg)}
}

鼠标经过图片放大

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.enlarge{
    width: 200px;
    height: 200px;
    overflow: hidden;	//图片超出隐藏
    border: 1px #ffffff solid;
}
.enlarge img{
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: all 0.6s;
    -ms-transition: all 0.8s;
}
.enlarge img:hover{
    transform: scale(1.3);
    -ms-transform: scale(1.2);
}

Css动画相关

1
2
3
4
5
6
//边框带阴影
box-shadow: 0px 5px 30px rgb(15 91 183 / 10%);
//对元素进行移动
transform: translateY(-3px);
//过渡效果
transition: box-shadow .3s, border .3s, background-color .3s, color .3s, transform .3s;