css3动画整理（css3动画实例教程）

趁逢年味，整理一些小东西，希望大家能够喜欢；

列举以下7个小demo来抛砖引玉

1、多彩圆环

利用 CSS3 的 background-image 和 border-radius 组合成的动画

直接上代码：

html

CSS

#item1 {

margin: 2em;

height: 240px;

position: relative;

overflow: hidden;

}

.colorcircle {

width: 240px;

height: 240px;

margin: auto;

position: relative;

overflow: hidden;

animation: colorcircleAni 3s linear infinite;

}

@keyframes colorcircleAni {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

}

.colorcircle > div.centerWrap {

width: 100%;

height: 100%;

border-radius: 120px;

box-shadow: 0 0 0 50px #fff;

box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4), 0 0 0 50px #fff;

}

.colorcircle > div.centerWrap:before {

content: "";

position: absolute;

display: block;

width: 84%;

height: 84%;

top: 8%;

left: 8%;

border-radius: 120px;

background: #fff;

box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);

}

.colorcircle > div {

position: absolute;

width: 50%;

height: 50%;

}

.colorcircle > div:first-child,

.colorcircle > div:nth-child(4) {

left: 50%;

width: 57.74%;

margin-left: -28.87%;

}

.colorcircle > div:first-child {

background-color: #ff0000;

background-image: linear-gradient(90deg, #ff0000 12%, #ffff00 88%);

}

.colorcircle > div:nth-child(2) {

left: 50%;

transform-origin: bottom;

transform: skewX(150deg);

background-color: #ffff00;

background-image: linear-gradient(150deg, #ffff00 12%, #00ff00 88%);

}

.colorcircle > div:nth-child(3) {

transform-origin: bottom;

transform: skewX(30deg);

background-color: #ff00ff;

background-image: linear-gradient(30deg, #ff00ff 12%, #ff0000 88%);

}

.colorcircle > div:nth-child(4) {

top: 50%;

background-color: #0000ff;

background-image: linear-gradient(90deg, #0000ff 12%, #00ffff 88%);

}

.colorcircle > div:nth-child(5) {

left: 50%;

top: 50%;

transform-origin: top;

transform: skewX(30deg);

background-color: #00ffff;

background-image: linear-gradient(30deg, #00ffff 12%, #00ff00 88%);

}

.colorcircle > div:nth-child(6) {

top: 50%;

transform-origin: top;

transform: skewX(150deg);

background-color: #ff00ff;

background-image: linear-gradient(150deg, #ff00ff 12%, #0000ff 88%);

}

#colorCenter {

color: #888888;

letter-spacing: 2px;

font-size: 90%;

line-height: 1.8em;

text-align: center;

position: absolute;

left: 50%;

top: 50%;

transform: translate3d(-50%,-50%,0);

}

demo 地址 http://wwlin.cn/cssAnima.html (包含以下所以demo)

2、sun-earth-moon

有同事说这是鸡蛋饼......

利用CSS background-image、 box-shadow、 linear-gradient 等；

html

CSS

#item2 {

width: 270px;

height: 240px;

margin: 100px auto 200px;

position: relative;

}

#item2 .title {

height: 120px;

color: #888888;

letter-spacing: 2px;

text-align: center;

line-height: 80px;

}

#item2 .pathway {

width: 270px;

height: 240px;

border-radius: 50%;

border: 1px solid rgba(0, 0, 0, 0.3);

animation: pathwayAni 10s linear infinite;

}

@keyframes pathwayAni {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

}

@keyframes pathwayAni2 {

0% {

perspective:800;

transform: translate3d(-50% ,-50%,0) rotate( 0deg);

}

100% {

perspective:800;

transform: translate3d(-50% ,-50%,0) rotate(360deg);

}

}

#item2 .pathway .earth{

content: "";

width: 40px;

height: 40px;

background-image: linear-gradient(150deg, #00ff00 12%, #0000ff 88%);

border-radius: 50%;

position: absolute;

top: 100px;

left: -20px;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);

animation: pathwayAni 10s linear infinite;

}

#item2 .pathway .earth .moon {

width: 15px;

height: 15px;

background-image: linear-gradient(150deg, #0000ff 12%,#ffd900 88%);

border-radius: 50%;

position: absolute;

box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);

top: 13px;

left: -25px;

animation: pathwayAni 10s linear infinite;

}

