CSS3 2D 转换

CSS3自定义动画

@keyframes left-box1{
    0%{margin-left: 0;}
    50%{margin-left:300px;}
    100%{margin-left: 0;}
}
.left-1{width: 90%;margin:  auto;margin-top: 200px;}
infinite属性 指定动画应该播放无限次(永远)
.box-1{width: 100px;height:100px;background: #ccc;animation:left-box1 infinite 3s;}
    

CSS3旋转

@keyframes left2{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}
transform:xxx  	适用于2D或3D转换的元素
transform: rotate(360deg)方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转
linear属性 动画从头到尾的速度是相同的
.left-2 .box-1{width: 100px;height:100px;background: #ccc;animation:left2 infinite linear 5s;}
.left-2 img{animation:left2 infinite linear 5s;}
    
陈广安-个人开发

CSS3倾斜

transform: skew(-10deg,-20deg); 元素在X轴和Y轴上倾斜-10度-20度。
.left-3 .box-1{width: 100px;height:100px;background: #00a8ff;transform:skew(-10deg,-20deg)}
    

CSS3移动

@keyframes left4{
    0%{transform:translate(0px,0px)}
    50%{transform:translate(280px,80px)}
    0%{transform:translate(0px,0px)}
}
transform:translate(280px,80px)方法,是从左边元素移动280个像素,并从顶部移动80像素。
.left-4 .box-1{width: 100px;height:100px;background: #00a8ff;animation:left4 infinite linear 3s;}
    

CSS3缩放

@keyframes left5{
    0%{transform:scale(0,0);}
    50%{transform:scale(1,1);}
    0%{transform:scale(0,0);}
}
transform:tscale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。
.left-5 .box-1{width: 100px;height:100px;background: #00a8ff;animation:left5 infinite linear 3s;}
    

CSS3 matrix() 2D变换方法合并成一个

@keyframes left6{
    0%{transform:matrix(0,0,0,0,0,0)}
    50%{transform: matrix(2,0,0,2,700,-50);}
    100%{transform:matrix(0,0,0,0,0,0)}
}
transform:matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
六个参数(缩放宽,倾斜x,倾斜y,缩放高,x移动像素,y移动像素)
.left-6 .box-1{width: 100px;height:100px;background: #00a8ff;animation:left6 infinite linear 3s;}
    

CSS3 3D 转换

rotateX()方法

@keyframes left7{
    0%{transform:rotateX(0deg)}
    50%{transform: rotateX(90deg);}
    100%{transform:rotateX(0deg)}
}
tranframes:rotateX()方法,围绕其在一个给定度数X轴旋转的元素
.left-7 .img{animation:left7 infinite linear 3s;}
    
陈广安-个人开发

rotateY()方法

@keyframes left8{
    0%{transform:rotateY(0deg)}
    50%{transform: rotateY(90deg);}
    100%{transform:rotateY(0deg)}
}
rotateY()方法,围绕其在一个给定度数Y轴旋转的元素。
.left-8 .img{animation:left8 infinite linear 3s;}
    
陈广安-个人开发

盒模型3D翻转

transform-origin 属性允许您改变被转换元素的位置。
transform-origin 2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴
.left-9-box{position: relative;height: 100px;width: 100px;float:left;
    /*以3D的方式进行*/
    transform-style:preserve-3d;
    /*以什么为中心点进行旋转,*/
    transform-origin:center center -50px;
    /*backface-visibility 属性定义当元素不面向屏幕时是否可见。*/
    backface-visibility:visible;
    transition: .5s
}
伪元素进行翻转
.left-9-box:hover{transform: rotateY(-90deg);}
.left-9-box>div{width: 100%;height: 100%;text-align: center;line-height: 100px;position: absolute;left:0;top:0;color: #fff;}
/*主*/
.left-9 .box-1{
    background: #00a4ac;translateZ(100px)
}
/*左*/
.left-9 .box-2{
    background: #0e9674;
    transform-origin:left;transform: rotateY(90deg);
    transform-origin:50% 50% -50px;transform: rotateY(-90deg);
}
/*右*/
.left-9 .box-3{
    background: #00a8ff;
    transform-origin:right;transform: rotateY(-90deg);
    transform-origin:50% 50% -50px;transform: rotateY(90deg);
}
/*上*/
.left-9 .box-4{
    background: #005591;
    transform-origin:top;transform: rotateX(-90deg);
    transform-origin:50% 50% -50px;transform: rotateX(90deg);
}
/*下*/
.left-9 .box-5{
    background: #4f8099;
    transform-origin:bottom;transform: rotateX(90deg);
    transform-origin:50% 50% -50px;transform: rotateX(-90deg);
}
/*后*/
.left-9 .box-6{
    background: red;
    transform:translateZ(-100px) rotateY(180deg);
}


<div class="left-9-box">
    <div class="box-2">左视图</div>
    <div class="box-3">右视图</div>
    <div class="box-4">俯视图</div>
    <div class="box-5">仰视图</div>
    <div class="box-6">后视图</div>
    <div class="box-1">主视图</div>
</div>
    
左视图
右视图
俯视图
仰视图
后视图
主视图

CSS3 过度:单项过度(改变宽度)

transition:all 0 ease 0;
注意: 始终指定transition-duration属性,否则持续时间为0,transition不会有任何效果。
.left-10 .box-1{width:200px;height: 200px;background: #00a8ff;transition:width 2s;}
.left-10 .box-1:hover{width: 500px;}
    

鼠标移动到 div 元素上,查看过渡效果。


CSS3 过度:多项过度(改变宽高,以及旋转)

.left-10 .box-1{width:200px;height: 200px;background: #00a8ff;transition:width 2s;}
.left-10 .box-1:hover{width: 500px;}
    

鼠标移动到 div 元素上,查看过渡效果。


CSS3 按钮动画

xx:after{content:'xx';} 
在xx元素的内容之后插入新内容xx
.left-12 button{width: 100px;height:38px;background: #00a8ff;border:none;cursor:pointer;}
.left-12 button span{color: #fff;position: relative;left:5px;transition:left 0.5s;}
.left-12 button span:after{content: '»';opacity: 0;transition:opacity 0.5s}
.left-12 button:hover span:after{opacity: 1;}
.left-12 button:hover span{left: 0;}
    

鼠标移动到按钮上后添加箭头标记

.left-13 button{width: 180px;height:60px;background: #00a8ff;border:none;cursor:pointer;border-radius:8px;box-shadow:0 5px #005d90;transition:box-shadow 0.2s;}
.left-13 button span{color: #fff;position: relative;font-size: 25px;}
.left-13 button:active{transform: translateY(5px);box-shadow:0 1px #002c4b;}
    

点击时添加 "压下" 效果


CSS3 渐变

Linear Gradients 线性渐变:向下/向上/向左/向右/对角方向

Radial Gradients 径向渐变:由它们的中心定义

.box-1{width: 100%;height:100px;background:linear-gradient(#0086d7, #b60000);}

默认渐变 上到下 两种颜色渐变

.box-2{width: 100%;height:100px;background:linear-gradient(to left,#0086d7, #b60000);}

从左到右 两种颜色渐变

.box-3{width: 100%;height:100px;background:linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);}

从左到右 多种颜色渐变

.box-4{width: 100%;height: 100px;background:linear-gradient(to left  top, #00a8ff, #00243e);}

对角渐变

.box-5{width: 100%;height: 100px;background:linear-gradient(50deg, #00a8ff, #00243e);}

角度渐变

.box-6{width: 100%;height: 100px;background:linear-gradient(rgba(255,0,0,0),rgba(255,0,0,1))}

带透明度渐变

.box-7{width: 100%;height: 100px;background:radial-gradient(#00a8ff, #00243e, #e57100)}

径向渐变:默认椭圆渐变

.box-8{width: 100%;height: 100px;background:radial-gradient(circle,#00a8ff, #00243e, #e57100)}

径向渐变:圆形渐变

网站地图 VUE版

Copyright @2016-2018 All rights reserved 冀ICP备16027619号

陈广安
陈广安
陈广安
陈广安
陈广安
陈广安

昵称:会写代码的平面师

来自:广东梅州五华

首页
商城
留言
更多