CSS3实现旋转名片效果

CSS3实现旋转名片效果

效果

技术点

-webkit-animation
-webkit-box-reflect
-webkit-transform
媒体查询

代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3名片特效 | 镜心书社</title>
	<link rel="stylesheet" type="text/css" href="style/pic-scroll-out.css">
</head>
<body>
	<img src="images/me.jpg" alt="" class="pic">
	<div class="line"></div>
	<div class="text">A CSS3 Demo. Do you like it?</div>
	<div class="contact">
		<p>E-mail: sha5xiang@gmail.com</p>
		<p>Blog: http://jxdxsw.com</p>
		<p>微信公众号：镜心的小树屋</p>
	</div>
	<!--[if lt IE 9]>
        <script type="text/javascript">
        //<![[
            var box = document.createElement("div"),
                bug = {
                    position:'absolute',
                    'z-index': 9999,
                    top:'-51px',
                    height:'50px',
                    width:'100%',
                    'border-bottom':'1px solid #238432',
                    background:'orange',
                    'text-align': 'center',
                    'line-height': '50px',
                    'font-weight': 'bold'
                }, key, csses = '', timer = null;
            for(key in bug){
                csses += key + ":" + bug[key] + ";";
            }
            box.style.cssText = csses;
            box.setAttribute('id', 'bug');
            box.innerHTML = "这个Demo只为Chrome准备，屌丝浏览器看不到效果~";
            document.getElementsByTagName('body')[0].appendChild(box);
            function ani(){
                timer = setTimeout(ani, 10);
                var top = parseInt(box.style.top);
                if(top >= -1) clearTimeout(timer);
                box.style.top = top + 1 + 'px';
            }
            setTimeout(ani, 800);
        //]]>
        </script>
    <![end if]-->
	<a href="https://github.com/AlexZ33/HTML5_CSS3/tree/master/CSS3_demo"><img style="position: absolute; top: 0; right: 0; border: 0;" src="images/forkme.png" alt="Fork me on GitHub"></a>
</body>
</html>
`

html{
	height: 100%;
	overflow: hidden;
}
body{
	position: relative;
	background: -webkit-gradient(linear,left top,left bottom,from(#666),colo-stop(0.5,#fff),to(#666));
	height: 100%;
	margin: 0;
	padding: 0;
}
.line{
	height:3px;
	background: red;
	opacity: 0.3;
	width: 100%;
	position: absolute;
	top: 50%;
	-webkit-animation:stecth 2s linear;
}
.text{
	height: 90px;
	width: 50%;
	position: absolute;
	left: 50%;
	top:44%;
	color: rgba(168,0,0,0.6);
	font-weight: bold;
	line-height: 45px;
	font-size: 32px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow:clip;
	text-transform: uppercase; 
	text-shadow:3px 3px 5px rgba(130,0,0,0.6);
	-webkit-box-reflect:below -80px -webkit-gradient(linear,0 0,0 100%,from(transparent),to(white));
	-webkit-animation:Tstecth 2s linear;
}
.pic{
	border-radius: 12px;
	position: absolute;
	top: 28%;
	left: 12%;
	opacity: 0.9;
	height: 40%;
	box-shadow: 5px 5px 10px raba(15,13,13,0.6);
	z-index:100;
	-webkit-transform:rotate(-10deg);
	-webkit-animation:pic 1s linear;
}
.contact{
	position:absolute;
	bottom:20%;
	left: 40%;
	left:40%;
	line-height:24px;
	color: #666;
}
.contact p{
	margin:0;
	-webkit-animation:contact 2s linear;
	text-shadow:1px 1px 3px #666;
}
@-webkit-keyframes stecth{
	from{width: 0}
	to {width:100%}
}
@-webkit-keyframes Tstecth{
	0%{width:0;}
	50%{width: 0;}
	100%{width: 50%;}
}
@-webkit-keyframes pic{
	0%{-webkit-transform:rotate(8deg); opacity: 0;}
	20%{-webkit-transform:rotate(8deg);height:0;top:44%;left:18%;opacity: 0;}
	50% {-webkit-transform:rotate(178deg);heihgt:20%;top:36%;left:16%;opacity: 0.5;}
	100%{-webkit-transform:rotate(348deg);height: 40%;top: 28%;left: 12%;opacity: 1;}
}
@-webkit-keyframes contact{
	0%{opacity: 0;}
	50%{opacity: 0;color:#fff;}
	100%{opacity: 1;color: #666;}
}