HTML如何做翻动？

好文

已推荐头条热点 2022年12月27日 02:58:08 5 2 网创网营销顾问知名网络工程师互联网优化师本文总共597个字，预计阅读时间或需2分钟

热门回答：

要做到翻动。这是我编了一个模拟书籍翻页的效果。运用到CSS3 @keyframes 关键字。在创建动画时。把它连到一个选择器。并用百分比产生时间轴。然后就会看到动画效果翻页效果。如下是部分源码。请关注我。并与你分享。谢谢！<!DOCTYPE html>

<html>

<head>

<style>

body

{

perspective: 1000px;

background-color: #212121;

}

.box

{

position: absolute;

top: 50%;

left: 50%;

……

}

.box1 {

position: absolute;

top: 0;

left: 0;

width: 200px;

height: 300px;

border: 1px solid #1976D2;

transform-origin: 0 50%;

background:Beige;

animation: mybox 5s;

}

……

@keyframes mybox

{

0% {transform: rotateY(0deg);}

50% {transform: rotateY(-150deg);}

100%{transform: rotateY(0deg);}

}

</style>

</head>

<body>

……

<p>

首<br>页

</p>

</div>

……

下面在手机AIDE Web应用中运行结果

您还感兴趣的文章推荐

以上就是由互联网推广工程师网创网整理编辑的，如果觉得有帮助欢迎收藏转发~

本文标题：HTML如何做翻动？
本文地址：https://www.wangchuang8.com/111551.html，转载请说明来源于：网创推广网
声明：本站部分文章来自网络，如无特殊说明或标注，均为本站原创发布。如若本站内容侵犯了原著者的合法权益，可联系进行处理。分享目的仅供大家学习与参考,不代表本站立场。