四个方向鼠标滑入的css动画

最新推荐文章于 2022-10-15 18:17:56 发布
最新推荐文章于 2022-10-15 18:17:56 发布
阅读量386 收藏
点赞数
分类专栏： CSS 文章标签： css3 transform
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_12132/article/details/82619086
版权 

<!DOCTYPE html>
<html><head>
	<title>测试</title>
	<meta charset="UTF-8">
	<style>
		*{margin:0;}

		/* The wrapper */
		.b-block {
		    position: relative;

		    display: inline-block;
		    overflow: hidden;
		    width: 10em;
		    height: 10em;

		    vertical-align: middle;

		    -webkit-transform: translateZ(0);
		    }

		/* The blocks that would be hovered */
		.b-block__hoverer {
		    position: absolute;
		    z-index: 1;

		    width: 71%;
		    height: 71%;
			opacity:0;

		    -webkit-transform: rotate(45deg);
		       -moz-transform: rotate(45deg);
		         -o-transform: rotate(45deg);
		            transform: rotate(45deg);
		    }

		/* Positioning for hoverers */
		.b-block__hoverer:nth-child(1) {
		    top: 0;
		    right: 0;
		    -webkit-transform-origin: 100% 0;
		       -moz-transform-origin: 100% 0;
		         -o-transform-origin: 100% 0;
		            transform-origin: 100% 0;
		    }
		.b-block__hoverer:nth-child(2) {
		    bottom: 0;
		    right: 0;
		    -webkit-transform-origin: 100% 100%;
		       -moz-transform-origin: 100% 100%;
		         -o-transform-origin: 100% 100%;
		            transform-origin: 100% 100%;
		    }
		.b-block__hoverer:nth-child(3) {
		    bottom: 0;
		    left: 0;
		    -webkit-transform-origin: 0 100%;
		       -moz-transform-origin: 0 100%;
		         -o-transform-origin: 0 100%;
		            transform-origin: 0 100%;
		    }
		.b-block__hoverer:nth-child(4) {
		    top: 0;
		    left: 0;
		    -webkit-transform-origin: 0 0;
		       -moz-transform-origin: 0 0;
		         -o-transform-origin: 0 0;
		            transform-origin: 0 0;
		    }

		/* Enlarge the hoverer to cover the whole area */
		.b-block__hoverer:hover {
		    z-index: 9;

			line-height: 10em;
			text-align:center;
			opacity:1;

		    width: 100%;
		    height: 100%;

		    -webkit-transform: none;
		       -moz-transform: none;
		         -o-transform: none;
		            transform: none;
		    }

		/* Styles for content block */
		.b-block__content {
		    position: absolute;
		    top: 0;
		    left: 0;

		    width: 100%;
		    height: 100%;

		    text-align: center;
		    line-height: 10em;

		    background: #333;
		    color: #FFF;

		    /* Restore the antialiasing lost from translateZ */
		    -webkit-font-smoothing: subpixel-antialiased;

		    -webkit-transition: all .3s ease;
		       -moz-transition: all .3s ease;
		         -o-transition: all .3s ease;
		            transition: all .3s ease;

		    -webkit-box-shadow: 0 -10em 0 0 red, 10em 0 0 0 pink, 0 10em 0 0 lime, -10em 0 0 0 orange;
		       -moz-box-shadow: 0 -10em 0 0 red, 10em 0 0 0 pink, 0 10em 0 0 lime, -10em 0 0 0 orange;
		            box-shadow: 0 -10em 0 0 red, 10em 0 0 0 pink, 0 10em 0 0 lime, -10em 0 0 0 orange;
		    }

		/* Move the content block while hovering different blocks */
		.b-block__hoverer:nth-child(1):hover ~ .b-block__content {
		    -webkit-transform: translate(0, 100%);
		       -moz-transform: translate(0, 100%);
		         -o-transform: translate(0, 100%);
		            transform: translate(0, 100%);
		    }
		.b-block__hoverer:nth-child(2):hover ~ .b-block__content {
		    -webkit-transform: translate(-100%, 0);
		       -moz-transform: translate(-100%, 0);
		         -o-transform: translate(-100%, 0);
		            transform: translate(-100%, 0);
		    }
		.b-block__hoverer:nth-child(3):hover ~ .b-block__content {
		    -webkit-transform: translate(0, -100%);
		       -moz-transform: translate(0, -100%);
		         -o-transform: translate(0, -100%);
		            transform: translate(0, -100%);
		    }
		.b-block__hoverer:nth-child(4):hover ~ .b-block__content {
		    -webkit-transform: translate(100%, 0);
		       -moz-transform: translate(100%, 0);
		         -o-transform: translate(100%, 0);
		            transform: translate(100%, 0);
		    }

		/* Just for aestetics */
		BODY {
		    padding: 2em;
		    font: 16px/1.5 "Helvetica Neue", Arial, sans-serif;
		    text-align: center;
		    }

	</style>
</head>
<body >
<p>Try to hover this block from different directions</p>
<p>↓</p>
<span>→ </span>
<div class="b-block">
    <div class="b-block__hoverer">A</div>
    <div class="b-block__hoverer">B</div>
    <div class="b-block__hoverer">C</div>
    <div class="b-block__hoverer">D</div>

    <div class="b-block__content">
        Hover me!
    </div>
</div>
<span> ←</span>
<p>↑</p>

