HTML+CSS实现鼠标点上去动画效果
2024-09-03 08:04:54
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>瀑布流</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
</head> <body> <section id="titleBar">
<h2>瀑布流</h2>
</section>
<div id="wrap">
<!-- wrap内快速生成里面div结构的快捷方式 -->
<!-- (div.box>div.info>((div.pic>img[src="img/$.jpg"])+(div.title>a[href=#]{This is a title})))*10 -->
<div class="box">
<div class="info">
<div class="pic"><img src="img/1.jpg" alt=""></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="img/2.jpg" alt=""></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="img/3.jpg" alt=""></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="img/4.jpg" alt=""></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="img/5.jpg" alt=""></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="img/6.jpg" alt=""></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="img/7.jpg" alt=""></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="img/8.jpg" alt=""></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="img/9.jpg" alt=""></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
<div class="box">
<div class="info">
<div class="pic"><img src="img/10.jpg" alt=""></div>
<div class="title"><a href="#">This is a title.</a></div>
</div>
</div>
</div> </body> </html>
css文件如下
body {
margin:;
padding:;
}
body {
background: #ddd url(../img/bg.jpg) repeat;
}
img {
border: none;
}
a {
text-decoration: none;
color: #444;
}
@-webkit-keyframes shade {
from {
opacity:;
}
15% {
opacity: 0.4;
}
to {
opacity:;
}
}
@-moz-keyframes shade {
from {
opacity:;
}
15% {
opacity: 0.4;
}
to {
opacity:;
}
}
@-o-keyframes shade {
from {
opacity:;
}
15% {
opacity: 0.4;
}
to {
opacity:;
}
}
@-ms-keyframes shade {
from {
opacity:;
}
15% {
opacity: 0.4;
}
to {
opacity:;
}
}
@keyframes shade {
from {
opacity:;
}
15% {
opacity: 0.4;
}
to {
opacity:;
}
}
#titleBar {
width: 600px;
margin: 20px auto;
text-align: center;
}
#wrap {
width: auto;
height: auto;
margin: 0 auto;
position: relative;
}
#wrap .box {
width: 280px;
height: auto;
padding: 10px;
border: none;
float: left;
}
#wrap .box .info {
width: 280px;
height: auto;
border-radius: 8px;
background: #fff;
}
#wrap .box .info .pic {
width: 260px;
height: auto;
margin: 0 auto;
padding-top: 10px;
}
#wrap .box .info .pic:hover {
-webkit-animation: shade 3s ease-in-out 1;
-moz-animation: shade 3s ease-in-out 1;
-o-animation: shade 3s ease-in-out 1;
-ms-animation: shade 3s ease-in-out 1;
animation: shade 3s ease-in-out 1;
}
#wrap .box .info .title:hover {
-webkit-animation: shade 3s ease-in-out 1;
-moz-animation: shade 3s ease-in-out 1;
-o-animation: shade 3s ease-in-out 1;
-ms-animation: shade 3s ease-in-out 1;
animation: shade 3s ease-in-out 1;
}
#wrap .box .info img {
width: 260px;
border-radius: 3px;
}
#wrap .box .info .title {
width: 260px;
height: 40px;
margin: 0 auto;
line-height: 40px;
text-align: center;
color: #666;
font-size: 18px;
font-weight: bold;
overflow: hidden;
}
效果图如下
望各位大虾不吝赐教！
谢谢
最新文章
- django 补充篇
- 容易被忽略CSS特性
- Netbeans导入Nutch1.2
- [转]Tangram框架应用开发的一般模式
- bigworld源码分析（4）——BaseAppMgr分析
- python数据分析之pandas库的DataFrame应用二
- 用Jquery load text文本到網頁遇到的問題
- CC150 - 11.5
- ADF_Starting系列4_使用ADF开发富Web应用程序之维护User Interface（Part1）
- UVA 11354 Bond 邦德 （RMQ，最小瓶颈MST）
- nmap命令-----基础用法
- iOS 图片加载框架－ SDWebImage 解读
- PageMapAdapter MapAdapter (续webServices)
- java之坑-----List中的重复添加同一对象
- 基于visual Studio2013解决面试题之0308Fibonacci数列
- Linux入门篇（一）——基本命令
- 解决OS睡眠功能中，移动鼠标就会唤醒
- LeetCode 476 Number Complement 解题报告
- Android : Error inflating class android.support.design.widget.NavigationView
- H5视频播放器属性与API控件，以及对程序的解释