底部菜单3d特效

<!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变形的雪碧图上的小图片
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据你提供的引用内容,我可以给你介绍一下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、付费专栏及课程。

余额充值