</body></html>
iteye_12132
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
动画效果：css模块左滑入显示或者右边滑入显示
jieweiwujie的博客
05-18 1343
滑入显示动效
简洁的纯css3鼠标滑过按钮动画过滤样式
09-08
简洁的纯css3鼠标滑过按钮动画过滤样式
仿拉勾网动画效果-鼠标进入图片的方向滑动特效
sam_chens的博客
05-24 770
html> html lang="en"> head> meta charset="UTF-8"> title>用jquery判断鼠标划入方向title> script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script> style> #box{ wid
CSS3鼠标hover进度条与两端加载动画&光影划入效果
qq_39015698的博客
12-04 352
<!Doctype html> <html> <head> <style> *{margin:0;padding;0} .it1{ position:relative;width:200px;height:100px; background:orange; } .it1:after{position:absolute;bottom:0;left:0;...
css 页面从左侧向右滑入，动画只执行一次
且听风吟的博客
06-17 8882
简单实现了页面进入时的动画： （1）从左侧滑入； （2）只执行一次。
实现元素的滑入滑出效果
richest_qi的博客
02-25 7300
文章目录Demo.vue，使用transitionDemo.vue，使用transition，且自定义nameDemo.vue，使用transition，且自定义name，且使用属性appear 先看例子吧。 Demo.vue，使用transition <template> <div class="demo"> <button @click="isShow=!isShow">显示/隐藏</button> <transition
CSS3鼠标滑过导航出现下划线动画特效
06-05
这是一款非常漂亮的CSS3制作的鼠标滑过导航菜单时的从左到右出现下划线动画效果。
纯CSS3鼠标滑过动画按钮特效.zip
07-11
代码简介： 纯CSS3鼠标滑过动画按钮特效是一款基于CSS3 transition属性实现的按钮动画特效。
CSS3鼠标滑过图片显示文字动画库
04-06
CSS3鼠标滑过图片显示文字动画库是一款可以适应图片的缩放，提供44种不同的鼠标滑过图片效果，压缩后的版本只有19K大小，可以完成各种不同场景的需求。
鼠标滑过栏目CSS3动画特效.zip
07-11
代码简介：鼠标滑过栏目CSS3动画特效是一款资海科技网站鼠标滑过栏目CSS3动画特效。
jQuery+css3感知鼠标方向悬停按钮动画特效
06-11
一款简单漂亮的jQuery+css3感知鼠标方向悬停按钮动画特效，可以感知鼠标指针进入按钮的方向，动画效果从鼠标进入的方向开始出现。
CSS3动画效果-元素出入用
07-28
一些CSS3动画效果-元素飞入飞出、淡入淡出 、旋转、翻转、飘入、滑入滑出等等效果
CSS3实现div滑入滑出效果（从下往上）
热门推荐
Amy_cloud的博客
08-13 6万+
1，首先需要用的是 CSS3的 target 选择器，配合a标签指定id选择器切换目标元素，用于选取当前活动的目标元素。 2，CSS3 的 transition 动画，这里不做详细介绍 看一下效果图： 点击滑出按钮，元素从底部匀速滑入到页面一定高度；再点击滑入，元素从当前位置匀速滑入期初位置。 直接上代码： &lt;h1&gt;CSS3滑入/滑出效果&lt;/h1&gt; &...
css上滑事件,css transition 实现滑入滑出
weixin_36027833的博客
08-03 2349
transition是css最简单的动画。 通常当一个div属性变化时，我们会立即看的变化，从旧样式到新样式是一瞬间的，嗖嗖嗖！！！但是，如果我希望是慢慢的从一种状态，转变成另外一种状态，怎么办？ transition可以做到。第一问：哪些属性值变化会触发这个transition呢？一般常见的有：width, height, opacity, color, z-index,visibility...
css3文字从两边滑入的动画
weixin_43403543的博客
04-30 2922
.banner .txt_right{ float: right; margin-right: 140px; margin-top: 200px; text-align: center; font-size: 40px; color:rgb(236, 236, 236); animation: rightEaseInAnimate 2s ea...
CSS3 实现 div 上下滑入滑出效果
肖朋伟
03-05 1万+
CSS3 实现 div 上下滑入滑出效果 本篇内容： 1，首先需要用的是 CSS3 的 target 选择器，配合a标签指定id选择器切换目标元素，用于选取当前活动的目标元素。 （当然也可以不用 a 便签，页面加载的时候自动滑动） 2，CSS3 的 transition 动画，这里不做详细介绍 动图展示： 滑动效果源代码 &lt;!DOCTYPE html&gt; &lt;html lang="...
【博学谷学习记录】超强总结，用心分享丨用css完成鼠标滑入，幕布拉开展示商品的动画效果
sophia11116的博客
10-15 485
今天我们来一起制作一个产品展示的动画，因为有鼠标滑入就能出现商品，所以能让人眼前一亮，关注到商品，那我们今天一起来制作吧！
纯css实现鼠标移动方向遮罩效果
张致豪
08-07 2602
在codepen上看到一款css效果，很不错 根据鼠标进入框的方向的不同，遮罩进入的方向也不同。
纯CSS3的图片集点击放大
牧童
03-26 1603
[code="html"] .slideshow {width:300px; height:60px; margin:250px auto;} input {position:absolute; left:-9999px; display:none;} label.toggle {display:block; width:80px; height:60px;...
css滑入滑出动画效果
最新发布
08-16
您可以使用CSS的transition属性来实现滑入滑出的动画效果。 首先，您需要为要应用动画效果的元素添加一个CSS类。例如，我们将使用名为"slide-in-out"的类。然后，您可以使用transition属性来定义元素的过渡效果。 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值