前端(动态雪景背景+动态蝴蝶)

 

1.CSS样式

<style>
    html, body, a, div, span, table, tr, td, strong, ul, ol, li, h1, h2, h3, p, input {
      font-weight: inherit;
      font-size: inherit;
      list-style: none;
      border-spacing: 0;
      border: 0;
      border-collapse: collapse;
      text-decoration: none;
      padding: 0;
      margin: 0;
    }
    html, body {
      font-family: "Segoe UI",Segoe,Tahoma,Arial,Verdana,sans-serif;
      background-color: #3D69A4;
      overflow: hidden;
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
    }
    .snow .snow_slice {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 600px;
      pointer-events: none;
      transform-origin: 0% 0%;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      overflow: hidden;
      z-index: 2;
    }
    .snow .snow_1 {
      animation-name: snow_falling_fore;
      animation-delay: 0s;
      animation-duration: 50s;
      height: 100%;
      top: -100%;
      pointer-events: none;
    }
    .snow .snow_2 {
      animation-name: snow_falling_fore;
      animation-delay: 25s;
      animation-duration: 50s;
      height: 100%;
      top: -100%;
      pointer-events: none;
    }
    .snow .snow_3 {
      animation-name: snow_falling_mid;
      animation-delay: 0s;
      animation-duration: 70s;
      opacity: .5;
      top: -100%;
      height: 100%;
      pointer-events: none;
    }
    .snow .snow_4 {
      animation-name: snow_falling_mid;
      animation-delay: 35s;
      animation-duration: 70s;
      opacity: .5;
      top: -100%;
      height: 100%;
      pointer-events: none;
    }
    .snow .snow_drifter {
      width: 100%;
      height: 100%;
      background-repeat: repeat;
      background-image: url(./image/snow-static.png);
      pointer-events: none;
    }
    @keyframes snow_falling_fore {
      0% {
        top:-100%;
        opacity:0
      }
      1% {
        top:-100%;
        opacity:1
      }
      99.8% {
        top:100%;
        opacity:1
      }
      99.9% {
        opacity:0
      }
      100% {
        top:-100%;
        opacity:0
      }
    }
    @keyframes snow_falling_mid {
      0% {
        top:-100%;
        opacity:0
      }
      1% {
        top:-100%;
        opacity:1
      }
      99.8% {
        top:100%;
        opacity:1
      }
      99.9% {
        opacity:0
      }
      100% {
        top:-100%;
        opacity:0
      }
    }
    /* 四边 */
    .frost {
      height: 100%;
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 2;
    }
    .frost .frame_sprite {
      position: absolute;
      height: 100px;
      background-repeat: repeat-x;
      background-size: contain;
      background-position: center bottom;
      background-image: url(./image/border-ice.png);
    }
    .frost .frame_left {
      top: -133px;
      left: 0;
      transform: rotate(90deg);
      transform-origin: 0 100px;
      pointer-events: none;
      width: 500%;
    }
    .frost .frame_right {
      top: 100%;
      left: calc(100% - 100px);
      transform: rotate(-90deg);
      transform-origin: 0 0;
      width: 500%;
      pointer-events: none;
    }
    .frost .frame_top {
      top: 0;
      width: 500%;
      transform: rotate(180deg);
      pointer-events: none;
    }
    .frost .frame_bottom {
      bottom: 0;
      left: 0;
      width: 500%;
      pointer-events: none;
    }


     @keyframes left {
            0%{
                transform: rotateY(0deg);
                transform-origin: right center;
                perspective: 201px;

            }
            50%{
                transform: rotateY(70deg);
                transform-origin: right center;
                perspective: 201px;

            }
            100%{
                transform: rotateY(0deg);
                transform-origin: right center;
                perspective: 201px;
            }
        }
        @keyframes right {
            0%{
                transform: rotateY(0);
                transform-origin: left center;
                perspective: 201px;

            }
            50%{
                transform: rotateY(-70deg);
                transform-origin: left center;
                perspective: 201px;

            }
            100%{
                transform: rotateY(0);
                transform-origin: left center;
                perspective: 201px;

            }
        }

     #butterfly{
          margin-top: 150px;
            width: 600px;
            height: 500px;
            position: absolute;
            transform: scale(0.35);
            transform-style: preserve-3d;
      }

      #butterfly2{
        margin-top: 150px;

            width: 600px;
            height: 500px;
            margin-left: 1200px;
            position: relative;
            transform: scale(0.35);
            transform-style: preserve-3d;
      }


      .leftSide{
            width: 267px;
            height: 421px;
            background: url("image/leftSide.png") no-repeat;
            position: absolute;
            left: 26px;
            top: 40px;
            animation: left 2s infinite;
            z-index: 9999;
        }

        .body{
            width: 152px;
            height: 328px;
            background: url("image/body.png") no-repeat;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            z-index: 9999;
        }
        .rightSide{
            width: 284px;
            height: 460px;
            background: url("image/rightSide.png") no-repeat;
            position: absolute;
            right: 26px;
            top: 58px;
            animation: right 2s infinite;
            z-index: 9999;
        }

  • transform: rotate(90deg):将元素旋转90度。
  • transform-origin: 0 100px;:设置元素的变换原点为左上角,偏移量为100像素。
  • pointer-events: none:禁止鼠标事件在元素上触发。
  • width: 500%;:将元素的宽度设置为其父元素宽度的500%。
  • left: calc(100% - 100px):将元素的宽度减去100像素,然后将结果作为左外边距的值。这样做可以使得元素在水平方向上相对于其父元素进行定位,并且保持一定的距离。

 2.HTML

