首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Bilibili banner 早中晚切换效果

博客地址:https://ainyi.com/101 Bilibili 官网冬季的 banner 图吸引了我,一开始是中午图,鼠标左移浮现早上图,右移浮现晚上图,挺有意思 [WechatIMG455.png...] 来实现一波 做之前先不要调试看 b 站的代码,自己先想想怎么实现,这样知识记得比较深 我们尽量使用 css 解决,js 弥补 分析层级、实现方法 比较明显的可以看到==早中晚三张22 33娘玩耍的图片...那么它们的层级关系可以这样定位: 早:不设置 z-index 中(包括雪球):z-index: 10 晚(包括窗口积雪):z-index: 20 对应早中晚的树木也应该是如此 重点:切换 鼠标移动过程中图片切换的效果...属性,默认为 0.5 而鼠标移动的距离,需要通过 js 计算 mouseenter、mousemove、mouseout 三个监听函数,动态计算出移动百分比,赋值到 --percentage 属性 图片的...5deg)); } .window-cover { z-index: 20; opacity: calc(var(--percentage) * (-2)); } } js

2.7K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JS动画效果

    JavaScript 动画框架 框架封装 ---- 相信大家在很多门户网站上都可以看到动画的交互效果,通过这些动画生动地体现了我们在网页上的交互效果,现在我们就来学习一下这些动画效果的分解动作吧。...动画的实现思路都是通过连续改变物体的属性值来实现效果的。一般来说都是改变一个物体的left,right,width,height,opacity....li> 四.链式动画 首先把上面的简单运动框架抽取出来然后加上透明度的变化,放进一个人通用的JS文件里movement.js...filter: alpha(opacity:30); opacity: 0.3; } <script src="move.<em>js</em>...JSON的格式: {键:值,键:值} 完善后的运动框架<em>js</em>:movement.<em>js</em> function getStyle(obj,attr) { if(obj.currentStyle){

    20.7K81

    【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 )

    文章目录 一、Banner 栏测量 1、盒子模型尺寸测量 2、背景测量切图 二、Banner 盒子模型代码 1、HTML 标签结构 2、CSS 样式 3、显示效果 一、Banner 栏测量 ----...1、盒子模型尺寸测量 该 Banner 条宽度填充整个浏览器 , 不需要给出宽度 , 只需要设置高度即可 ; 在 Banner 上下各拉一条辅助线 , 测量其高度为 420 像素 ; Banner 中心位置有一张背景大图...使用 " 移动工具 " , 勾选 自动选择 选项 , 选择图层 , 点击 背景图片 后 , 会自动选择 该图片所在的图层 , 在 Cutterman 中 , 点击 " 导出选中图层 " , 切图后的效果...-- Banner 模块 - 开始 --> 完整代码 : <!...: #1c036c url(images/banner_bg.png) no-repeat top center; } 3、显示效果

    3.9K20
    领券