位置: IT常识 - 正文

〖大前端 - 基础入门三大核心之CSS篇㉓〗- 过渡的缓动效果(大前端技术)

编辑:rootadmin
〖大前端 - 基础入门三大核心之CSS篇㉓〗- 过渡的缓动效果 当前子专栏 基础入门三大核心篇 是免费开放阶段。推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V!说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外,还可以通过加入星荐官共赢计划 加入私域社区。作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 跨域学习者,从事过全栈研发、产品经理等工作,目前任某金融品类App负责人。荣誉:2022年度博客之星Top4、博客专家认证、全栈领域优质创作者、新星计划导师,“星荐官共赢计划” 发起人。现象级专栏《白宝书系列》作者,文章知识点浅显易懂且不失深度;TFS-CLUB社区创立者,旨在以“赋能 共赢”推动共建技术人成长共同体。🏆 白宝书系列 🏅 Python全栈白宝书🏅 产品思维训练白宝书🏅 全域运营实战白宝书🏅 大前端全栈架构白宝书文章目录⭐️ 过渡🌟 过渡的缓动参数🌟 贝塞尔曲线🌟 过渡效果实战

推荐整理分享〖大前端 - 基础入门三大核心之CSS篇㉓〗- 过渡的缓动效果(大前端技术),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:大前端包括啥,大前端课程,大前端需要掌握什么技能,大前端入门指南,前端 大前端,前端 大前端,大前端入门指南,大前端需要掌握什么技能,内容如对您有帮助,希望把文章链接给更多的朋友!

上篇我们已经学会了过渡的基本使用,也知道了 “transition” 有四个参数,接下来我们来详细的学习一下 “transition” 的第三个参数 - “缓动参数” 。

⭐️ 过渡

该章节的知识点,主要是围绕 "过渡的缓动效果" 来学习的。除了 "过渡的缓动参数"、"贝塞尔曲线" 之外,还有一个实现 “缓动效果” 的小案例。

🌟 过渡的缓动参数

transition的第三个参数就是缓动参数,也是变化速度曲线。

我们之前只用到了linear值,linear就是匀速运动,实际上除了linear,还有其他四个常用的缓动参数:

上图中的曲线就是css支持的变化速度曲线。

下面直接看例子:

通过例子可以看到不同的变化速度曲线,元素移动的速度是不同的,但最终都是2s到达终点。

