龙都娱乐»HTML/CSS»css3动画整理

css3动画整理

来源:segmentfault 发布时间:2018-02-09 阅读次数:
  趁逢年味,整理一些小东西,希望大家能够喜欢;   列举以下7个小demo来抛砖引玉

 1、多彩圆环

  利用 CSS3 的 background-image 和 border-radius 组合成的动画   直接上代码:   html <div id="item1"> <div class="colorcircle shadow"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div class="centerWrap"></div> </div> <div id="colorCenter"> do something </div> </div>   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 <div id="item2"> <div class="title">sun-earth-moon</div> <div class="pathway"> <div class="earth"> <div class="moon"></div> </div> </div> <div class="sun"></div> </div>   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 <div id="item3"> <div class="title">snail (one picture)</div> <div class="snailOpction"> <div class="snail_box1 active fl"> <img class="snail_1" src="http://wwlin.cn/images/77.png" alt=""> </div> <div class="snail_box2 active fl"> <img class="snail_2" src="http://wwlin.cn/images/77.png" alt=""> </div> </div> </div>   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 <div id="item4"> <div class="title">border-radius</div> <div class="menuBtn"> <div class="menuBtn_2">*</div> <ul class="menuBtn_3"> <li></li> <li></li> <li></li> </ul> </div> <ul class="menu"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div>   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 <div id="item5"> <div class="title">radial-gradient</div> <ul> <li class="leaf1"></li> <li class="leaf2"></li> <li class="leaf3"></li> <li class="leaf4"></li> <li class="leaf5"></li> <li class="leaf6"></li> <li class="leaf7"></li> <li class="leaf8"></li> <li class="leaf9"></li> </ul> </div>   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 <div id="item6"> <div class="title">preserve-3d</div> <div class="d3box"> <div class="d3Img1"><img src="http://wwlin.cn/images/boxImg1.png" alt=""></div> <div class="d3Img2"><img src="http://wwlin.cn/images/boxImg2.png" alt=""></div> <div class="d3Img3"><img src="http://wwlin.cn/images/boxImg3.png" alt=""></div> <div class="d3Img4"><img src="http://wwlin.cn/images/boxImg4.png" alt=""></div> <div class="d3Img5"><img src="http://wwlin.cn/images/boxImg5.png" alt=""></div> <div class="d3Img6"><img src="http://wwlin.cn/images/boxImg6.png" alt=""></div> <div class="d3Img11"><img src="http://wwlin.cn/images/boxImg7.png" alt=""></div> <div class="d3Img12"><img src="http://wwlin.cn/images/boxImg8.png" alt=""></div> <div class="d3Img13"><img src="http://wwlin.cn/images/boxImg9.png" alt=""></div> <div class="d3Img14"><img src="http://wwlin.cn/images/boxImg10.png" alt=""></div> <div class="d3Img15"><img src="http://wwlin.cn/images/boxImg1.png" alt=""></div> <div class="d3Img16"><img src="http://wwlin.cn/images/boxImg2.png" alt=""></div> </div> </div>   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 <div id="item7"> <div class="title">text-shadow</div> <div class="content1">“离开就是离开,分手就是分手,</div> <div class="content2">错对没有意义,不再合适的两人,</div> <div class="content3">与其耗尽对方养分,不如坦然聚散,各自相安”</div> </div>   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的新特性并不多, 缺乏的是创意创新灵感,将他们组合起来运用。年尾了,祝大家开开心心回家过大年、工作顺顺利利、合家美满。
QQ群: WEB龙都娱乐官方总群(83010142) 加群密码:关注下方微信公众号,发送消息 mm 获取
提示:更多精彩内容关注微信公众号:全栈龙都娱乐中心(fsder-com)
css
网友评论(共0条评论) 正在载入评论......
理智评论文明上网,拒绝恶意谩骂 发表评论 / 共0条评论
登录会员中心
龙都娱乐