CSS简单动画及二三维常用变换
/*向右移动*/ .moveRight{ background-color:#FFF121; position:relative; animation:moveRightFrame 5s;/*infinite 循环*/ animation-delay:3s;/*延时*/ animation-iteration-count:2;/*循环次数*/ animation-direction:alternate;/*是否轮流反向播放 normal或alternate */ } @keyframes moveRightFrame{ from {left:0px;} to {left:200px;} } @-webkit-keyframes moveRightFrame{/*谷歌浏览器*/ from {left:0px;} to {left:200px;} } /*指定变化过程*/ @keyframes moveRightFrame1{ 0% {left:0px;} 25% {left:100px;} 50% {left:400px;} 100% {left:800px;} } @-webkit-keyframes moveRightFrame1{/*谷歌浏览器*/ 0% {left:0px;} 25% {left:100px;} 50% {left:400px;} 100% {left:800px;} } /*属性变化 直接设置标签的style会覆盖此处属性*/ .propertyChange{ width:100px; background-color:red; transition:width 3s, background-color 5s; -webkit-transition:width 3s, background-color 5s; } .propertyChange:hover{ width:300px; background-color:yellow; } /*2D 变换移动 转动 缩放 拉伸*/ /*旋转*/ .roateStyle{ width:100px; background-color:red; transform:rotate(45deg); -ms-transform:rotate(45deg); /* Internet Explorer */ -moz-transform:rotate(45deg); /* Firefox */ -webkit-transform:rotate(45deg); /* Safari 和 Chrome */ -o-transform:rotate(45deg); /* Opera */ } /*移动*/ .translateStyle{ width:100px; background-color:red; transform:translate(50px,100px); -ms-transform:translate(50px,100px); /* IE 9 */ -moz-transform:translate(50px,100px); /* Firefox */ -webkit-transform:translate(50px,100px); /* Safari and Chrome */ -o-transform:translate(50px,100px); /* Opera */ } /*缩放*/ .scaleStyle{ width:100px; background-color:red; transform:scale(2,4); -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Firefox */ -webkit-transform:scale(2,4);/* Safari and Chrome */ -o-transform:scale(2,4); /* Opera */ } /*翻转*/ .skewStyle{ width:400px; /*background-color:red;*/ border:2px solid black; -webkit-transform-style: preserve-3d;/*内部元素3D*/ -webkit-perspective:150;/*视图距离 透视效果*/ transform: skew(0deg,20deg); -ms-transform: skew(0deg,20deg); /* IE 9 */ -webkit-transform: skew(0deg,0deg); /* Safari and Chrome */ -o-transform: skew(0deg,20deg); /* Opera */ -moz-transform: skew(0deg,20deg); /* Firefox */ } /*3D变换*/ .skew3D{ width:100px; background-color:yellow; /**-webkit-transform-style: preserve-3d;**/ -webkit-transform: rotateY(130deg); } /*旋转动画*/ .roatAnimation{ width:100px; /*background-color:yellow;*/ animation:roatAnimationFrame 3s; animation-iteration-count:6;/*循环次数*/ animation-direction:normal;/*是否轮流反向播放 normal或alternate */ } @keyframes roatAnimationFrame{ from{-webkit-transform: rotateX(0deg)} to{-webkit-transform: rotateX(360deg)} } /*背景渐变*/ .sky{ width:100%; height:300px; /** 可以设置由上向下 或 左向右 或 指定一定的角度，还可以指定变化的曲线 * 指定角度后就不可以指定由哪儿到哪儿 **/ /*background:-webkit-linear-gradient(top, #0066FF 0%,#ffffee 60%,#ffffff 100%);*/ background: -webkit-linear-gradient(90deg, #ffffff, #0099FF); } /*滤镜 在线编辑器：http://www.cssfilters.co/#*/ .filter { position: relative; -webkit-filter: contrast(150%) saturate(110%); filter: contrast(150%) saturate(110%); } .filter::before { content: ""; display: block; height: 100%; width: 100%; top: 0; left: 0; position: absolute; pointer-events: none; mix-blend-mode: multiply; background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(0, 0, 0, 0) 70, rgba(34, 34, 34, 1)); background: radial-gradient(50% 50%, circle closest-corner, rgba(0, 0, 0, 0) 70, rgba(34, 34, 34, 1)); } /*实心圆 增加缩放,移动*/ .circle_block{ width: 200px; height: 200px; position:relative; background-color: red; color: white; text-align: center; border-radius: 100px; animation:scale1_5 5s infinite,moveRightFrame 3s infinite; animation-direction:alternate; } @keyframes scale1_5{ from{ width: 200px; height: 200px; border-radius: 100px;} to{ width: 100px; height: 100px; border-radius: 50px;} } /*六边形*/ .hexagon{ width: 100px; height: 55px; background: #fc5e5e; position: relative; margin: 10px auto; } .hexagon:before { content: ""; width: 0; height: 0; position: absolute; top: -25px; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #fc5e5e; } .hexagon:after { content: ""; width: 0; height: 0; position: absolute; bottom: -25px; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid #fc5e5e; } /*星星*/ .star { width: 0; height: 0; margin: 50px 0; color: #fc2e5a; position: relative; display: block; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } .star:before { height: 0; width: 0; position: absolute; display: block; top: -45px; left: -65px; border-bottom: 80px solid #fc2e5a; border-left: 30px solid transparent; border-right: 30px solid transparent; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } .star:after { content: ''; width: 0; height: 0; position: absolute; display: block; top: 3px; left: -105px; color: #fc2e5a; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); }
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="cssAnimation.css"/> </head> <body> <div class="skewStyle" style="height:200px;"> <div class="roatAnimation" style="height:50px;"> <font size=10>你好</font> </div> </div> <div class="sky"> <div class="circle_block"></div> <div class="hexagon"></div> </div> <div class="star"></div> <figure class="filter"> <img src="http://g.hiphotos.baidu.com/image/pic/item/03087bf40ad162d9ec74553b14dfa9ec8a13cd7a.jpg"> </figure> </body> </html>
总的来说，CSS可以制作简单的动画，此类动画实质是两种状态之间的缓慢切换！如：位置、颜色、角度等！