来八及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 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。