day9
一、动画
1.animation动画不需要事件(用户在网页中的一系列操作,如鼠标悬停、点击等)触发,而transition需要事件触发。
2.语法:
动画名称 : animation-name: cjh 动画持续时间 : animation-duration: 3s; 动画执行次数 :(infinite表示无限执行) animation-iteration-count: infinite; 动画类型 : animation-timing-function: linear; 动画执行方向 : animation-direction: alternate; 动画延迟时间: animation-delay: 3s; 动画暂停: animation-play-state:paused 缩写形式: animation: cjh 3s infinite linear alternate;
3.动画执行体: 动画需要做什么事,将逻辑写在执行体中 @keyframes cjh{ from{ transform: translateX(0px) rotateZ(0deg); } to{ transform: translateX(800px) rotateZ(360deg); }
二、旋转相册
css:
*{
margin: 0;
padding: 0;
}
body{
background-color: black;
}
h1{
color: red;
margin-top: 50px;
}
ul{
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 200px;
position: relative;
/* 把2D转成3D空间 */
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(0deg);
animation: zt 5s infinite linear;
}
ul li{
width: 200px;
height: 200px;
list-style: none;
text-align: center;
line-height: 200px;
position: absolute;
}
ul li img{
width: 200px;
height: 200px;
transition: all 1s;
}
ul li:nth-child(1){
background-color: gold;
transform: rotateY(60deg) translateZ(200px);
}
ul li:nth-child(2){
background-color: skyblue;
transform: rotateY(120deg) translateZ(200px);
}
ul li:nth-child(3){
background-color: orange;
transform: rotateY(180deg) translateZ(200px);
}
ul li:nth-child(4){
background-color: greenyellow;
transform: rotateY(240deg) translateZ(200px);
}
ul li:nth-child(5){
background-color: hotpink;
transform: rotateY(300deg) translateZ(200px);
}
ul li:nth-child(6){
background-color: purple;
transform: rotateY(360deg) translateZ(200px);
}
@keyframes zt{
from{
transform:rotateX(-20deg) rotateY(0deg);
}
to{
transform:rotateX(-20deg) rotateY(360deg);
}
}
ul:hover{
animation-play-state: paused;
}
ul:hover li{
opacity: .5;
}
ul li:hover{
opacity: 1;
}
ul li:hover img{
transform: scale(1.3);
}
body:
<marquee><h1>欢迎张先生来到陈真爱有缘网,参加相亲活动....</h1></marquee> ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
三、跑步效果
div{
width: 200px;
height: 300px;
border: 1px solid;
margin: 50px auto;
background: url("./img/charector.png") no-repeat;
/* step-start 可以让动画连续执行,上一张结束立马执行下一张 */
animation: play 1s infinite step-start;
}
@keyframes play{
0%{
background-position-x: 0;
}
14.28%{
background-position-x: -180px;
}
28.56%{
background-position-x: -360px;
}
42.85%{
background-position-x: -540px;
}
57.13%{
background-position-x: -720px;
}
71.41%{
background-position-x: -900px;
}
85.69%{
background-position-x: -1080px;
}
100%{
background-position-x: 0;
}
}
四、无缝轮播
css:
*{
margin: 0;
padding: 0;
}
div{
width: 960px;
height: 100px;
border: 1px solid;
margin: 50px auto;
overflow: hidden;
}
ul{
/* calc()进行四则运算 */
width: calc(960px * 2);
height: 100px;
animation: play 5s infinite linear;
}
ul li{
list-style: none;
width: 120px;
height: 100px;
float: left;
}
ul li img{
width: 100%;
height: 100%;
}
@keyframes play{
from{
margin-left: 0px;
}
to{
margin-left: -960px;
}
}
ul:hover{
animation-play-state: paused;
}
ul:hover li{
opacity: .5;
}
ul li:hover{
opacity: 1;
}
body:
div> ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
</div>
五、下拉菜单
css:
*{
margin: 0;
padding: 0;
}
ul, ol{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
.nav{
width: 800px;
height: 40px;
background-color: #ccc;
margin: 50px auto;
}
.nav>li{
list-style: none;
float: left;
line-height: 40px;
padding: 0 20px;
}
.nav>li:nth-child(3){
position: relative;
}
.nav>li:nth-child(3) ul{
width: 100%;
background-color: #ccc;
position: absolute;
left: 0;
top: 40px;
height: 0;
overflow: hidden;
transition: all 1s;
}
.nav>li:nth-child(3) ul li{
text-align: center;
font-size: 14px;
}
.nav>li:hover{
background-color: purple;
}
.nav>li:nth-child(3):hover ul{
height: 120px;
}
body:
ul class="nav"> <li>首页</li> <li>新闻资讯</li> <li> a href="#">产品中心</a>
ul> <li><a href="#">产品1</a></li> <li><a href="#">产品2</a></li> <li><a href="#">产品3</a></li> </ul>
</li> <li>客户服务</li> <li>维修详情</li> <li>了解我们</li> <li>张涛哈哈</li> </ul>
六、媒体查询
可以让我们根据不同设备的尺寸来设置不一样的样式。
*{
margin: 0;
padding: 0;
}
/* div{
width: 100%;
height: 100px;
background-color: orange;
} */
/* media表示的是媒体,all表示的是所有的设备类型 and表示并且 */
/* 表示满足条件的时候,执行媒体查询里面的代码 */
/* not表示排除某种设备,理解为取反 */
/* @media not all and (min-width:800px) {
div{
height: 200px;
background-color: yellow;
}
} */
/* @media all and (max-width:800px) {
div{
height: 200px;
background-color: yellow;
text-align: center;
font-size: 20px;
color: red;
}
} */
/* 表示在320px--1000px之间才满足条件 */
/* @media all and (min-width:320px) and (max-width:1000px) {
div{
height: 200px;
background-color: yellow;
text-align: center;
font-size: 20px;
color: red;
}
} */
/* only表示限定为某种设备类型,screen表示屏幕、笔记本、手机等待设备 */
/* @media only screen and (min-width:320px) and (max-width:1000px) {
div{
height: 200px;
background-color: yellow;
text-align: center;
font-size: 20px;
color: red;
}
} */
/* 竖屏 */
@media screen and (orientation:portrait) {
div{
width: 100%;
height: 200px;
background-color: orange;
color: red;
}
}
/* 横屏 */
@media screen and (orientation:landscape){
div{
width: 100%;
height: 100px;
background-color: hotpink;
color: skyblue;
}
}
</style>
</head>
<body>
<!--
媒体查询
+ 可以让咱们根据不同的设备的尺寸,给其设置不一样的样式
-->
<div>媒体查询</div>
七、媒体查询适配rem
html{
font-size: 120px;
}
@media all and (max-width: 1080px){
html{
font-size: 100px;
}
}
@media all and (max-width: 750px){
html{
font-size: 75px;
}
}
@media all and (max-width: 640px){
html{
font-size: 64px;
}
}
@media all and (max-width: 320px){
html{
font-size: 32px;
}
}
div{
width: 1rem;
height: 1rem;
background-color: orange;
}
八、媒体查询改变背景图
*{
margin: 0;
padding: 0;
}
.banner{
width: 100%;
height: 500px;
background: url("./img/2.jpg") no-repeat;
background-size: 100% 100%;
}
@media all and (max-width:750px){
.banner{
background: url("./img/3.jpg") no-repeat;
background-size: 100% 100%;
}
}
九、隐藏网页内容
*{
margin: 0;
padding: 0;
}
.container{
max-width: 1080px;
height: 300px;
background-color: hotpink;
margin: 0 auto;
}
.container .left{
width: 50%;
height: 200px;
background-color: skyblue;
float: left;
}
.container .right{
width: 50%;
height: 200px;
background-color: gold;
float: left;
}
/* @media all and (max-width:750px){
.container .left{
width: 100%;
height: 200px;
background-color: skyblue;
float: none;
}
.container .right{
width: 50%;
height: 200px;
background-color: gold;
float: left;
display: none;
}
} */
@media all and (max-width:750px){
.container{
height: 600px;
}
.container .left{
width: 100%;
height: 200px;
background-color: skyblue;
float: none;
}
.container .right{
width: 100%;
height: 200px;
background-color: gold;
float: none;
}
}