滑动门

最新推荐文章于 2018-11-29 18:30:29 发布
最新推荐文章于 2018-11-29 18:30:29 发布
阅读量119 收藏
点赞数
分类专栏： css知识点 文章标签： 滑动门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shisjieshoufu/article/details/79310860
版权

<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "utf-8" >

< style type= "text/css" >

             div{
                 float: left;
             }

             .left{
                 width: 10px;
                 height: 100px;
                 background-image: url( "l.png");
             }
             .middle{
/* 中间不能给宽度
因为到时候根据文字的多少来控制背景图片的宽度
*/
                 height: 100px;
                 background-image: url( "m.png");

                 line-height: 100px;
             }

             .right{
                 width: 10px;
                 height: 100px;
                 background-image: url( "r.png");
             }
< / style >
</ head >
< body >

     < div class= "left" ></ div >
     < div class= "middle" >
       你好你好
     </ div >
     < div class= "right" ></ div >


</ body >
</ html >
御裔宸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
UE4学习笔记：蓝图功能实现，双开平移自动门、双开旋转门
努力成为一个知道自己在做什么的人
03-29 2069
前言： 本人为初学者，这些笔记仅作为学习记录和分享学习经历，言语措辞和理解难免有疏忽和错误 双开平移自动门 1、复制之前的电梯蓝图，将地板调整90度，添加玻璃材质，适当调整触发盒子大小 2、进入触发区域，自动开门蓝图 3、按键，自动开门蓝图 新节点: 1、Get Relative Location（获取Relative Location）获取当前相对位置 我的蓝图是手动输入坐标，所以没有用这个节点。如果避免更改门的位置，又要重新输入，可以使用这个节点 和升降电梯大同小异，不
js实现多个滑动门在同一个页面展示效果
diepaoqiang8835的博客
07-02 203
多个滑动门在同一个页面展示，在工作小组里面，一直是一个让人比较纠结的问题~学习库里面有一个技术同事5年前给封装的控件，大家就一直在用复用那个。 最近项目里面用到的这个效果非常多，每次都要调用那个js控件，还得按规则匹配相应的id，真心觉得麻烦，就在想，为嘛不自己写一个可以通用的~ 于是，就有了下面这个脚本效果： js：...
一个简单的滑动门效果-完整代码
weixin_34378045的博客
07-16 116
说明：关于滑动门的相关代码很多，今天给大家推荐的是一个非常简单的实现方式，希望对大家的学习能有所帮助。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm...
UE4使用时间轴制作简单开关门
qq_41594719的博客
08-28 5509
UE4版本为4.20 1.在StarterContent-&gt;Props中把SM_Door托如场景中 2.在SM_Door周围放置一个盒体触发器(基本-&gt;盒体触发器) 3.打开关卡蓝图，为盒体触发器(TriggerBox)添加OnActroBeginOverlap事件和OnActorEndOverlap事件 4.添加一个时间轴（右键-&gt;添加时间轴） 5.设...
很大气的滑动门图片特效
baishuo678的专栏
03-07 1152
很大气美观的滑动门图片特效，右侧显示标题，鼠标滑上去左侧的大图片就切换，可为图片增加描述和标题介绍，支持Alt标签和title标签，示例中可能去掉了这些，若需要的话自己再添加上去。本图片的流畅平滑效果要归功于jquery，欢迎学习前端图片特效的参阅代码。 响应式图片切换jQuery选项卡 html,body,div,img,q,dl,dt,dd,ol,ul,li{margin:0;paddi
html滑动门案例
08-09
滑动门案例
基于HTML+CSS实现网页滑动门效果
01-19
一、什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门。 小米官网，网页滑动门效果 二、实现滑动...
基于JavaScript实现滑动门效果
10-20
主要为大家详细介绍了js实现滑动门效果的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js滑动门代码制作js滑动门导航鼠标滑过滑动门效果
11-23
js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果
23.复杂滑动门的效果
neilro的博客
02-03 237
效果图： 注：把鼠标移动到按钮上会变成蓝色。 素材： 难点：  ①.文字的长短决定了图片的长短。  ②.该按钮由两张图片组成，但一个标签不能包含两个图片，如何解决？ （答：在a标签里嵌套一个span标签，a标签调用一张图片，span标签调用另外一张图片） 代码： 复杂滑动门 /*CSS初始化*/ body,ul,li{
jQuery实现滑动门效果
赵弋_icon
10-28 2011
课堂练习jQ代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;滑动门效果&lt;/title&gt; &lt;style type="text/css"&gt
滑动门效果制作
weixin_33716154的博客
03-28 91
2019独角兽企业重金招聘Python工程师标准>>> ...
第20讲， 推拉门
coder
06-13 330
主要是把那个corner进行了旋转，平移和放缩，
UE4蓝图实现 在碰撞情况下 按键开门
qq_40702959的博客
12-25 5723
有的时候我们会想实现走进门的附近然后按键开门或者触发其他事件（例如吃鸡游戏里的开门）但UE4蓝图不太容易实现双重事件同时触发，所以我用了gate节点（门节点）具体思路是在进入碰撞时打开门节点，在走出碰撞时关闭门节点。cloud和open 分别是门旋转角度的浮点变量num时按键F时的取余变量...
ue4 设置旋转值 SetActorLocationAndRotation
sun
11-29 5249
1 新建c++class 类MyActor 2 MyActor.h // Fill out your copyright notice in the Description page of Project Settings. #pragma once #include "CoreMinimal.h" #include "GameFramework/Actor.h" #include "M...
背景图片的精灵图的使用
yibashou的博客
02-11 3401
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;背景图片的精灵图的使用&lt;
使用css技术美化网页
yibashou的博客
07-17 2994
1、引入css的代码有内行式与外联式的标签。 &lt;标记名 style=“属性1：属性1值；属性2：属性2值；”&gt;内容&lt;/标记名&gt;         标记名就是标签的名字 2、引入css的内嵌式的方式 &lt;head&gt; &lt;title&gt;标题&lt;/title&gt; &lt;style type="text/css"&gt; 选择器{属性1：属
js实现多项滑动门选项卡特效
最新发布
05-29
好的，以下是一个简单的实现多项滑动门选项卡特效的示例代码： HTML结构： ``` <div class="tab-container"> <div class="tabs"> <span class="tab active">Tab 1</span> <span class="tab">Tab 2</span> <span class="tab">Tab 3</span> </div> <div class="tab-contents"> <div class="tab-content active"> <p>Tab 1 content</p> </div> <div class="tab-content"> <p>Tab 2 content</p> </div> <div class="tab-content"> <p>Tab 3 content</p> </div> </div> </div> ``` CSS样式： ``` .tab-container { width: 100%; } .tabs { display: flex; justify-content: space-between; margin-bottom: 10px; } .tab { cursor: pointer; padding: 10px; background-color: #eee; } .tab.active { background-color: #fff; border-bottom: 2px solid #000; } .tab-contents { width: 100%; } .tab-content { display: none; padding: 10px; } .tab-content.active { display: block; } ``` JavaScript代码： ``` const tabs = document.querySelectorAll('.tab'); const tabContents = document.querySelectorAll('.tab-content'); tabs.forEach((tab, index) => { tab.addEventListener('click', () => { // 切换选项卡的 active 类 tabs.forEach(tab => tab.classList.remove('active')); tab.classList.add('active'); // 切换选项卡内容的 active 类 tabContents.forEach(tabContent => tabContent.classList.remove('active')); tabContents[index].classList.add('active'); }); }); ``` 以上代码实现了一个基础的多项滑动门选项卡特效，具体效果可以根据实际需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值