#item2 .sun {

width: 80px;

height: 80px;

background-image: linear-gradient(90deg, #ff0000 12%, #ffff00 88%);

box-shadow: 0 0 20px rgba(245, 84, 84 , 0.7);

border-radius: 50%;

position: absolute;

top: 50%;

left: 50%;

margin-top: 120px;

animation: pathwayAni2 30s linear infinite;

}

3、snail

我将这个动画发给女同事，然而被骂！！！

利用一张图片，两个盒子拼凑效果；

html

CSS

#item3 {

height: 300px;

width: 240px;

position: relative;

margin: 0 auto;

}

#item3 .title {

height: 120px;

color: #888888;

letter-spacing: 2px;

text-align: center;

line-height: 80px;

}

.snailOpction {

position: absolute;

left: 0;

top: 100px;

z-index: 19;

animation: snailOpction 150s linear infinite;

-webkit-animation: snailOpction 150s linear infinite;

}

@keyframes snailOpction {

0% {

transform: translateX(-50%);

}

100% {

transform: translateX(340px);

}

}

@-webkit-keyframes snailOpction {

0% {

-webkit-transform: translateX(-50%);

}

100% {

-webkit-transform: translateX(340px);

}

}

.snail_box1 {

width: 65px;

height: 64px;

overflow: hidden;

position: relative;

z-index: 22;

}

.snail_box2 {

width: 55px;

height: 64px;

overflow: hidden;

position: relative;

z-index: 19;

}

.snail_box1.active {

animation: snail_box1 3S linear infinite;

-webkit-animation: snail_box1 3S linear infinite;

}

@keyframes snail_box1 {

0% {

transform: translate3d(0,0,0);

}

50% {

transform: translate3d(3px,-5px,0);

}

100% {

transform: translate3d(0,0,0);

}

}

@-webkit-keyframes snail_box1 {

0% {

-webkit-transform: translate3d(0,0,0);

}

50% {

-webkit-transform: translate3d(3px,-5px,0);

}

100% {

-webkit-transform: translate3d(0,0,0);

}

}

.snail_box2.active {

animation: snail_box2 3S linear infinite;

-webkit-animation: snail_box2 3S linear infinite;

}

@keyframes snail_box2 {

0% {

transform: translate3d(0,0,0);

}

50% {

transform: translate3d(-5px,-3px,0);

}

100% {

transform: translate3d(0,0,0);

}

}

@-webkit-keyframes snail_box2 {

0% {

-webkit-transform: translate3d(0,0,0);

}

50% {

-webkit-transform: translate3d(-5px,-3px,0);

}

100% {

-webkit-transform: translate3d(0,0,0);

}

}

.snail_1 {

width: 120px;

height: 64px;

position: absolute;

left: 0;

top: 0;

}

.snail_2 {

width: 120px;

height: 64px;

position: absolute;

right: 0;

top: 0;

}

.fl {

float: left;

}

.fr {

float: right;

}

4、border-radius

利用 CSS 的 border-radius

html

CSS

#item4 {

height: 300px;

width: 64px;

margin: 0 auto 100px;

}

#item4 .title {

width: 150px;

height: 120px;

color: #888888;

letter-spacing: 2px;

text-align: center;

line-height: 80px;

transform: translate(-50%);

}

#item4 .menuBtn {

width: 60px;

height: 60px;

border: 2px solid #333333;

border-radius: 50%;

position: relative;

cursor: pointer;

}

#item4 .menuBtn .menuBtn_2 {

width: 16px;

height: 16px;

color: #333333;

font-size: 18px;

text-align: center;

line-height: 16px;

border-left: 2px solid #333333;

border-right: 2px solid #333333;

position: absolute;

top: 50%;

left: 50%;

transform: translate3d(-50%,-50%,0);

}