<div id="butterfly">
    <div class="leftSide"></div>
    <div class="body"></div>
    <div class="rightSide"></div>

</div>


<div id="butterfly2" >
  <div class="leftSide"></div>
  <div class="body"></div>
  <div class="rightSide"></div>

</div>
<div class="image" style="position: absolute;top: 0;" >
  <img src="image/lxja.webp" style="width: 600px;margin-left: 600px;margin-top: 50px;border-radius: 50px;">

</div>

  <div class="snow">
    <div class="snow_slice snow_1">
      <div class="snow_drifter drift_1"></div>
    </div>
    <div class="snow_slice snow_2">
      <div class="snow_drifter drift_2"></div>
    </div>
    <div class="snow_slice snow_3">
      <div class="snow_drifter drift_3"></div>
    </div>
    <div class="snow_slice snow_4">
      <div class="snow_drifter drift_4"></div>
    </div>
  </div>
  <div class="frost">
    <div class="frame_sprite frame_left"></div>
    <div class="frame_sprite frame_right"></div>
    <div class="frame_sprite frame_top"></div>
    <div class="frame_sprite frame_bottom"></div>
  </div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/515553.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++从入门到精通——入门知识

1. C关键字(C98) C总计63个关键字&#xff0c;C语言32个关键字 2. 命名空间 在C/C中&#xff0c;变量、函数和后面要学到的类都是大量存在的&#xff0c;这些变量、函数和类的名称都将存在于全局作用域中&#xff0c;可能会导致很多冲突。使用命名空间的目的就是对标识符的名…

43.1k star, 免费开源的 markdown 编辑器 MarkText

43.1k star, 免费开源的 markdown 编辑器 MarkText 分类 开源分享 项目名: MarkText -- 简单而优雅的开源 Markdown 编辑器 Github 开源地址&#xff1a; https://github.com/marktext/marktext 官网地址&#xff1a; MarkText 支持平台&#xff1a; Linux, macOS 以及 Win…

中文Mistral模型介绍(Chinese-Mistral)——中文大语言模型

中文Mistral简介 Chinese-Mistral由清华大学地学系地球空间信息科学实验室开发。 该模型基于Mistral发布的Mistral-7B-v0.1训练得到。首先进行中文词表扩充&#xff0c;然后采用实验室提出的PREPARED训练框架&#xff08;under review&#xff09;在中英双语语料上进行增量预训…

C++Date类的实现

目录 前言&#xff1a; 1.显示日期 2.构造函数与获取某年某月的日期的函数 3.日期比较 4.日期加减天数 5.日期减日期 6.前置后置与-- 7.完整代码 8.测试 总结&#xff1a; 感谢支持&#xff01; 前言&#xff1a; 结合了前面的内容的学习&#xff0c;本篇来对之前的…

面试篇:杂乱篇

String s " "; 1. String类的常用方法有哪些&#xff1f; s.length()&#xff1a; 返回字符串长度s.substring()&#xff1a; 截取字符串s.split()&#xff1a; 分割字符串s.equlas()&#xff1a; 字符串比…

Ai智能生成图片神器,多种风格任你选,探索无限可能的视觉盛宴

在数字化浪潮中&#xff0c;图片已成为我们表达创意、传递情感、展示品牌的重要工具。然而&#xff0c;不是每个人都有专业的设计背景&#xff0c;也不是每个创作者都能轻松驾驭各种风格。这时&#xff0c;一款强大而灵活的AI智能生成图片神器应运而生&#xff0c;它将为你的创…

Vol.34 Good Men Project:一个博客网站,每月90万访问量,通过付费订阅和广告变现

今天给大家分享的案例网站是&#xff1a;Good Men Project&#xff0c;这是一个专门针对男性成长的博客网站&#xff0c;内容包括人际关系、家庭、职业发展等话题。 它的网址是&#xff1a;The Good Men Project - The Conversation No One Else Is Having 流量情况 我们先看…

【python实战】--提取所有目录下所有Excel文件指定列数据

系列文章目录 文章目录 系列文章目录前言一、问题描述二、python代码1.引入库 总结 前言 一、问题描述 需要提取指定路径下所有excel文件中指定一列数据&#xff0c;汇总到新文件&#xff0c;&#xff08;逐列汇总&#xff09; 二、python代码 1.引入库 代码如下&#xff08…

vue弹出的添加信息组件中 el-radio 单选框无法点击问题

