来八及de拥抱 2022-01-20 06:20 采纳率: 75%
浏览 43
已结题

网上下载了一个html动画效果,是全屏自适应的,想要添加其他元素进去,但是发现会不再全屏自适应

相关代码(插入的按钮代码只是其一的示列)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>*********</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--悬浮css样式,可重叠 -->
<style>
p.pos_fixed
{
    position:fixed;
    top:40px;
    right:40px;
    color:#CC9999;
}

</style>

<link rel="stylesheet" href="static/css/normalize.min.css">
<link rel="stylesheet" href="static/css/style.css">

</head>
<body>
<!--右上角文字 -->
<p class="pos_fixed"><big>
岁月向来慷慨又温柔 擅长把好坏都<em>带走</em><br>
&nbsp;<br>
新的一年如约而至 新的一岁亦是如此<br>
&nbsp;<br>
愿你<i>野蛮生长</i>,成为自己的<b>月亮</b>🌙</big></p>

<a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        Neon button
    </a>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        Neon button
    </a>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        Neon button
    </a>

<canvas id="canvas"></canvas>

<script src='static/js/zdog.dist.min.js'></script>
<script src='static/js/lodash.min.js'></script>
<script src="static/js/script.js"></script>

</body>
</html>

包含的主要css动画预览位置

https://sc.chinaz.com/jiaobendemo.aspx?downloadid=1202230012386

我的解答思路和尝试过的方法

尝试过 CSS Position(fixed定位) ,但是好像只能有一个

我想要达到的结果

有没有办法使这个绵羊css动画变小一点放到想要的位置,或者是使用其他手段在绵羊动画周边添加其他元素而不影响本身的全屏自适应呢

展开全部

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2022-01-20 07:40
    关注

    按钮也要放到fixed定位的容器里面,要不按钮单独一行了会出现滚动条,因为canvas高度宽度用的可视窗宽度,高度,改下面就可以了

    img

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML5可爱的小绵羊动画特效 - 站长素材</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <link rel="stylesheet" href="https://demosc.chinaz.net/Files/DownLoad/webjs1/202201/jiaoben9000/static/css/normalize.min.css">
        <link rel="stylesheet" href="https://demosc.chinaz.net/Files/DownLoad/webjs1/202201/jiaoben9000/static/css/style.css">
        <style>
            p.pos_fixed {
                position: fixed;
                top: 40px;
                right: 40px;
                color: #CC9999;
            }
            .btns{position:fixed;left:0;top:0}
        </style>
    
    </head>
    <body>
        <!--右上角文字 -->
        <p class="pos_fixed">
            <big>
                岁月向来慷慨又温柔 擅长把好坏都<em>带走</em><br>
                &nbsp;<br>
                新的一年如约而至 新的一岁亦是如此<br>
                &nbsp;<br>
                愿你<i>野蛮生长</i>,成为自己的<b>月亮</b>🌙
            </big>
        </p>
        <div class="btns">
            <a href="#">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                Neon button
            </a>
            <a href="#">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                Neon button
            </a>
            <a href="#">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                Neon button
            </a>
        </div>
        <canvas id="canvas"></canvas>
    
        <script src='https://demosc.chinaz.net/Files/DownLoad/webjs1/202201/jiaoben9000/static/js/zdog.dist.min.js'></script>
        <script src='https://demosc.chinaz.net/Files/DownLoad/webjs1/202201/jiaoben9000/static/js/lodash.min.js'></script>
        <script src="https://demosc.chinaz.net/Files/DownLoad/webjs1/202201/jiaoben9000/static/js/script.js"></script>
    
    </body>
    </html>
    
    

    img


    有其他问题可以继续交流~

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 1月27日
  • 已采纳回答 1月20日
  • 创建了问题 1月20日

悬赏问题

  • ¥15 pycharm倒入虚拟环境的时候,显示这个,但是我的虚拟环境已经创建了
  • ¥15 FPGA芯片60进制计数器
  • ¥15 前端js怎么实现word的.doc后缀文件在线预览
  • ¥20 macmin m 4连接iPad
  • ¥15 DBIF_REPO_SQL_ERROR
  • ¥15 根据历年月数据,用Stata预测未来六个月汇率
  • ¥15 DevEco studio开发工具 真机联调找不到手机设备
  • ¥15 请教前后端分离的问题
  • ¥15 下载honeyd时报错 configure: error: you need to instal a more recent version of libdnet
  • ¥15 距离软磁铁一定距离的磁感应强度大小怎么求
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部