#item4 .menuBtn .menuBtn_2::before {

content: "";

width: 16px;

height: 8px;

position: absolute;

top: -8px;

left: -2px;

border-top: 2px solid #333333;

border-left: 2px solid #333333;

border-right: 2px solid #333333;

border-radius:8px 8px 0 0;

}

#item4 .menuBtn .menuBtn_2::after {

content: "";

width: 16px;

height: 8px;

position: absolute;

top: 16px;

left: -2px;

border-bottom: 2px solid #333333;

border-left: 2px solid #333333;

border-right: 2px solid #333333;

border-radius:0 0 8px 8px;

}

.menuBtn_3 {

width: 60px;

height: 40px;

position: absolute;

top: 60px;

padding-top: 10px;

animation: topToBottom 2s linear infinite;

}

.menuBtn_3 li {

width: 4px;

height: 4px;

border: 1px solid #333333;

border-radius: 50%;

margin-bottom: 20px;

transform: translateX(26px);

opacity: 0;

}

.menuBtn_3 li:nth-child(1) {

animation: menuBtn_3Li 2s linear infinite;

-webkit-animation: menuBtn_3Li 2s linear infinite;

}

.menuBtn_3 li:nth-child(2) {

animation: menuBtn_3Li 2s linear 0.5s infinite;

-webkit-animation: menuBtn_3Li 2s linear 0.5s infinite;

}

.menuBtn_3 li:nth-child(3) {

animation: menuBtn_3Li 2s linear 1s infinite;

-webkit-animation: menuBtn_3Li 2s linear 1s infinite;

}

@keyframes menuBtn_3Li {

0% {

transform: translateX(26px) scale(1);

box-shadow: 0 0 0 #333333;

opacity: 0;

}

50% {

transform: translateX(26px) scale(1.3);

box-shadow: 0 0 3px #333333;

opacity: 1;

}

100% {

transform:translateX(26px) scale(1.6);

box-shadow: 0 0 5px #333333;

opacity: 0;

}

}

@-webkit-keyframes menuBtn_3Li {

0% {

-webkit-transform: translateX(26px) scale(1);

-webkit-box-shadow: 0 0 0 #333333;

opacity: 0;

}

50% {

-webkit-transform: translateX(26px) scale(1.3);

-webkit-box-shadow: 0 0 3px #333333;

opacity: 1;

}

100% {

-webkit-transform:translateX(26px) scale(1.6);

-webkit-box-shadow: 0 0 5px #333333;

opacity: 0;

}

}

@keyframes topToBottom{

0% {

transform: translateY(0) scale(1);

}

100%{

transform: translateY(80%) scale(1.2);

}

}

@-webkit-keyframes topToBottom{

0% {

-webkit-transform: translateY(0) scale(1);

}

100%{

-webkit-transform: translateY(80%) scale(1.2);

}

}

#item4 .menu {

color: #333333;

font-size: 16px;

line-height: 30px;

position: absolute;

top: 90px;

z-index: 29;

display: none;

}

5、flower

利用 css radial-gradient 等;

html

CSS

#item5 {

width: 400px;

height: 600px;

margin: 0 auto 100px;

position: relative;

}

#item5 .leaf1,

#item5 .leaf2,

#item5 .leaf3,

#item5 .leaf4,

#item5 .leaf5,

#item5 .leaf6,

#item5 .leaf7,

#item5 .leaf8,

#item5 .leaf9 {

width: 50px;

height: 100px;

border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;

position: absolute;

top: 50px;

left: 170px;

transform-origin: 50% 145%;

-webkit-transform-origin: 50% 145%;

}

#item5 .title {

color: #888888;

letter-spacing: 2px;

text-align: center;

line-height: 40px;

}

#item5 .leaf1 {

background-image:radial-gradient( rgba(66, 230, 139, 1),rgba(124, 187, 152, 0.6));

border: 1px solid rgba(116, 233, 167, 0.8);

animation: leafAni 2.25s linear 2s infinite;

-webkit-animation: leafAni 2.25s linear 2s infinite;

}

