底部菜单3d特效

最新推荐文章于 2023-08-20 10:34:37 发布
最新推荐文章于 2023-08-20 10:34:37 发布
阅读量368 收藏
点赞数
分类专栏： # html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/milijiangjun/article/details/81061925
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我是可移动的  </title>
	<style type="text/css">
		*{margin: 0px; padding: 0px;}
		#foot{
		    bottom: 0px;
			position: absolute;
    z-index: 3002;
    overflow: visible;
    opacity: 1;
    cursor: default;
    pointer-events: none;
    background-image: url(../img/ui.png);
    background-repeat: repeat-x;
  /*   background: url(../img/ui.png) repeat-x ;*/
    
    width: 70px;
    height: 149px;
    background-position: 0px -140px;
   /* background-size: 1000px 400px;27.3986*/
    transform: translateZ(1e+12px) translate(0px, 0px) translate(-35px, -74.5px) scale(13.9992, 1) translate(35px, 74.5px) translate(0px, 74.5px) rotate(0deg) translate(0px, -74.5px);
  /*  overflow:hidden;*/

}
		 
	</style>
	<script type="text/javascript">
	window.onload = function(){
		var Iwidth = document.body.offsetWidth ;
		alert(Iwidth);		  
		var IHeight = window.screen.height ;
		alert(Iwidth +"搞事"+ IHeight);
        console.log(Iwidth +"搞事"+ IHeight);
		var s = document.title.split('');//console.log(s);获取并将tittle截成数组；
    //封装“滚动函数”
    function loop() {
        s.push(s[0]);//在数组的最后一位推入第一位；
        s.shift();//删除第一位；
        document.title = s.join('');//拼成字符串再赋值给tittle；
    }
    setInterval(loop, 500);//开定时器，实现“滚动效果”
	}
 	//封装“滚动函数”
	</script>
</head>
<body>
 
	<div id="foot" ></div>
</body>
</html>
这个是经过3d变形的雪碧图上的小图片
milijiangjun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3实现网页底部半圆展开导航特效
04-06
CSS3实现网页底部半圆展开导航特效是一款效果不错的网站导航菜单特效代码。
炫酷的底部菜单栏切换效果.zip
11-12
炫酷的底部菜单栏切换效果，在切换时，选中项会做图标上升的动画，同时会有一个凹陷的效果，另外还有一个圆形的背景做东升西落的动画
前端Vue自定义等分底部菜单导航按钮 自适应文字宽度 可更改组件位置
chenchuang0128的博客
08-20 422
- upTextArr：上面标题数组 downTextArr：下面标题数组 selIndex：选择序列 selColor：选中颜色 @menuClick：按钮点击事件 -->
制作手机app底部导航栏，自带点击特效
Liu_JiaqiPro的博客
04-13 311
制作手机app底部导航栏
html特效 底部展开,html5 SVG手机移动端底部图标菜单展开动画特效
weixin_39632471的博客
06-02 535
一款html5 SVG手机移动端底部图标菜单展开动画特效，点击底部菜单的3个点点的图标，可以展开次级的子图标菜单，然后可点击“叉号”图标可以关闭次级菜单内容。查看演示下载资源：14次 下载资源下载积分：20积分页面的head部分，需引入页面的CSS样式文件和动画JS文件，代码如下： 页面的body部分，需设置好对应的SVG内容，代码如下：...
css3菜单导航特效代码
03-20
在这个场景中，"css3菜单导航特效代码"是一个专注于利用CSS3来构建独特菜单导航栏的例子。这种圆形修边的tab底部内凹圆角菜单导航效果，既美观又实用，能够吸引用户的注意力并提供清晰的导航结构。 首先，我们来看...
3D立方体图标菜单CSS3特效代码
03-20
在网页设计领域，3D立方体图标菜单是一种创新且引人注目的交互式设计元素，它利用CSS3的强大力量来实现动态效果。本文将深入探讨如何使用CSS3来创建3D立方体图标菜单，并结合jQuery进行交互式增强。 首先，让我们...
整理1500个JS特效源码
最新发布
02-04
1. **基本特效**：这是JavaScript特效的基础，例如页面加载时的元素隐藏/显示、点击事件触发的动画效果，以及页面滚动时的固定头部或底部导航栏。这些效果使得用户在浏览网页时能感受到流畅的交互体验。 2. **导航...
Unity3D自定义创建圆锥体
08-26
首先，在GameObject/3D Object下新建一个Cone菜单，然后使用MenuItem特性来实现菜单的显示。接下来，我们需要实现SpawnConeInHierarchy方法，该方法用于生成圆锥体对象并将其添加到Hierarchy面板中。 三、Mesh的...
CSS3 H5 3D立体凸出显示导航菜单插件.zip
07-11
代码片段：    <div class="i-face i-front">Gallery<div class="arrow-hover"></div>  <div class="i-face i-right"></div> ... <div class="i-face i-left"></div> ... <div class="i-face i-top"></div> ...
js仿拉勾网底部固定特效.zip
07-04
js仿拉勾网底部固定特效
H5手机底部图标菜单切换特效
07-24
H5手机底部图标菜单切换特效是一款基于HTML5 SVG绘制的自适应手机底部图标菜单导航切换背景颜色代码。
一个HTML5底部导航栏特效.rar
07-10
一个HTML5底部导航栏特效，显示在网页最底部的小菜单栏，页脚导航特效，带动画特效，右侧还有小图标，美化的挺漂亮，CSS3代码，运行于支持HTML5的浏览器中，移动设备的浏览器效果最佳。
3D菜单特效(CSS3)
08-16
3D菜单特效(CSS3)
css3超酷3D旋转导航菜单特效
12-13
这是一款使用纯CSS3制作的3D旋转导航菜单特效。该3D旋转导航菜单特效中主要使用了CSS 3D Transforms技术。当鼠标hover菜单项时，菜单项会以3D立方体的方式旋转。
Android实现炫酷的底部菜单栏切换动画效果
y280903468的博客
11-12 3568
最近按照需求做了一个花里胡哨的首页底部菜单切换，我不会做GIF，传两张图看一下效果 点击不同的位置，底部Bar的凹陷位置会移动，同事选中的图标会上升，非选中的图标会下降，同时，图标的背景圆圈会做东升西落的动画效果。 实现原理：这个效果其实可以分解为三个动画，1、底部凹陷位置的移动。2、图标的上升与下降。3、背景圆圈的东升西落 图标上升下降的代码和背景运动的代码如下 priv...
HTML5菜单栏特效
热门推荐
hzp666的博客
11-16 1万+
 今天向大家精选了10款超酷的HTML5/CSS3菜单，给你的网页添加不一样的精彩，一起来围观一下吧。 1、CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页菜单，我们之前也在CSS3菜单栏目中分享了许多CSS3菜单。今天我们分享的这款是CSS3手风琴菜单，菜单项在展开和收缩的时候菜单项会有弹性动画效果。每一层父级菜单有一个小三角，菜单项在展开的时候这个小三角
