来八及de拥抱 2022-01-20 14:20 采纳率: 66.7%
浏览 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 15: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月28日
  • 已采纳回答 1月20日
  • 创建了问题 1月20日

悬赏问题

  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度
  • ¥30 关于#r语言#的问题：如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测