#item5 .leaf2 {

background-image:radial-gradient( rgba(63, 187, 179, 1),rgba(83, 156, 151, 0.6));

border: 1px solid rgba(90, 194, 187, 0.8);

animation: leafAni 2.25s linear 1.75s infinite;

-webkit-animation: leafAni 2.25s linear 1.75s infinite;

}

#item5 .leaf3 {

background-image:radial-gradient( rgba(60, 213, 49,1),rgba(60, 213, 49, 0.6));

border: 1px solid rgba(60, 213, 49,0.8);

animation: leafAni 2.25s linear 1.5s infinite;

-webkit-animation: leafAni 2.25s linear 1.5s infinite;

}

#item5 .leaf4 {

background-image:radial-gradient( rgba(191,181,29,1),rgba(191,181,29, 0.6));

border: 1px solid rgba(191,181,29,0.8);

animation: leafAni 2.25s linear 1.25s infinite;

-webkit-animation: leafAni 2.25s linear 1.25s infinite;

}

#item5 .leaf5 {

background-image:radial-gradient( rgba(196,125,20,1),rgba(196,125,20, 0.6));

border: 1px solid rgba(196,125,20,0.8);

animation: leafAni 2.25s linear 1s infinite;

-webkit-animation: leafAni 2.25s linear 1s infinite;

}

#item5 .leaf6 {

background-image:radial-gradient( rgba(231,98,40,1),rgba(231,98,40, 0.8));

border: 1px solid rgba(231,98,40,0.8);

animation: leafAni 2.25s linear 0.75s infinite;

-webkit-animation: leafAni 2.25s linear 0.75s infinite;

}

#item5 .leaf7 {

background-image:radial-gradient( rgba(249,11,55,1),rgba(249,11,55, 0.8));

border: 1px solid rgba(249,11,55,0.8);

animation: leafAni 2.25s linear 0.5s infinite;

-webkit-animation: leafAni 2.25s linear 0.5s infinite;

}

#item5 .leaf8 {

background-image:radial-gradient( rgba(241,0,145,1),rgba(241,0,145,0.6));

border: 1px solid rgba(241,0,145,0.8);

animation: leafAni 2.25s linear 0.25s infinite;

-webkit-animation: leafAni 2.25s linear 0.25s infinite;

}

#item5 .leaf9 {

background-image:radial-gradient( rgba(151,11,84,1),rgba(151,11,84,0.6));

border: 1px solid rgba(151,11,84,0.8);

animation: leafAni 2.25s linear infinite;

-webkit-animation: leafAni 2.25s linear infinite;

}

@keyframes leafAni {

0% {

transform: rotate(0) scale(1);

}

25% {

transform:rotate(-90deg) scale(1.1);

}

50% {

transform: rotate(-180deg) scale(1.2);

}

75% {

transform: rotate(-270deg) scale(1.1);

}

100% {

transform: rotate(-360deg) scale(1);

}

}

@-webkit-keyframes leafAni {

0% {

-webkit-transform: rotate(0) scale(1);

}

25% {

-webkit-transform:rotate(-90deg) scale(1.1);

}

50% {

-webkit-transform: rotate(-180deg) scale(1.2);

}

75% {

-webkit-transform: rotate(-270deg) scale(1.1);

}

100% {

-webkit-transform: rotate(-360deg) scale(1);

}

}

6、3D 照片盒子

利用CSS preserve-3d、rotate等；

html

preserve-3d

CSS

#item6 {

margin: 100px auto;

}

#item6 .title {

color: #888888;

letter-spacing: 2px;

text-align: center;

line-height: 40px;

}

#item6 .d3box{

width: 600px;

height: 600px;

margin: 0 auto;

position: relative;

transform-style: preserve-3d;

animation: d3boxAni 20s linear infinite;

-webkit-animation: d3boxAni 20s linear infinite;

}

@keyframes d3boxAni{

0% {

transform: rotateX(0deg) rotateY(0deg);

}

100% {

transform: rotateX(360deg) rotateY(360deg);

}

}

