关于HarmonyOS的学习

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;

}

}