css3+html鼠标划入动态效果(二)

最新推荐文章于 2022-02-25 15:18:35 发布
最新推荐文章于 2022-02-25 15:18:35 发布
阅读量638 收藏 5
点赞数 1
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43853746/article/details/107132297
版权

效果图：
在这里插入图片描述

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
<title>css动态效果</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
 <!--gallery-->
	<div class="gallery" id="gallery">
		<div class="container">
			<div class="w3layouts-heading">
				<h3>Our Work</h3>
			</div>
			<div class="w3ls_gallery_grids">
				<div class="col-md-4 w3_agile_gallery_grid">
					<div class="agile_gallery_grid">
						<a  href="images/g1.jpg">
							<div class="agile_gallery_grid1">
								<img src="images/g1.jpg" alt=" " class="img-responsive" />
								<div class="w3layouts_gallery_grid1_pos">
									<h3>热情，创新</h3>
									<p>激情，满意，精益求精</p>
								</div>
							</div>
						</a>
					</div>
					<div class="agile_gallery_grid">
						<a href="images/g2.jpg">
							<div class="agile_gallery_grid1">
								<img src="images/g2.jpg" alt=" " class="img-responsive" />
								<div class="w3layouts_gallery_grid1_pos">
									<h3>热情，创新</h3>
									<p>激情，满意，精益求精</p>
								</div>
							</div>
						</a>
					</div>
					<div class="agile_gallery_grid">
						<a href="images/g3.jpg">
							<div class="agile_gallery_grid1">
								<img src="images/g3.jpg" alt=" " class="img-responsive" />
								<div class="w3layouts_gallery_grid1_pos">
									<h3>热情，创新</h3>
									<p>激情，满意，精益求精</p>
								</div>
							</div>
						</a>
					</div>
				</div>
				<div class="col-md-4 w3_agile_gallery_grid">
					<div class="agile_gallery_grid">
						<a  href="images/g4.jpg">
							<div class="agile_gallery_grid1">
								<img src="images/g4.jpg" alt=" " class="img-responsive" />
								<div class="w3layouts_gallery_grid1_pos">
									<h3>热情，创新</h3>
									<p>激情，满意，精益求精</p>
								</div>
							</div>
						</a>
					</div>
					<div class="agile_gallery_grid">
						<a href="images/g5.jpg">
							<div class="agile_gallery_grid1">
								<img src="images/g5.jpg" alt=" " class="img-responsive" />
								<div class="w3layouts_gallery_grid1_pos">
									<h3>热情，创新</h3>
									<p>激情，满意，精益求精</p>
								</div>
							</div>
						</a>
					</div>
					<div class="agile_gallery_grid">
						<a  href="images/g6.jpg">
							<div class="agile_gallery_grid1">
								<img src="images/g2.jpg" alt=" " class="img-responsive" />
								<div class="w3layouts_gallery_grid1_pos">
									<h3>热情，创新</h3>
									<p>激情，满意，精益求精</p>
								</div>
							</div>
						</a>
					</div>
				</div>
				<div class="col-md-4 w3_agile_gallery_grid">
					<div class="agile_gallery_grid">
						<a  href="images/g7.jpg">
							<div class="agile_gallery_grid1">
								<img src="images/g7.jpg" alt=" " class="img-responsive" />
								<div class="w3layouts_gallery_grid1_pos">
									<h3>热情，创新</h3>
									<p>激情，满意，精益求精</p>
								</div>
							</div>
						</a>
					</div>
					<div class="agile_gallery_grid">
						<a  href="images/g8.jpg">
							<div class="agile_gallery_grid1">
								<img src="images/g8.jpg" alt=" " class="img-responsive" />
								<div class="w3layouts_gallery_grid1_pos">
									<h3>热情，创新</h3>
									<p>激情，满意，精益求精</p>
								</div>
							</div>
						</a>
					</div>
					<div class="agile_gallery_grid">
						<a  href="images/g9.jpg">
							<div class="agile_gallery_grid1">
								<img src="images/g9.jpg" alt=" " class="img-responsive" />
								<div class="w3layouts_gallery_grid1_pos">
									<h3>热情，创新</h3>
									<p>激情，满意，精益求精</p>
								</div>
							</div>
						</a>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
<!--//gallery-->
</body>
</html>

css部分：