@-webkit-keyframes d3boxAni{

0% {

-webkit-transform: rotateX(0deg) rotateY(0deg);

}

100% {

-webkit-transform: rotateX(360deg) rotateY(360deg);

}

}

#item6 .d3box .d3Img1,

#item6 .d3box .d3Img2,

#item6 .d3box .d3Img3,

#item6 .d3box .d3Img4,

#item6 .d3box .d3Img5,

#item6 .d3box .d3Img6{

position: absolute;

width: 200px;

height: 200px;

transition: all .4s;

opacity: 0.7;

}

#item6 .d3box .d3Img11,

#item6 .d3box .d3Img12,

#item6 .d3box .d3Img13,

#item6 .d3box .d3Img14,

#item6 .d3box .d3Img15,

#item6 .d3box .d3Img16{

display: bloack;

width: 100px;

height: 100px;

position: absolute;

top: 50px;

left: 50px;

}

#item6 .d3box img {

width: 100%;

height: 100%;

}

#item6 .d3box .d3Img1 {

transform: rotateY(0deg) translateZ(100px);

}

#item6 .d3box .d3Img2 {

transform: translateZ(-100px) rotateY(180deg);

}

#item6 .d3box .d3Img3 {

transform: rotateY(90deg) translateZ(100px);

}

#item6 .d3box .d3Img4 {

transform: rotateY(-90deg) translateZ(100px);

}

#item6 .d3box .d3Img5 {

transform: rotateX(90deg) translateZ(100px);

}

#item6 .d3box .d3Img6 {

transform: rotateX(-90deg) translateZ(100px);

}

#item6 .d3box:hover .d3Img1 {

transform: rotateY(0deg) translateZ(200px);

}

#item6 .d3box:hover .d3Img2 {

transform: translateZ(-200px) rotateY(180deg);

}

#item6 .d3box:hover .d3Img3 {

transform: rotateY(90deg) translateZ(200px);

}

#item6 .d3box:hover .d3Img4 {

transform: rotateY(-90deg) translateZ(200px);

}

#item6 .d3box:hover .d3Img5 {

transform: rotateX(90deg) translateZ(200px);

}

#item6 .d3box:hover .d3Img6 {

transform: rotateX(-90deg) translateZ(200px);

}

#item6 .d3box .d3Img11 {

transform: rotateY(0deg) translateZ(50px);

}

#item6 .d3box .d3Img12 {

transform: translateZ(-50px) rotateY(180deg);

}

#item6 .d3box .d3Img13 {

transform: rotateY(90deg) translateZ(50px);

}

#item6 .d3box .d3Img14 {

transform: rotateY(-90deg) translateZ(50px);

}

#item6 .d3box .d3Img15 {

transform: rotateX(90deg) translateZ(50px);

}

#item6 .d3box .d3Img16 {

transform: rotateX(-90deg) translateZ(50px);

}

7、文字多样效果

利用：CSS text-shadow

html

CSS

#item7 {

width: 400px;

color: #fff;

letter-spacing: 2px;

text-align: center;

line-height: 60px;

font-weight: 700px;

margin: 100px auto 200px;

}

#item7 .title{

color: #888888;

font-size: 26px;

}

#item7 .content1 {

background-color: rgba(0,0,0,0.3);

text-shadow: 0 0 2px #333333;

}

#item7 .content2 {

color: #fff;

background-color: #ED1C24;

font-size: 24px;

text-shadow: 0 0 2px #fff , 0 0 4px #fff;

}

#item7 .content3 {

background-color: #009A61;

text-shadow: 0 1px rgba(255, 0, 255, 0.9),

0 2px rgba(255, 0, 255, 0.8),

0 3px rgba(255, 0, 255, 0.7),

0 4px rgba(255, 0, 255, 0.6),

0 5px rgba(255, 0, 255, 0.5),

0 5px 10px black;

}

总结来说：CSS3的新特性并不多， 缺乏的是创意创新灵感，将他们组合起来运用。年尾了，祝大家开开心心回家过大年、工作顺顺利利、合家美满。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。