css3模拟三角效果
div{
/*用css边框可以模拟三角效果
1.宽度高度为0
2.4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为transparent
3.为了照顾兼容性，加上font-size:0; line-height:0;
* */
width: 0;
height: 0;
border-left: 10px solid red;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
font-size: 0;
line-height: 0;
}
照片旋转木马效果
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
perspective: 1000px;
}
section{
margin: 100px auto;
position: relative;
width: 300px;
height: 200px;
animation: rotate 10s linear infinite;
transform-style: preserve-3d;
}
section:hover{
animation-play-state: paused;
}
@keyframes rotate{
0%{
transform: rotateY(0);
}
100%{
transform: rotateY(360deg);
}
}
section div{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(img/han.JPG) no-repeat;
}
section div:nth-child(1){
transform: translateZ(300px);
}
section div:nth-child(2){
transform:rotateY(60deg) translateZ(300px);
}
section div:nth-child(3){
transform:rotateY(120deg) translateZ(300px);
}
section div:nth-child(4){
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5){
transform:rotateY(240deg) translateZ(300px) ;
}
section div:nth-child(6){
transform: rotateY(300deg) translateZ(300px);
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
淘宝产品边框效果
<style type="text/css">
div{
position: relative;
float: left;
width: 200px;
height: 300px;
/*使两个div的边框只显示一条*/
margin-right: -1px;
border: 1px solid #ccc;
}
div:hover{
border: 1px solid pink;
/*要让当前鼠标经过的这个div升到最高处就好了*/
/*定位的盒子是最高层的*/
/*只要保证当前的盒子 是定位 就会压住标准流和浮动盒子*/
z-index: 1;
}
</style>
两个盒子面旋转效果
<style type="text/css">
body{
perspective: 500px;
}
.box{
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
transform-style: preserve-3d;
transition: all .4s;
}
.box:hover{
transform: rotateY(180deg);
}
.front,
.back{
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
color: #fff;
border-radius: 50%;
}
.front{
background-color: pink;
}
.back{
background-color: plum;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">粉色盒子</div>
<div class="back">这里紫色盒子</div>
</div>
</body>
地图标注
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{background-color: #ccc;}
.map{
background:url(img/map.png) no-repeat;
width: 953px;
height: 472px;
margin: 0 auto;
}
.city{
position: absolute;
top: 164px;
left: 712px;
}
.dotted{
position: absolute;
width: 8px;
height: 8px;
background-color: pink;
border-radius: 50%;
}
.city div[class^='pusle']{
/*保证小波纹在父盒子里水平垂直居中 放大之后就会中心向四周发散*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 8px;
height: 8px;
box-shadow: 0 0 12px hotpink;
border-radius: 50%;
animation: pusle 1.2s linear infinite forwards;
}
.city div.pusle2{
animation-delay: 0.4s;
}
.city div.pusle3{
animation: .8s;
}
@keyframes pusle{
0%{
opacity: 1;
}
70%{
width: 40px;
height: 40px;
opacity: 1;
}
100%{
width: 70px;
height: 70px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="dotted"></div>
<div class="pusle1"></div>
<div class="pusle2"></div>
<div class="pusle3"></div>
</div>
</div>
</body>
奔跑的小熊
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{background-color: #ccc;}
div{
position: absolute;
width: 200px;
height: 100px;
background: url(img/bear.png)no-repeat;
animation: run 1s steps(8) infinite,mov 4s forwards;
}
@keyframes run{
from{
background-position: 0 0;
}
to{
background-position: -1600px 0;
}
}
@keyframes mov{
from{
left: 0;
}
to{
left: 50%;
transform: translate(-50%);
}
}
</style>
</head>
<body>
<div>
</div>
</body>
3D盒子导航
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul li{
float: left;
list-style: none;
width: 100px;
height: 35px;
margin: 0 5px;
perspective: 500px;
text-align: center;
line-height: 35px;
color: #fff;
cursor: pointer;
}
.box{
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all .3s;
}
.box:hover{
transform: rotateX(90deg);
}
.front,
.bottom{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.front{
background-color: pink;
transform: translateZ(17.5px);
}
.bottom{
background-color: purple;
transform:translateY(17.5px) rotatex(-90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front">这里是导航</div>
<div class="bottom">Hello!</div>
</div>
</li>
<li>
<div class="box">
<div class="front">这里是导航</div>
<div class="bottom">Hello!</div>
</div>
</li>
<li>
<div class="box">
<div class="front">这里是导航</div>
<div class="bottom">Hello!</div>
</div>
</li>
<li>
<div class="box">
<div class="front">这里是导航</div>
<div class="bottom">Hello!</div>
</div>
</li>
<li>
<div class="box">
<div class="front">这里是导航</div>
<div class="bottom">Hello!</div>
</div>
</li>
</ul>
</body>