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

mutongwu

浏览: 449062 次
性别:
来自: 广州

最近访客更多访客>>

lxswfc

xjg9083

oszerone

micai_1234

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css3 transform

<!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>

分享到：

stellar插件的使用 | icon font VS svg font

2015-05-14 18:08
浏览 2167
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

简单下拉框模拟

icon font VS svg font

简单的css3全屏滚动-左右方向

简单的css3全屏滚动

纯CSS3的图片slider

移动端的“点透”问题

如何读写伪类元素的样式？

模拟滚动条

纯CSS3的loading图案

纯CSS3的图片集点击放大

css3 简单slider

css3的饼图

图片倒影

动态添加style元素

备份一个简单的分页条

页面布局：分5个区域

关于getBoundingClientRect 与 getClientRects

兼容IE的 position:fixed

三角区域

关于未设置父元素宽度的block子元素显示

最近访客更多访客>>