代码如下:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1 { width: 1000px; height: 600px; border: 1px solid #000; } .box1 p { width: 100px; height: 100px; background-color: orange; position: relative; left: 0; transition: left 2s linear 0s; } .box1 p:nth-child(2) { transition-timing-function: ease; } .box1 p:nth-child(3) { transition-timing-function: ease-in; } .box1 p:nth-child(4) { transition-timing-function: ease-out; } .box1 p:nth-child(5) { transition-timing-function: ease-in-out; } .box1:hover p { left: 800px; } </style></head><body> <div class="box1"> <p></p> <p></p> <p></p> <p></p> <p></p> </div></body></html>

🌟 贝塞尔曲线

我们也可以自定义动画缓动参数,就是通过自定义贝塞尔曲线。

这个网站可以生成贝塞尔曲线:https://cubic-bezier.com/

进入这个网站,拖动左侧的曲线,得到想要的贝塞尔曲线。

我们的缓动参数就可以设置成这个贝塞尔曲线:大家可以实战一下,观察这个贝塞尔曲线下 元素的移动效果。

🌟 过渡效果实战

案例一

我们在上网时经常会看到鼠标移动到一个图片时,底部浮现出现一行解释的文字,这个效果是怎么实现的呢?

答:其实就是字被图片压盖,当鼠标浮上去时,字再出现在图片的上方;所有的压盖效果都需要使用绝对定位来实现。

下面我们就来做一个这样的案例:第一步,使用绝对定位,给盒子下方添加文字;再次注意:绝对定位的盒子,不写宽度无法自动撑满。

〖大前端 - 基础入门三大核心之CSS篇㉓〗- 过渡的缓动效果(大前端技术)

第二步:通过透明度属性 opacity ,实现将鼠标浮上去时,透明图由0变成1。

第三步:利用过渡,让透明度缓慢变化,实现文字慢慢浮现的效果。

我们在实现这个例子时,用到了 "浮动"、"子绝父相对"、"过渡" 的知识点。"过渡"其实就写了一条,相对来说来是比较简单的,大家还是要多多练习实例,这样才能更好的消化学到的知识。

案例二

我们在网页中也经常会看到一些有动画效果的小图标,比如下面这种鼠标浮上去背景旋转,同时图标也会放大,这种效果是怎么实现的呢?

用到的知识点有很多,例如浮动、子绝父相、伪元素、旋转变形、过渡等。接下来我们就来实现它。

第一步:实现网页布局:

先来分析一下,四个图标处在四个盒子中,后面有一个蓝色的圆的背景,鼠标放到盒子上时,只有背景旋转,图片放大。背景图片不是标签,是无法实现独立旋转的,如果旋转盒子,图标也会跟着旋转,我们可以给盒子添加一个伪元素,给伪元素添加背景图片,旋转也是由伪元素旋转。

准备四个背景图片:

代码如下:

第二步:利用变形 + 过渡实现动画效果。

大家一定要自己从头到尾敲两遍,只看是学不会的。

案例三

这个案例,我们利用3D旋转,实现一个非常有意思的“翻盖”的动画特效:

用到的知识点有 "子绝父相"、"3D旋转"、"transform-origin属性"(用来设置旋转的原点,有两个描述值,不用刻意记忆怎么设置,做的时候多尝试几次就知道了)

第一步:实现网页布局

第二步:实现鼠标触碰时,上面的图片进行3D旋转。第一个延左边的轴打开。

第三步:将下面两个也实现动画效果。可以利用层叠的性质设置。

案例四

接下来外面看一个酷炫的特效,正方体的旋转,看起来非常有立体感:

第一步:利用3D旋转和空间移动,绘制一个正方体:

代码如下:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { width: 200px; height: 200px; border: 1px solid #000; margin: 100px auto; perspective: 300px; position: relative; } .box p { position: absolute; top: 0; left: 0; width: 200px; height: 200px; } .box p:nth-child(1) { background-color: #e6aaaa; /* 前面 */ transform: translateZ(100px); } .box p:nth-child(2) { background-color: #aae6df; /* 顶面 */ transform: rotateX(90deg) translateZ(100px); } .box p:nth-child(3) { background-color: #f3a6de; /* 背面 */ transform: rotateX(180deg) translateZ(100px); } .box p:nth-child(4) { background-color: #84afef; /* 下面 */ transform: rotateX(-90deg) translateZ(100px); } .box p:nth-child(5) { background-color: #edef84; /* 左面 */ transform: rotateY(90deg) translateZ(100px); } .box p:nth-child(6) { background-color: #a6ef84; /* 左面 */ transform: rotateY(-90deg) translateZ(100px); } </style></head><body> <div class="box"> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div></body></html>

第二步:使整个正方体进行旋转

需要放置一个新的“大舞台”section,将上面的正方体的box当作演员。而box既是p的舞台,又是section的演员。需要做一个特殊设置:

本文链接地址:https://www.jiuchutong.com/zhishi/300868.html 转载请保留说明!

上一篇:Vue 和 React 有什么不同?(vue和react差别)

下一篇:记录-安装cuda与cudnn 及对应版本的tensorflow|pytorch(安装cuda和cudnn)

  • 淘宝网店推广方案方法(淘宝网店推广方法有哪些SEM推广)

    淘宝网店推广方案方法(淘宝网店推广方法有哪些SEM推广)

  • emui11是鸿蒙系统吗

    emui11是鸿蒙系统吗

  • 淘宝店铺被降权是什么情况(淘宝店铺被降权还能继续用吗)

    淘宝店铺被降权是什么情况(淘宝店铺被降权还能继续用吗)

  • 抖音二维码怎么生成(抖音二维码怎么弄)

    抖音二维码怎么生成(抖音二维码怎么弄)

  • 华强北耳机一边没声音(华强北耳机一边耳机失灵)

    华强北耳机一边没声音(华强北耳机一边耳机失灵)

  • 华为nova7se什么时候上市的(华为nova7se什么时候上市的价格)

    华为nova7se什么时候上市的(华为nova7se什么时候上市的价格)

  • 苹果id和icloud一样吗(苹果apple id和icloud)

    苹果id和icloud一样吗(苹果apple id和icloud)

  • 苹果哪几款支持nfc(苹果哪几款支持快充)

    苹果哪几款支持nfc(苹果哪几款支持快充)

  • 讯飞输入法繁体字改成简体怎么改(讯飞输入法繁体字怎么打)

    讯飞输入法繁体字改成简体怎么改(讯飞输入法繁体字怎么打)

  • iphone11和xr分辨率一样吗(xr和11的分辨率一样吗)

    iphone11和xr分辨率一样吗(xr和11的分辨率一样吗)

  • 鼠标左侧两个键有什么用(鼠标左侧两个键是宏吗)

    鼠标左侧两个键有什么用(鼠标左侧两个键是宏吗)

  • 微信注销后多久再申请(微信注销后多久查不到转账记录)

    微信注销后多久再申请(微信注销后多久查不到转账记录)

  • ie浏览器兼容模式怎么调(ie浏览器兼容模式怎么开)

    ie浏览器兼容模式怎么调(ie浏览器兼容模式怎么开)

  • 支付宝怎样才能得到敬业福(支付宝怎样才能接到大量异地收款)

    支付宝怎样才能得到敬业福(支付宝怎样才能接到大量异地收款)

  • 酷我音乐怎么唱歌手机(酷我音乐怎么唱不了歌)

    酷我音乐怎么唱歌手机(酷我音乐怎么唱不了歌)

  • iphonex有防窥屏功能吗(iphonex防偷窥功能设置)

    iphonex有防窥屏功能吗(iphonex防偷窥功能设置)

  • 拼多多拼单什么意思(拼多多拼单什么规则)

    拼多多拼单什么意思(拼多多拼单什么规则)

  • 花呗付款对方看得见吗(花呗付款对方看得到吗)

    花呗付款对方看得见吗(花呗付款对方看得到吗)

  • macbookpro128g够用么(macbookpro2019128g够用吗)

    macbookpro128g够用么(macbookpro2019128g够用吗)

  • 总有骚扰电话打进来怎么办(总会有骚扰电话)

    总有骚扰电话打进来怎么办(总会有骚扰电话)

  • 小红书如何查看自己的资料(小红书如何查看历史浏览记录)

    小红书如何查看自己的资料(小红书如何查看历史浏览记录)

  • 当当网如何申请退款(当当网如何申请退货)

    当当网如何申请退款(当当网如何申请退货)

  • nmstt.exe - nmstt是什么进程 有什么用

    nmstt.exe - nmstt是什么进程 有什么用

  • 记录CentOS7安装epel源的两个方法(centos安装epel)

    记录CentOS7安装epel源的两个方法(centos安装epel)

  • 有谁用过金蝶kis云专业版
  • 购货发票属于什么证据?
  • 会计账本需要装订的有哪些
  • 建筑施工企业涉税问题
  • 暂估入账后没有交房产税
  • 小规模旅游业差额增值税税率
  • 红字发票可以开部分金额吗
  • 进项税加计抵减生产性服务
  • 二类经适房转商品房需要交多少钱
  • 小规模纳税人费用票怎么做账
  • 捐赠的所得税怎么处理
  • 劳动竞赛费用在什么科目列支做会计分录?
  • 研究开发费用加计扣除多少
  • 发票勾选没有确认怎么办
  • 行政事业单位培训伙食补助报销规定
  • 年度汇算清缴怎么填写
  • 民非企业补贴收入要缴纳增值税会计分录怎么写?
  • 离线发票在哪里查看
  • 应征增值税不含税销售额是什么意思
  • 总分公司、母子公司:三流不一致情况下,如何抵扣增值税?
  • 停车场如何申领车牌号
  • 收取手续费的委托代销 发票谁来开
  • 银行承兑汇票开票流程图
  • 合同税率16%调整到13%怎么算
  • 出口报关单中有哪些内容
  • 宏基笔记本电脑售后电话
  • 什么是财政代管资金
  • 旅游公司开具的考察费怎么入账
  • 滴滴发票开公司名称可以抵扣进项吗
  • 中介公司收取中介费过高违法吗
  • 赠与合同公证收费标准
  • linux grub
  • bios设置u盘启动的步骤
  • 经营租入固定资产改建支出摊销计算时间
  • 三七粉的功效与作用及正确吃法
  • 耕地占用税的具体内容
  • 蓝山公馆的房子怎么样
  • 解决php程序运行问题
  • vue destroyed销毁组件
  • 本地存储localstorage没有拿到最新值
  • bootz命令
  • vue加载时如何避免出现代码
  • 装饰公司的开票范围
  • etcd4
  • 出租车公共服务
  • 更正申报季度企业所得税
  • 从事特殊行业
  • 出差补贴费计入什么科目
  • 运输费属于生产成本还是制造费用
  • 无形资产是什么?
  • 阶段性减免企业社保费实施政策对象
  • 编制弹性预算的关键在于
  • 生产企业库存商品怎么做分录
  • 银行存款支付比例规定
  • 公司提供给员工暂借款未还款离职
  • 限定性净资产的例子有哪些
  • 制造费用是借还是贷
  • 购入自用的机器怎么入账
  • 收到投资款如何做税务登记
  • 注册会计师转所规定
  • 问答:分支机构是否需要设立账簿
  • 实现分页功能的多种原理方案
  • ubuntu linux
  • win10开机出现microsoft
  • win7任务管理器怎么调回原来样子
  • 怎么用代码设置选项
  • uibutton设置圆角
  • dw导入excel
  • opengl mesa
  • js调用xml
  • javascript教程chm
  • shell脚本中调用shell脚本
  • Unity for Absolute Beginners(一)
  • 青海税务app
  • 美国有汽车吗
  • 国税新规
  • 民办非企业暂行
  • 增值税发票选择确认平台已勾选未确认的发票怎么撤销?
  • 税务打虚打骗
  • 2016年营改增房屋租赁
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设