趁逢年味,整理一些小东西,希望大家能够喜欢;
列举以下7个小demo来抛砖引玉
1、多彩圆环利用 CSS3 的 background-image 和 border-radius 组合成的动画
直接上代码:
htmlCSS #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); }do something
demo 地址 http://wwlin.cn/cssAnima.html (包含以下所以demo)
2、sun-earth-moon有同事说这是鸡蛋饼......
利用CSS background-image、 box-shadow、 linear-gradient 等;
html3、snailCSS #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; }sun-earth-moon
我将这个动画发给女同事,然而被骂!!!
利用一张图片,两个盒子拼凑效果;
html4、 #item3 {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; }snail (one picture)
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
html5、flowercss #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; }border-radius
利用 css radial-gradient 等;
html6、3D 照片盒子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); } }radial-gradient
利用CSS preserve-3d、rotate等;
html7、文字多样效果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); }preserve-3d
利用: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; }text-shadow“离开就是离开,分手就是分手,错对没有意义,不再合适的两人,与其耗尽对方养分,不如坦然聚散,各自相安”
总结来说:CSS3的新特性并不多, 缺乏的是创意创新灵感,将他们组合起来运用。年尾了,祝大家开开心心回家过大年、工作顺顺利利、合家美满。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/107313.html
摘要:动画以低速开始,然后加快,在结束前变慢。在函数中自己的值。在所指定的一段时间内,在动画显示之前,应用开始属性值在第一个关键帧中定义。动画调用语法 animation: bounceIn 0.3s ease 0.2s 1 both; 按顺序解释参数: 动画名称 如:bounceIn 一周期所用时间 如:0.3s 速度曲线 如:ease 值 描述 linear 动画从头...
摘要:前缀浏览器兼容根据了解,属性大部分支持,部分支持,少部分支持前缀苹果谷歌火狐浏览器世界之窗例如兼容转换过渡关键帧动画转换及以上支持,需添加前缀属性的方法使用缩放轴缩放倍,轴缩放倍,只有一个值时为缩放倍数倾 css3前缀(浏览器兼容) 根据了解,css3属性大部分支持ie10,部分支持ie9,少部分支持ie8 // 前缀 // -webkit- Safari and Chrome(...
摘要:个人前端文章整理从最开始萌生写文章的想法,到着手开始写,再到现在已经一年的时间了,由于工作比较忙,更新缓慢,后面还是会继更新,现将已经写好的文章整理一个目录,方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理 从最开始萌生写文章的想法,到着手...
摘要:在正式前端一些小细节前端掘金英文原文,翻译未来的太让人兴奋了一方面,是全新的页面布局方式另一方面,是酷炫的滤镜颜色等视觉效果。老司机教你更好的进行编程个技巧前端掘金并不总是容易处理。 CSS3 实现文字流光渐变动画 - 前端 - 掘金来自百度前端技术学院的实践任务:有趣的鼠标悬浮模糊效果,参考:http://ife.baidu.com/course/d...,用CSS3实现了一下,顺便...
阅读 3141·2021-11-12 10:36
阅读 1204·2019-08-30 15:56
阅读 2402·2019-08-30 11:26
阅读 502·2019-08-29 13:00
阅读 3560·2019-08-28 18:08
阅读 2720·2019-08-26 17:18
阅读 1860·2019-08-26 13:26
阅读 2396·2019-08-26 11:39