首页 > 其他分享 >css动画

css动画

时间:2024-10-18 16:33:46浏览次数:1  
标签:动画 right translateX 0.4 transform enter css left

几年前与一个同事共同开发一个项目,当时只知道css3但是并没有实际用过,看了她写的页面着实给了我一个很大的震撼,今天因故翻到了她写的代码,现在来看,感慨万千

//这是一个dom
    & > .left {
    animation: 0.4s ease enter_from_left;
    }
//这是另一个dom
  & > .right {
    animation: 0.4s ease 0.4s enter_from_right;    
  }
      
    @keyframes enter_from_left {
    from {
      transform: translateX(-260px);
    }
    to {
      transform: translateX(0%);
    }
  }
  @keyframes enter_from_right {
    from {
      transform: translateX(400px);
    }
    to {
      transform: translateX(0%);
    }
  }
  

效果是初始化后分别从两边进来,做个纪念
灰常感谢我滴王乐小师傅
以上

标签:动画,right,translateX,0.4,transform,enter,css,left
From: https://www.cnblogs.com/hjk1124/p/18474559

相关文章

  • 轻松上手-骨架屏后动画显示
    作者:狼哥团队:坚果派团队介绍:坚果派由坚果等人创建,团队拥有12个华为HDE带领热爱HarmonyOS/OpenHarmony的开发者,以及若干其他领域的三十余位万粉博主运营。专注于分享HarmonyOS/OpenHarmony、ArkUI-X、元服务、仓颉。团队成员聚集在北京,上海,南京,深圳,广州,宁夏等地,目前已开发鸿蒙原......
  • CSS文本属性
    在CSS中,我们可以通过文本属性来控制文字的样式。下面是一些常用的文本属性:font-family:用于指定文字的字体。font-size:用于指定文字的大小。font-style:用于指定文字的样式,例如italic或normal。font-weight:用于指定文字的粗细程度。color:用于指定文字的颜色。text-align:用于指定......
  • 第六章 元素应用CSS
    6.1使用CSS设置字体样式<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> <style> /*6.1使用CSS设置字体样式*/ h1{ /*6.1.1.字体类型*/ font-family:fangsong; /*6.1.2.字体大小*/ f......
  • CSS笔记—盒子定位之固定定位(重难点!!小白刚需)
    1、固定定位的概念        固定定位(fixed)的元素位置相对于浏览器窗口进行定位(会脱离文档流),即使页面滚动,固定定位元素不会随滚动条滚动,除非改变浏览器窗口的位置或大小‌ 2、语法格式: <head>        选择器{position:fixed;}</head>水平位置:left定......
  • 祝福版的3D标签云动画特效VUE2版本
    <script>exportdefault{name:"dreamView",data(){return{words:['健康码常绿','股票飙红','生意兴隆','财源广进','心想事成','永远十八......
  • 汽车3D动画外包还是自己动手渲染?
    在汽车行业,3D动画已成为展示产品和技术创新的重要手段。然而,企业在决定是否外包3D动画制作或自行渲染时,往往面临成本、质量与时间的权衡。本文将探讨这两种选择的利弊,帮助企业做出明智的决策。一、为什么制作3D汽车动画会很难制作3D汽车动画的难点不仅在于创作过程中的技术挑战......
  • 基于PID控制器的四旋翼无人机控制系统的simulink建模与仿真,并输出虚拟现实动画
    1.课题概述      基于PID控制器的四旋翼无人机控制系统的simulink建模与仿真,并输出vr虚拟现实动画,输出PID控制器的控制反馈曲线。整个仿真过程,无人机为升空,下降,再升空的飞行效果。 2.系统仿真结果 3.核心程序与模型版本:MATLAB2022a  4.系统原理简介4.1......
  • CSS的学习(二)
    本篇呢,我们接着学习CSS,浮动和定位是两者常用的布局方式,可以实现更加丰富和灵活的网页效果。 有实操代码和效果方便理解一、浮动CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):普通流(标准流)浮动定位这三种布局方式都是用来摆放盒子的,盒子摆放到合适位置,布......
  • css浮动
    标准文档流特性空白折叠现象:无论多少个空格,换行,tab,都会被折叠为一个空格高矮不齐,底边对齐自动换行,一行写不满,换行写行内元素和块级元素区别行内元素:不换行,不可以设置宽高块级元素:独占一行,可以设置宽高标签分类文本级:spanabiu容器级:pdivh系列lidtdd行内元......
  • css继承性和层叠性
    css继承性和层叠性css继承性继承性:有一些属性,当给自己设置的时候,自己的后代都继承上了css层叠性--计算权重层叠性:就是css处理冲突的能力当多个选择器,选上了同一个元素,权重要按照顺序id选择器类选择器,伪类选择器,属性选择器标签选择器,伪元素选择器权重相同时:就近原则(后者......