文档章节

点击--渐变-->菜单

issac宝华
 issac宝华
发布于 2015/11/14 22:32
字数 120
阅读 11
收藏 0

     ‍‍点击预览‍

<!DOCTYPE html>
<html>
<head>

<style> 
#div
{
cursor:pointer;
position:relative;
margin:30px;
width:200px;
height:30px;
background-color:yellow;
/* Rotate div */
transition:height 0.5s;
}
#div h4{
position:absolute;
top:-15px;
left:10px;
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* Internet Explorer */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
-o-transform:rotate(0deg); /* Opera */
transition:transform 0.2s;
}
</style>
</head>
<body>

<div id="div" onclick="div()" onmouseout="out()"> <h4 id="h">></h4></div>

</body>
<script language="javascript">
function div(){
document.getElementById("h").style.transform="rotate(90deg)";
document.getElementById("div").style.height="300px";
}
function out(){
document.getElementById("h").style.transform="rotate(0deg)";
document.getElementById("div").style.height="30px";
}
</script>
</html>

     点击预览

 

© 著作权归作者所有

issac宝华
粉丝 9
博文 140
码字总数 34397
作品 0
珠海
私信 提问
【iGeek手册】如何使用jQuery制作渐变缩放式样的响应式导航菜单?

响应式设计(Responsive Design) 的导航菜单,相信对于做web相关UI设计 或者开发的朋友来说一定不陌生, 在这个遍地都是Bootstrap框架的互联网web世界, 标准Bootstrap类型导航菜单,肯定是...

Janet_zyh
2017/11/15
0
0
用Go和Korok写一个Flappybird游戏-4

在 前一节 我们实现了游戏的核心逻辑,比如鸟的飞行效果,管道和地面的滚动,碰撞检测等等。本节会给各种场景和状态的转换添加过渡效果,让整个游戏进程更加自然。本节你将会学会: 如何添加...

ntop
2018/06/11
0
0
QQ测拉效果实现(二)

转载本文请注明出处,尊重原创: 如果想第一时间收到文章更新,可以微信扫描二维码关注我的公众号,或者微信直接搜索“Android小菜”进行关注,所有的文章会比CSDN更快一步: 上一篇案例实现...

qq_32059827
2017/09/24
0
0
二级树状目录菜单系统--AnyMenu

AnyMenu 是 Web 应用经常需要的二级树状菜单,能满足应用后台菜单展示。管理灵活,使用方便! ---------------------------------------------- -.目前版本仅支持UTF-8编码,GBK版本正在评估...

汉卿cloud
2015/07/29
641
0
巧用CSS的alpha滤镜

作者:冯永曜 “Alpha”滤镜,听到这个名字,你可能会想到Flash里有,Photoshop里也似乎见过。一点不错,它们的作用基本类似,就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度...

晨曦之光
2012/03/09
125
0

没有更多内容

加载失败,请刷新页面

加载更多

数据可视化赋能大数据价值释放,助力大数据价值应用落地

今天,大数据已无所不在,并且正越来越广泛的被应用到金融、互联网、科学、电商、工业甚至渗透到我们生活的方方面面中,获取的渠道也越来越便利。 然而,很多公司企业只知道大数据的重要性,...

NBI大数据可视化
3分钟前
1
0
vim 配置 java complete

遇到的一个坑 安装好插件后,启动 Vim 时遇到过这样一个错误 No Javavi library classes found, it means that we couldn't compile it. Do you have JDK8+ installed? Failed to compile ja......

MtrS
5分钟前
0
0
收藏功能的实现

1.点击按钮,前端判断当前收藏状态;若已收藏,则发起取消收藏指令,否则发起收藏指令 2.通过接口将用户ID和商品ID传到后台 3.后端接受信息,更新对应内容的收藏数,并在收藏数据表中插入/删...

无精疯
22分钟前
3
0
idea 打开一个新的项目,maven都需要重新配置,解决方案

需要有个默认全局配置 File->Other Settings -> Default Settings 将Maven home directory目录修改成我们自定安装Maven的目录...

观海562
48分钟前
6
0
输出乘法口诀表

#include<stdio.h> #include<stdlib.h> int main(){ int a, b, c; int n = 9; for (a = 1; a <= n; a++){ for (b = 1; b <= a; b++){ c = a*b; //输出a,b,c三个数 所以格式为"%d*%d=%d" %-......

Lxxxxx256
51分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部