情景描述:在弹出的添加信息的组件中的form中有一个单选框,单选框无法进行点击切换 原因如下: 单选框要求有个默认值,因为添加和更新操作复用同一个组件,所以我在初始化时对相关进行了判定,如果为空则赋初始值 结果这样虽然实现了初始值的展示,但是就是如此造成了单选框的无法切…

【MATLAB源码-第176期】基于matlab的16QAM调制解调系统频偏估计及补偿算法仿真,对比补偿前后的星座图误码率。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 在通信系统中&#xff0c;频率偏移是一种常见的问题&#xff0c;它会导致接收到的信号频率与发送信号的频率不完全匹配&#xff0c;进而影响通信质量。在调制技术中&#xff0c;QPSK&#xff08;Quadrature Phase Shift Keyin…

NIUSHOP完美运营版商城 虚拟商品全功能商城 全能商城小程序 智慧商城系统 全品类百货商城

完美运营版商城/拼团/团购/秒杀/积分/砍价/实物商品/虚拟商品等全功能商城 干干净净 没有一丝多余收据 还没过手其他站 还没乱七八走的广告和后门 后台可以自由拖曳修改前端UI页面 还支持虚拟商品自动发货等功能 挺不错的一套源码 前端UNIAPP 后端PHP 一键部署版本 源码免费…

基于SpringBoot+Vue前后端分离高校就业信息管理系统的设计与实现+毕业论文

介绍 随着中国大力发展教育事业&#xff0c;在校大学生的数量不断增多&#xff0c;导致大学毕业生的数量也不断增多&#xff0c;就业形势日趋严峻。开发一套符合就业形势的高校就业信息管理系统是非常必要的&#xff0c;这样既能提高就业管理部门的管理水平&#xff0c;又能通…

014——超声波模块驱动开发Plus(基于I.MX6uLL、SR04和poll机制)

目录 一、基础知识 二、分析为什么打印会影响中断 三、驱动程序 四、应用程序 五、验证及其它 一、基础知识 013——超声波模块驱动开发&#xff08;基于I.MX6uLL与SR04&#xff09;-CSDN博客 二、分析为什么打印会影响中断 asmlinkage __visible int printk(const ch…

Loadrunner的使用

Loadrunner的使用 选项公网测试地址&#xff1a;http://cfgjt.cn:8981/devt-web 用户名admin&#xff0c;密码11111111 1.Loadrunner介绍 ​ LoadRunner&#xff0c;是一种预测系统行为和性能的负载测试工具。通过模拟上千万用户实施并发负载及实时性能监测的方式来确认和查…

Ubuntu部署BOA服务器

BOA服务器概述 BOA是一款非常小巧的Web服务器&#xff0c;源代码开放、性能优秀、支持CGI通用网关接口技术&#xff0c;特别适合用在嵌入式系统中。 BOA服务器主要功能是在互联嵌入式设备之间进行信息交互&#xff0c;达到通用网络对嵌入式设备进行监控&#xff0c;并将反馈信…

【c/c++】深入探秘:C++内存管理的机制

&#x1f525;个人主页&#xff1a;Quitecoder &#x1f525;专栏&#xff1a;c笔记仓 朋友们大家好&#xff0c;本篇文章我们详细讲解c中的动态内存管理 目录 1.C/C内存分布2.C语言中动态内存管理方式&#xff1a;malloc/calloc/realloc/free3.c内存管理方式3.1new/delete对内…

LeetCode-199. 二叉树的右视图【树 深度优先搜索 广度优先搜索 二叉树】

LeetCode-199. 二叉树的右视图【树 深度优先搜索 广度优先搜索 二叉树】 题目描述&#xff1a;解题思路一&#xff1a;广度优先搜索解题思路二&#xff1a;深度优先搜索解题思路三&#xff1a;0 题目描述&#xff1a; 给定一个二叉树的 根节点 root&#xff0c;想象自己站在它…

股权激励和期权激励对比辨析

文章目录 概念定义 收益方式 风险评估 应用和分析 股权激励和期权激励&#xff0c;两者的区别是什么&#xff0c;本文就来梳理对比一下。 概念定义 股权激励&#xff0c;是指上市公司以本公司股票为标的&#xff0c;对其董事、高级管理人员及其他员工进行的长期性激励。取得…

微服务(基础篇-008-es、kibana安装)

目录 05-初识ES-安装es_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1LQ4y127n4?p81&vd_source60a35a11f813c6dff0b76089e5e138cc 1.部署单点es 1.1.创建网络 1.2.加载镜像 1.3.运行 2.部署kibana 2.1.部署 2.2.DevTools 3.安装IK分词器 3.1.在线安装ik…

程序员们应注意的行业特有的法律问题

大家好&#xff0c;我是不会魔法的兔子&#xff0c;是一枚执业律师&#xff0c;持续分享技术类行业项目风险及预防的问题。 一直以来兔子都在以大家做项目时候会遇到的风险问题做分享&#xff0c;最近有个念头一直挥之不去&#xff0c;就是要不要给我们广大的程序员们也分享一…