底部菜单4
milijiangjun的博客
07-10 343
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;底部菜单css3单色渐变至透明效果&lt;/title&gt;
php仿微信底部菜单,Android实现简单底部导航栏 Android仿微信滑动切换效果
weixin_39719042的博客
03-20 74
Android仿微信滑动切换最终实现效果：大体思路：1. 主要使用两个自定义View配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标;2. 底部导航栏的设置方法类似于TabLayout的关联,View需要创建关联方法,用来关联VIewPager;3. 通过关联方法获取ViewPager实例后,根据ViewPager页面数创建底部导航栏的图标按钮;代码实现...
uniapp 底部菜单
01-07
根据你提供的引用内容，我可以给你介绍一下uniapp底部菜单的实现方法。 在uniapp中，可以使用uview-plus框架来实现底部菜单。首先，确保你的项目中已经安装了uview的UI框架和vuex。具体的安装教程可以在网上找到详细的教程。 接下来，我将介绍一种实现底部菜单的逻辑。首先，你可以使用一个for循环来创建底部菜单的每个选项。然后，你可以在其中一个选项上添加一个凸起的发布按钮，并为其添加点击事件。当点击发布按钮时，可以弹出一个层，供用户选择其他功能。 以下是一个示例代码： ```vue <template> <view> <view v-for="(item, index) in menuList" :key="index" @click="handleMenuClick(index)"> {{ item }} </view> <view class="publish-button" @click="handlePublishClick"> 发布 </view> </view> </template> <script> export default { data() { return { menuList: ['菜单1', '菜单2', '菜单3', '菜单4'] } }, methods: { handleMenuClick(index) { // 处理菜单点击事件 console.log('点击了菜单' + (index + 1)) }, handlePublishClick() { // 处理发布按钮点击事件 console.log('点击了发布按钮') // 弹出层逻辑 } } } </script> <style> .publish-button { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 100px; height: 40px; background-color: #f00; color: #fff; text-align: center; line-height: 40px; border-radius: 20px; } </style> ``` 在上面的代码中，我们使用了一个for循环来创建底部菜单的选项，并为每个选项添加了点击事件。同时，我们还添加了一个发布按钮，并为其添加了点击事件。你可以根据自己的需求来修改样式和处理逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值