怎么用css的方法将门打开后展示灯笼自上而下的动画?

html-css020

怎么用css的方法将门打开后展示灯笼自上而下的动画?,第1张

您可以使用 CSS 动画来实现门打开后展示灯笼自上而下的动画效果。具体步骤如下:

1. 在 HTML 中创建门和灯笼的元素,并给这些元素添加类名。例如:

<div class="door">门</div>

<div class="lantern">灯笼</div>

2. 在 CSS 中为门添加打开的样式。例如,可以使用 transform 属性来旋转门:

.door {

transform: rotate(90deg)

}

3. 为灯笼添加动画样式。可以使用 CSS 的 animation 属性来实现动画效果。例如,可以使用以下样式来使灯笼从上方移动到下方:

.lantern {

animation: moveDown 1s ease-in-out

}

@keyframes moveDown {

from {

top: -100px

}

to {

top: 100px

}

}

4. 使用 JavaScript 来控制动画的播放。可以在门打开后调用灯笼元素的 classList.add 方法,来添加动画类名,从而触发动画的播放。

例如:

document.querySelector('.door').addEventListener('click', function() {

document.querySelector('.lantern').classList.add('lantern-animation')

})

希望这些信息能帮助到您!

/* css3 让一个图片不断翻转示例代码 */

#gavinPlay{

/* background:color url x y repeat 图片来自百度图片,按需要更换 */

background:red url("https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2406548182,3889596045&fm=80") center no-repeat

/* background-size:auto auto || cover 代表以宽或高填满元素背景 */

background-size:cover

/* 随便设置宽高值,测试 */

width:200px

height:200px

/* 设置默认样式,开启3d硬件加速 */

-webkit-transform:translate3d(0,0,0)

-moz-transform:translate3d(0,0,0)

transform:translate3d(0,0,0)

/* 设置动画,animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放 */

-webkit-animation:play 3s linear infinite

-moz-animation:play 3s linear infinite

animation:play 3s linear infinite

}

@-webkit-keyframes play{

0%  {

/*

水平翻转

*/

-webkit-transform:rotateY(0deg)

/*

垂直翻转

-webkit-transform:rotateX(0deg)

顺时针旋转

-webkit-transform:rotate(0deg)

逆时针旋转

-webkit-transform:rotate(0deg)

*/

}

100% {

/* 水平翻转 */

-webkit-transform:rotateY(360deg)

/* 垂直翻转

-webkit-transform:rotateX(360deg)

顺时针旋转

-webkit-transform:rotate(360deg)

逆时针旋转

-webkit-transform:rotate(-360deg)

*/

}

}

@-moz-keyframes play{

0%  {

-moz-transform:rotateY(0deg)

/*

-moz-transform:rotateX(0deg)

-moz-transform:rotate(0deg)

-moz-transform:rotate(0deg)

*/

}

100% {

-moz-transform:rotateY(360deg)

/*

-moz-transform:rotateX(360deg)

-moz-transform:rotate(360deg)

-moz-transform:rotate(-360deg)

*/

}

}

@keyframes play{

0%  {

transform:rotateY(0deg)

/*

transform:rotateX(0deg)

transform:rotate(0deg)

transform:rotate(0deg)

*/

}

100% {

transform:rotateY(360deg)

/*

transform:rotateX(360deg)

transform:rotate(360deg)

transform:rotate(-360deg)

*/

}

} <!-- html 布局代码 -->

<div id="gavinPlay"></div>

transition使用

为鼠标指针的滑过状态设置一些动画效果。图标在1秒内匀速旋转360度。

.close:hover::before{

-webkit-transform:rotate(360deg)

transform:rotate(360deg)

-webkit-transition:-webkit-transform 1s linear

transition:transform 1s linear

}