Bootstrap 过渡效果
2024-09-06 03:25:32
<!DOCTYPE html>
<html <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type=text/css"/> <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style>
#mydiv{
width:200px;
height:200px ;
background:seagreen ;
transition:height 4s;
-webkit-transition:height 4s;
}
#mydiv:hover {
height:400px ;
}
</style>
</head>
<body>
<div id="mydiv"> </div>
<script>
document.getElementById("mydiv").addEventListener("transitionend",function(e){
this.innerHTML="动画效果"; })
</script>
</body>
</html>
效果:
最新文章
- 【uTenux实验】写在开始实验之前
- [HTML] CSS 渐变
- 通过微信分享链接,后面会被加上from=singlemessage&;isappinstalled=1可能导致网页打不开
- August 1st, 2016, Week 32nd Monday
- 使用UDEV绑定ASM多路径磁盘
- Java 正则表达式学习总结和一些小例子
- Qt之模式、非模式、半模式对话框
- 基于BOOST 实现并发服务器框架
- Cogs 1709. [SPOJ705]不同的子串 后缀数组
- php简易计算器实例
- Android Wear开发 - 数据通讯 - 第三节 : 事件处理
- photpshop渐变玩法_学习教程
- eclipse xml自动提示
- web容器的会话机制
- python笔记:#010#运算符
- poj1456 Supermarket 贪心+并查集
- [Swift]LeetCode276. 粉刷栅栏 $ Paint Fence
- 微软官方的.net命令行参数库
- hostswap dcevm
- 6.MySQL图形化工具的使用
热门文章
- BZOJ3398 牡牛和牝牛
- 洛谷3605 Promotion Counting
- Linux中Hard link和Symbol link的区别
- C++ 彩色图像(RGB)三通道直方图计算和绘制,图像逆时针旋转90&#176; 实现代码
- 英语单词operand
- CSU 1503: 点到圆弧的距离(计算几何)
- JAVA(JDK,JRE)更改目录安装及环境变量配置
- HihoCoder - 1673 (单调队列)
- (转)docker-compose安装
- php面试专题---6、正则表达式考点