前言
首先声明并没有打广告，只是给你们安利一款免费的GIF录制工具，想把之前刚学css做的一点点小特效分享出来找不到一款好的录制gif的工具，找了三款都是有水印然后收费 又继续找了一下终于找到了ScreenToGif，强烈安利！！！
下一篇介绍ScreenToGif那么接下来我们来看一下css制作的炫酷特效(也不是很炫酷，哈哈哈)
正文
1、立方盒子特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
body{
perspective: 1000px;
background: #0A0A0A;
}
.wrap{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateY(0deg) rotateZ(45deg) rotateX(45deg);
transform: rotateY(0deg) rotateZ(45deg) rotateX(45deg);
-webkit-transition: all 50000s;
transition: all 50000s;
transition-timing-function: linear;
}
img{
width: 200px;
height: 200px;
opacity: 0.7;
border-radius: 50px;
}
.wrap:hover{
-webkit-transform: rotateY(-1000000deg) rotateZ(45deg) rotateX(45deg);
transform: rotateY(-1000000deg) rotateZ(45deg) rotateX(45deg);
}
.wrap div{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
border-radius: 50px;
/*10px :水平，10px垂直，200px阴影大小*/
box-shadow: inset 10px 10px 200px yellow, 0 0 150px #6F6;
}
.wrap div{
-webkit-transform: rotateY(0deg) translate3d(0, 0, 100px);
transform: rotateY(0deg) translate3d(0, 0, 100px);
}
.wrap div:nth-child(2){
background: #000;
-webkit-transform: rotateY(90deg) translate3d(0, 0, 100px);
transform: rotateY(90deg) translate3d(0, 0, 100px);
}
.wrap div:nth-child(3){
background: pink;
-webkit-transform: rotateY(180deg) translate3d(0, 0, 100px);
transform: rotateY(180deg) translate3d(0, 0, 100px);
}
.wrap div:nth-child(4){
background: skyblue;
-webkit-transform: rotateY(270deg) translate3d(0, 0, 100px);
transform: rotateY(270deg) translate3d(0, 0, 100px);
}
.wrap div:nth-child(5){
background: yellow;
-webkit-transform: rotateX(90deg) translate3d(0, 0, 100px);
transform: rotateX(90deg) translate3d(0, 0, 100px);
}
.wrap div:nth-child(6){
background: green;
-webkit-transform: rotateX(270deg) translate3d(0, 0, 100px);
transform: rotateX(270deg) translate3d(0, 0, 100px);
}
</style>
</head>
<body>
<div class="wrap">
<div>
<img src="img/1.jpg" alt="">
</div>
<div>
<img src="img/2.jpg" alt="">
</div>
<div>
<img src="img/3.jpg" alt="">
</div>
<div>
<img src="img/4.jpg" alt="">
</div>
<div>
<img src="img/5.jpg" alt="">
</div>
<div>
<img src="img/2.gif" alt="">
</div>
</div>
</body>
</html>
2、3D立体投影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: black;
}
.wrap{
width: 200px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
perspective:3000px;
/*最后才加上去*/
animation: rotateView 10s 4s infinite alternate;
}
/*最后才加上去*/
@keyframes rotateView{
from{transform: rotateY(0) rotateX(0);}
to{transform: rotateY(-360deg) rotateX(-35deg)}
}
.wrap div{
width: 200px;
height: 300px;
position: absolute;
/*1. direction 定义方向，取值包括 above 、 below 、 left 、 right。
* 2. offset定义反射偏移的距离，
* 3. mask-box-image定义遮罩图像*/
-webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,rgba(0,0,0,0.5));
}
/*第四个值为阴影的大小，越大，阴影就越大*/
.wrap div img{transition:0.5s;box-shadow: 0px 0px 10px 1px white}
.wrap div:nth-child(9){
animation:has_rotate9 0.5s forwards;
}
@keyframes has_rotate9{
from{transform: rotateY(0deg) translateZ(0px);}
to{transform: rotateY(400deg) translateZ(380px);}
}
.wrap div:nth-child(8){
animation:has_rotate8 0.5s 0.5s forwards;
}
@keyframes has_rotate8{
from{transform: rotateY(0deg) translateZ(0px);}
to{transform: rotateY(440deg) translateZ(380px);}
}
.wrap div:nth-child(7){
animation:has_rotate7 0.5s 1s forwards;
}
@keyframes has_rotate7{
from{transform: rotateY(0deg) translateZ(0px);}
to{transform: rotateY(480deg) translateZ(380px);}
}
.wrap div:nth-child(6){
animation: has_rotate6 0.5s 1.5s forwards;
}
@keyframes has_rotate6{
from{transform: rotateY(0deg) translateZ(0px);}
to{transform: rotateY(520deg) translateZ(380px);}
}
.wrap div:nth-child(5){
animation: has_rotate5 0.5s 2s forwards;
}
@keyframes has_rotate5{
from{transform: rotateY(0deg) translateZ(0px);}
to{transform: rotateY(560deg) translateZ(380px);}
}
.wrap div:nth-child(4){
animation: has_rotate4 0.5s 2.5s forwards;
}
@keyframes has_rotate4{
from{transform: rotateY(0deg) translateZ(0px);}
to{transform: rotateY(600deg) translateZ(380px);}
}
.wrap div:nth-child(3){
animation: has_rotate3 0.5s 3s forwards;
}
@keyframes has_rotate3{
from{transform: rotateY(0deg) translateZ(0px);}
to{transform: rotateY(640deg) translateZ(380px);}
}
.wrap div:nth-child(2){
animation: has_rotate2 0.5s 3.5s forwards;
}
@keyframes has_rotate2{
from{transform: rotateY(0deg) translateZ(0px);}
to{transform: rotateY(680deg) translateZ(380px);}
}
.wrap div:nth-child(1){
animation: has_rotate1 0.5s 4s forwards;
}
@keyframes has_rotate1{
from{transform: rotateY(0deg) translateZ(0px);}
to{transform: rotateY(720deg) translateZ(380px);}
}
</style>
</head>
<body>
<div class="wrap">
<div><img src="images/01.jpg" alt=""></div>
<div><img src="images/02.jpg" alt=""></div>
<div><img src="images/03.jpg" alt=""></div>
<div><img src="images/01.jpg" alt=""></div>
<div><img src="images/02.jpg" alt=""></div>
<div><img src="images/03.jpg" alt=""></div>
<div><img src="images/01.jpg" alt=""></div>
<div><img src="images/02.jpg" alt=""></div>
<div><img src="images/03.jpg" alt=""></div>
</div>
</body>
</html>
3、手风琴菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0}
ul{
list-style: none;
width: 840px;
border: 5px solid black;
margin: auto;
overflow: hidden;
}
li{
float: left;
width: 168px;
transition:1s;
}
img{
vertical-align: top;
}
ul:hover li{
width: 50px;
}
/*这个跟上面的位置不能调转，因为优先级一样。*/
ul li:hover{
width: 640px;
}
</style>
</head>
<body>
<ul>
<li><img src="img1.jpg" alt=""></li>
<li><img src="img2.jpg" alt=""></li>
<li><img src="img3.jpg" alt=""></li>
<li><img src="img4.jpg" alt=""></li>
<li><img src="img5.jpg" alt=""></li>
</ul>
</body>
</html>
4、彩色渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
p{
width: 800px;
height: 300px;
background: -webkit-linear-gradient(-30deg,red 30px,orange 150px,yellow 280px,pink 500px,blue);
/*-webkit-background-clip: text;*/
color:rgba(255,255,255,0.3);
text-align: center;
line-height: 300px;
font-size: 100px;
transition: 4s;
}
p:hover{
background-position: 400px;
}
</style>
</head>
<body>
<p>I am Vincent</p>
</body>
</html>
好了几天分享就到这里了，一点小特效。