.agile_gallery_grid{
	margin-top:2em;
}
.w3_agile_gallery_grid .agile_gallery_grid:nth-child(1) {
    margin-top: 0!important;
}
.agile_gallery_grid1 {
    position: relative;
    box-shadow: -7px 7px 17px rgba(158, 156, 156, 0.59);
}
.w3layouts_gallery_grid1_pos {
    background: rgba(0, 0, 0, 0.73);
    bottom: 45px;
    left: 45px;
    opacity: 0;
    padding: 1em;
    position: absolute;
    right: 45px;
    text-align: center;
    top: 45px;
    visibility: hidden;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
}
.w3layouts_gallery_grid1_pos h3 {
    font-size: 1.2em;
    letter-spacing: 2px;
    font-weight: 600;
    margin: 1em 0 .5em;
    padding-bottom: .5em;
    position: relative;
    text-transform: capitalize;
    color: #ffffff;
    font-family: 'Poiret One', cursive;
}
.w3layouts_gallery_grid1_pos h3:after {
    background: #fd6900;
    bottom: -4px;
    content: '';
    height: 2px;
    left: 35.5%;
    position: absolute;
    width: 65px;
}
.w3layouts_gallery_grid1_pos p {
    color: #00affe;
    margin-top: 1.5em;
    font-size: 14px;
    letter-spacing: 1px;
}
.agile_gallery_grid:hover .w3layouts_gallery_grid1_pos{
    opacity: 1;
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
	-moz-transform: scaleX(1);
	-o-transform: scaleX(1);
	-ms-transform: scaleX(1);
}
Ly_cat
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html鼠标滑入滑出效果,CSS3创建一个滑出滑入的动画
weixin_39968995的博客
06-03 1321
有时候我们需要在网站上的边栏上放一个客户帮助的表单，开始是放一个按钮在那里，点击之后滑出内容来，一般这种效果我们会用js来控制。现在CSS3也可以做到了哦。不知道什么意思吗？看看这个演示这个是怎么做到的呢？那就要用到CSS3里面的:target这个标签了。之前我也写过相类似用到:target的动画。比如：CSS3手风琴的两种制作方案 超酷的CSS3幻灯片效果下面我们一起看看这个动画的实现思路...
html鼠标背景特效,6种鼠标滑过按钮背景动画特效
weixin_32334681的博客
06-04 2617
插件描述：这是一组效果非常酷的鼠标滑过按钮背景动画特效。该特效中，当鼠标滑过按钮时，使用CSS3 animation来动画backgroundsize和backgroundposition属性，来制作各种背景动画效果。简要教程这是一组效果非常酷的鼠标滑过按钮背景动画特效。该特效中，当鼠标滑过按钮时，使用CSS3 animation来动画background-size和background-posi...
HTML5鼠标动态炫酷特效.zip
12-01
HTML5鼠标动态炫酷特效
HTML5动态的鼠标特效.rar
07-10
HTML5动态的鼠标特效，鼠标放着不动，会自动生成几何图形，叠加在一起的几何图形，鼠标动起来，图形的角度和数量都会发生变化，鼠标滑过，图形 会自动复制，很炫酷的H5鼠标特效，请参见截图。
动画效果 滑入滑出
weixin_47558015的博客
05-09 230
slideDown()/slideUp()/slideToggle() 滑入滑出动画 slideDown(1000,fn) 第一个参数 动画时间 第二个参数 动画完成后的回调函数 注意：即使不传入动画时间参数，也有动画效果 <body> <button>下拉滑动</button> <button>上拉滑动</button&gt...
html5 鼠标动画效果,7 个让人惊叹的 HTML5 鼠标动画
weixin_39834984的博客
06-03 244
今天我们一起来分享一些有趣的HTML5鼠标动画，当我们移动鼠标时，页面上将会出现一些神奇的动画特效。当然这些动画可能在实际应用中并不太会使用到，但是对大家研究HTML5和CSS3的帮助应该会非常大。本文分享的7个HTML5鼠标动画都提供源代码下载，都是一些不错的资源。1、HTML5鲸鱼动画今天我找到了基于HTML5的鲸鱼动画，鲸鱼会随着鼠标的移动而游动，画面非常立体，鲸鱼也超级逼真。真的，HTML...
html+css完成一个鼠标移入，文字下滑显示的效果
天才派大星 !的博客
03-29 3263
在很多电商网站，会存在商品的展示，当用户把鼠标移入商品图片上时，会从上面滑下商品的详情，价格等文字，来实现这个小案例 案例展示 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte...
html鼠标滚动图片渐渐淡出,原生js和jquery实现图片轮播淡入淡出效果
weixin_39548541的博客
06-04 1493
图片轮播有很多种方式，这里采用其中的 淡入淡出形式js原生和jQuery都可以实现，jquery因为封装了很多用法，所以用起来就简单许多，转换成js使用，其实也就是用js原生模拟出这些用法。但不管怎样，构造一个最基本的表现层是必须的简单的图片轮播一般由几个部分构成。对于淡入淡出式1.首先是个外围部分(其实也就是最外边的整体wrapper)2.接着就是你设置图片轮播的地方(也就是一个banner吧)...
html5页面滑入滑出效果,jQuery实现的淡入淡出与滑入滑出效果示例
weixin_42231085的博客
06-05 991
本文实例讲述了jQuery实现的淡入淡出与滑入滑出效果。分享给大家供大家参考，具体如下：1. 淡入淡出效果：我们做这样一个实例：有两个按钮，点击淡入，有一个div层淡入，点击淡出，div层淡出：www.jb51.net jQuery淡入淡出.div{width: 300px;height: 300px;background-color: red;display: none;}$(function(...
html+css+js实现二级菜单鼠标移动效果
Ariel的博客
10-24 3512
效果图： 大体思路： 鼠标移至头像时，二级菜单出现，鼠标移至二级菜单，可以对子菜单进行选择，鼠标移出子菜单，子菜单消失。 子菜单使用position：absolute绝对定位到父级菜单下方。 &amp;amp;lt;div class=&amp;quot;content&amp;quot;&amp;amp;gt; &amp;amp;lt;img src=&amp;quot;img/index/head.png&amp
用css实现的鼠标悬停效果
Z_唐的博客
09-26 6437
<html> <head> <meta charset="utf-8"> <title></title> <base target="_blank" /> <style> a{ color: black; text-decoration: none; /*border:solid 1
html+css+JavaScript实现淡入淡出下拉菜单
07-08
开始自己就想做一个属于自己的下拉菜单，从什么都不知道到最后成功设计出来了！程序简单易懂，适合初学者！
CSS3+jQuery鼠标跟随图片悬停效果特效代码
03-20
CSS3+jQuery鼠标跟随图片悬停效果，能够判断鼠标移入的方向，遮罩可以按移入的方向出现，也可以从反方向出现，可设定延迟值。兼容主流浏览器
html+css+js-3D动态表白相册
05-20
html+css+js_3D动态表白相册，纯前端的web部分，资源中没有设计后台代码及其数据库部分。资源的包含了该动态相册的源码+参考文章地址，对于初学者来说，该动态相册直接用浏览器即可打开查看相应效果(如果不是预期的...
css3+伪元素实现鼠标移入时下划线向两边展开的效果
09-24
主要介绍了利用css3+伪元素实现鼠标移入时下划线向两边展开效果的相关资料，文中先进行了详细的介绍，方便大家理解，而后给出了完整的实例代码让大家可以参考学习，需要的朋友们下面来一起学习学习吧。
前端HTML+CSS3+JavaSsript实现动态时钟实现效果展示
最新发布
11-21
前端HTML+CSS3+JavaSsript实现动态时钟实现效果展示
CSS3 +HTML5入门到精通
07-01
《HTML+5+从入门到精通》-中文学习教程
实现元素的滑入滑出效果
richest_qi的博客
02-25 7641
文章目录Demo.vue，使用transitionDemo.vue，使用transition，且自定义nameDemo.vue，使用transition，且自定义name，且使用属性appear 先看例子吧。 Demo.vue，使用transition <template> <div class="demo"> <button @click="isShow=!isShow">显示/隐藏</button> <transition
html5 鼠标滑动页面动画效果,鼠标滑动到当前页面触发动画效果
weixin_35772420的博客
06-03 4628
近年来，关于鼠标滑动到当前页面从而触发动画效果十分的火热，今天我们就来学习下这一效果。一、首先，我们先来了解一下这一效果实现的原理1.一个网页离不开基本的布局，所以首先就是要先用html将所需要的结构布局出来(长页风格)。2.另外，这一效果的实现主要是结合css3的自定义动画(animation)来实现的。所以，这一阶段，就需要将你所想要实现的动画效果用css3样式实现出来。3.最后，这也是最重要...
用HTML+CSS+JS做一个动态爱心效果
03-28
以下是一个简单的动态爱心效果示例，使用了HTML、CSS和JavaScript： HTML代码： ``` <div class="heart"></div> ``` CSS代码： ``` .heart { position: relative; width: 50px; height: 50px; transform: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值