Web前端之家-无忧前端交流，专注Web前端开发，了解最新前端开发动态

如何使用 CSS3 盒子阴影复制元素？

2022年10月28日

CSS3盒子阴影复制元素？其实这个问题不难，只要你掌握了CSS3的阴影功能，还是比较得心应手的，我们一起先看个DEMO。<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>CSS3 Box-Shadow Elements</title> <style> * { padding: 0; margin: 0; } body { font-family: sans-serif; color: #222; background-color: #ddd; margin: 10px; } #element { width: 100px; height: 100px; padding: 0; margin: 100px auto; background-color: #ddd; border-radius: 50px; -webkit-animation: rotate 3s linear infinite; -moz-animation: rotate 3s linear infinite; -ms-animation: rotate 3s linear infinite; -o-animation: rotate 3s linear infinite; animation: rotate 3s linear infinite; } /* animation */ @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes rotate { 100% { -moz-transform: rotate(360deg); } } @-ms-keyframes rotate { 100% { -ms-transform: rotate(360deg); } } @-o-keyframes rotate { 100% { -o-transform: rotate(360deg); } } @keyframes rotate { 100% { transform: rotate(360deg); } } p { margin: 1em 0; } pre { padding: 3px 5px; color: #fff; background-color: #333; border: 2px inset #999; } </style> </head> <body> <h1>CSS3 Box-Shadow Elements</h1> <div id="element"></div> <script> var e = document.getElementById("element"), r = -6, bs = ""; for (var p = Math.PI; p > 0; p = p - 0.2) { bs += "," + px(Math.cos(p)*100) + px(Math.sin(p)*100) + px(0) + px(r) + "rgba("+(255+r*5)+",0,0,"+(p/Math.PI)+")"; bs += "," + px(Math.cos(Math.PI+p)*100) + px(Math.sin(Math.PI+p)*100) + px(0) + px(r--) + "rgba(0,0,"+(255+r*5)+","+(p/Math.PI)+")"; r = r - 2; } e.style.boxShadow = bs.substr(1); function px(num) { return Math.round(num)+"px "; } </script> </body> </html>圆圈是使用DOM元素而不是画布、SVG、Flash或其他替代方法创建的。问题：不看源码，需要多少个DOM元素？如果您阅读本文的标题，答案应该很明显。只使用一个元素；在这种情况下，它是一个DIVID为“元素”的单个。它实际上是一个看不见的圆圈，因为它的颜色与背景相匹配。其他圆圈是在CSS中使用该属性的一个鲜为人知的特性定义的box-shadow。它允许您在任何位置、任何大小、任何颜色中多次复制任何元素的形状。该属性有六个参数：inset：（可选）如果定义，阴影将出现在元素内部水平：与元素的x距离垂直：与元素的y距离blur：（可选）模糊半径，即0表示不模糊spread：（可选）阴影传播的距离，即1px向所有方向扩展阴影1个像素，因此它比父元素宽和高2pxcolor :阴影颜色我们可以使用水平和垂直距离进行相对定位。散布可以是正数或负数，以使阴影大于或小于父元素。由于可以定义多个阴影，我们可以多次复制原始形状，例如：#element{width: 100px;height: 100px;background-color: #ccc;border-radius: 50px;box-shadow: 120px 0px 0 15px #f00,-60px 104px 0 0px #0f0,-60px -104px 0 -15px #00f;}效果：请记住，您的形状也可以有:before和:after伪元素，它们有自己的盒子阴影。下一个问题：这有用吗？这更难回答，但在开发具有重复形状的页面时，这是一个需要考虑的选项。它当然可以帮助减少页面重量。显然，可以将该技术发挥到极致，并使用箱形阴影创建整个可缩放图形，举两个例子。DEMO1：像素忍者。<!DOCTYPE html><html><head><title>阴影演示</title><meta charset="utf-8"><script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script><style> @import url(https://fonts.googleapis.com/css?family=Sarina);/* Choose your size *//* SASS function - centering */html { height: 100%;}body { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjAiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5OTk5OTkiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=') no-repeat; background: -moz-radial-gradient(center 0, circle cover, #ffffff, #999999) no-repeat; background: -webkit-radial-gradient(center 0, circle cover, #ffffff, #999999) no-repeat; background: radial-gradient(circle cover at center 0, #ffffff, #999999) no-repeat; background-color: #ddd; height: 100%;}.ninja { width: 153px; height: 207px; margin: 20px auto; position: relative; font-size: 9px;}.ninja:after { content: "Code Ninjas"; color: black; font-family: 'Sarina', cursive; text-align: center; position: absolute; font-size: 7em; left: 50%; bottom: -1.5em; width: 8em; margin-left: -4em;}.ninja:before { content: ""; position: absolute; top: 0; left: 0; width: 1em; height: 1em; box-shadow: 2em 0, 1em 1em, 2em 1em, 1em 2em, 2em 2em, 1em 3em, 2em 3em, 6em 3em, 7em 3em, 8em 3em, 9em 3em, 10em 3em, 11em 3em, 12em 3em, 1em 4em, 2em 4em, 5em 4em, 6em 4em #555, 7em 4em #555, 8em 4em #555, 9em 4em #555, 10em 4em #555, 11em 4em #555, 12em 4em #555, 13em 4em, 15em 4em, 16em 4em, 1em 5em, 2em 5em, 5em 5em, 6em 5em #555, 7em 5em, 8em 5em, 9em 5em, 10em 5em, 11em 5em, 12em 5em, 13em 5em, 14em 5em, 1em 6em, 2em 6em, 5em 6em, 6em 6em #555, 7em 6em #e9c190, 8em 6em, 9em 6em #e9c190, 10em 6em, 11em 6em #e9c190, 12em 6em, 13em 6em, 14em 6em, 15em 6em, 16em 6em, 1em 7em, 2em 7em, 5em 7em, 6em 7em #555, 7em 7em #e9c190, 8em 7em #ffe3bd, 9em 7em #e9c190, 10em 7em #ffe3bd, 11em 7em #ffe3bd, 12em 7em, 13em 7em, 1em 8em, 2em 8em, 5em 8em, 6em 8em #555, 7em 8em, 8em 8em, 9em 8em, 10em 8em, 11em 8em, 12em 8em, 13em 8em, 15em 8em, 1em 9em, 2em 9em, 6em 9em, 7em 9em #555, 8em 9em #555, 9em 9em #555, 10em 9em, 11em 9em, 12em 9em, 14em 9em, 15em 9em #555, 16em 9em, 0 10em, 1em 10em, 2em 10em, 3em 10em, 4em 10em, 5em 10em, 6em 10em #555, 7em 10em #555, 8em 10em #555, 9em 10em, 10em 10em, 11em 10em, 12em 10em, 13em 10em, 14em 10em #555, 15em 10em #555, 16em 10em, 0 11em, 1em 11em #555, 2em 11em, 3em 11em #555, 4em 11em #555, 5em 11em #555, 6em 11em #555, 7em 11em, 8em 11em, 9em 11em, 10em 11em, 11em 11em, 12em 11em #555, 13em 11em #555, 14em 11em, 15em 11em, 16em 11em, 0 12em, 1em 12em #555, 2em 12em, 3em 12em, 4em 12em, 5em 12em, 6em 12em, 7em 12em, 8em 12em, 9em 12em, 10em 12em, 11em 12em, 12em 12em, 13em 12em, 14em 12em, 15em 12em, 16em 12em, 1em 13em, 2em 13em, 3em 13em, 4em 13em, 5em 13em, 6em 13em, 7em 13em, 8em 13em, 9em 13em, 10em 13em, 11em 13em, 12em 13em, 13em 13em, 14em 13em, 15em 13em, 6em 14em #555, 7em 14em #555, 8em 14em, 9em 14em, 10em 14em, 11em 14em, 12em 14em, 6em 15em #fa0117, 7em 15em #a80002, 8em 15em #a80002, 9em 15em #a80002, 10em 15em, 11em 15em #fa0117, 12em 15em, 4em 16em, 5em 16em, 6em 16em #555, 7em 16em, 8em 16em, 9em 16em, 10em 16em, 11em 16em, 12em 16em #a80002, 13em 16em, 3em 17em, 4em 17em #555, 5em 17em, 6em 17em, 7em 17em, 8em 17em, 9em 17em, 10em 17em, 11em 17em, 12em 17em, 13em 17em #a80002, 14em 17em, 3em 18em, 4em 18em #555, 5em 18em, 6em 18em, 7em 18em, 8em 18em, 9em 18em, 10em 18em, 11em 18em, 12em 18em, 13em 18em, 2em 19em, 3em 19em #555, 4em 19em #555, 5em 19em, 10em 19em, 11em 19em, 12em 19em, 1em 20em, 2em 20em, 3em 20em, 4em 20em #555, 5em 20em, 10em 20em, 11em 20em #555, 12em 20em #555, 13em 20em, 1em 21em, 2em 21em, 3em 21em, 4em 21em, 5em 21em, 10em 21em, 11em 21em #555, 12em 21em, 13em 21em, 14em 21em, 10em 22em, 11em 22em, 12em 22em, 13em 22em, 14em 22em;}</style></head><body> <div class="ninja"></div></body></html>DEMO2：蒙娜丽莎。可以点击链接去预览：DEMO预览但是，鉴于PNG或SVG可能更高效且更易于创建，因此这是毫无意义的。但是，如果您将重复框阴影技术用于任何有趣的事情，请告诉我……...

CSS3 2D转换：分享常用的5种【translate()、rotate()、scale()、skew()、matrix()】实现方式

2021年12月24日

在平时的项目中，经常会对元素进行CSS2D转换，从而达到预期的效果。举一个很简单的例子：一个向右的箭头，我们在项目中很多地方会用到，并且箭头的方向或者大小可能不同，如果每个箭头都去弄一个图或者写一套样式，就很麻烦了。用上了2D转换后，就方便很多了，一套样式，只要进行相应的转换就轻松实现了。接下来让我们一起来学习下常用的5种【translate()、rotate()、scale()、skew()、matrix()】2D转换实现方式吧！translate()translate()函数用来根据指定的参数将元素沿水平（X轴）或垂直（Y轴）方向移动，函数的语法格式如下：translate(tx,ty)其中tx对应元素在水平（X轴）方向的移动距离，ty对应元素在垂直（Y轴）方向的移动距离，参数ty可以忽略（默认为0），两个参数均可以为负值。【示例】使用translate()函数来移动指定的元素：<!DOCTYPE html><html><head><title>translate() | Web前端之家www.jiangweishan.com</title> <style> div { width: 100px; height: 100px; background-color: #CCC; transform: translate(100px, 10px); } </style></head><body> <div></div></body></html>大家预览看下效果。如果只是将元素水平移动或者只是将元素垂直移动，也可以使用translateX()（将元素水平移动）或translateY()（将元素垂直移动），translateX()和translateY()函数均只需要提供一个参数即可，例如：translateX(100px); /* 等同于 translate(100px, 0px); */translateY(10px); /* 等同于 translate(0px, 10px); */rotate()rotate()函数用来按照给定的角度来旋转元素，函数的语法格式如下：rotate(a)其中参数a表示元素要旋转的角度，若a为正值则表示顺时针旋转，若a为负值则表示逆时针旋转。【示例】使用rotate()函数来旋转元素：<!DOCTYPE html><html><head><title>rotate() | Web前端之家www.jiangweishan.com</title> <style> div { width: 100px; height: 100px; background-color: #CCC; margin: 20px 0px 0px 20px; transform: rotate(45deg); } </style></head><body> <div></div></body></html>scale()scale()函数用来缩放（放大或缩小）指定的元素，函数的语法格式如下：scale(sx,sy)其中sx表示水平方向的缩放比例，sy表示垂直方向的缩放比例。另外，参数sy可以省略，它的默认值等于sx。【示例】使用scale()函数缩放指定元素：<!DOCTYPE html><html><head><title>scale() | Web前端之家www.jiangweishan.com</title> <style> div { width: 100px; height: 100px; background-color: #CCC; transform: scale(0.7); } </style></head><body> <div></div></body></html>提示：当scale()中，给定的参数值在-1~1范围之外时，元素将被放大；当在参数值在-1~1范围之内时，元素将被缩小。与translate()函数类似，如果是仅在水平方向或者仅在垂直方向上缩放元素大小，也可以使用scaleX()（在水平方向缩放元素）和scaleY()（在垂直方向缩放元素）函数。scaleX()和scaleY()函数仅需要提供一个参数即可，例如：scaleX(0.5); /* 等同于 scale(0.5, 1); */scaleY(0.5); /* 等同于 scale(1, 0.5); */skew()skew()函数用来将元素沿水平方向（X轴）和垂直方向（Y轴）倾斜扭曲，函数的语法格式如下：skew(ax,ay)其中，参数ax表示元素水平方向的扭曲角度，参数ay表示元素垂直方向的扭曲角度。另外，参数ay可以省略，若省略参数ay，则其默认值为0。【示例】使用skew()函数来扭曲指定元素：<!DOCTYPE html><html><title>skew() | Web前端之家www.jiangweishan.com</title><head> <style> div { width: 100px; height: 100px; background-color: #CCC; margin: 20px 0px 0px 10px; transform: skew(-15deg, 20deg); } </style></head><body> <div></div></body></html>另外，如果是仅在水平方向或者仅在垂直方向上对元素进行扭曲，也可以使用skewX()（在水平方向缩放元素）和skewY()（在垂直方向缩放元素）函数来完成。skewX()和skewY()函数仅需要提供一个参数即可，例如：skewX(15deg); /* 等同于 skew(15deg, 0deg); */skewY(15deg); /* 等同于 skew(0deg, 15deg); */matrix()matrix()函数可以看作是skew()、scale()、rotate()和translate()几个函数的缩写形式，通过matrix()函数可以同时定义所有2D转换操作，函数的语法格式如下：matrix(a,b,c,d,tx,ty)matrix()函数中的6个参数分别对应scaleX()、skewY()、skewX()、scaleY()、translateX()、translateY()几个函数，您可以使用matrix()来实现各种2D转换操作，例如：translate(tx,ty)=matrix(1,0,0,1,tx,ty);：其中tx和ty是水平和垂直平移值；rotate(a)=matrix(cos(a),sin(a),-sin(a),cos(a),0,0);：其中，a是度数的值。您可以交换sin(a)和-sin(a)值来进行反向旋转；scale(sx,sy)=matrix(sx,0,0,sy,0,0);：其中sx和sy是水平和垂直缩放比例值；skew(ax,ay)=matrix(1,tan(ay),tan(ay),1,0,0);：其中ax和ay是以deg为单位的水平和垂直值。【示例】使用matrix()函数对元素进行2D转换操作：<!DOCTYPE html><html><head><title>matrix() | Web前端之家www.jiangweishan.com</title> <style> div { width: 100px; height: 100px; background-color: #CCC; margin: 20px 0px 0px 10px; float: left; } .one { transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0); } .two { margin-left: 35px; transform: matrix(0.586, 0.8, -0.8, 0.686, 0, 0); } .three { margin-left: 40px; margin-top: 25px; transform: matrix(0.586, 0.8, -0.8, 0.866, 0, 0); } .four { transform: matrix(0.586, 0.8, -0.8, 0.586, 40, 30); } </style></head><body> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div></body></html>总结如果大家，还有更好的方法，也可以留言分享。...

CSS3动画应用：分享一个用纯CSS打造的文本打字特效

2021年10月20日

CSS3动画去控制，实现跟我们敲代码那样的酷炫效果，废话不多说，走起吧。打字机效果的工作方式：打字机动画将通过使用CSS steps()函数逐步将宽度从0更改为100%来显示我们的文本元素。闪烁动画将使“打出”文本的光标动起来。首先我们构建下页面基本框架：<h1>Web前端之家</h1><div class="container"> <div class="typed-out">欢迎来到Web前端之家https://www.jiangweishan.com</div></div>我们先构造一个很简单的HTML。CSS呢，如下操作：body{ background: navajowhite; background-size: cover; font-family: 'Trebuchet MS', sans-serif;}.container{ display: inline-block;}.typed-out{ overflow: hidden; border-right: .30em solid orange; border-radius: 4px; white-space: nowrap; animation: typing 1s steps(20, end) forwards, blinking 1.2s infinite; font-size: 1.6rem; width: 0;}@keyframes typing { from { width: 0 } to { width: 100% }}@keyframes blinking { from { border-color: transparent } to { border-color: green; }}核心的代码是在typing动画属性，通过steps()函数去执行效果。最后打印出来效果如下图所示：我们来看下完整的DEMO效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML&CSS：分享一个用纯CSS打造的文本打字特效 - Web前端之家https://www.jiangweishan.com</title> <style>body{ background: navajowhite; background-size: cover; font-family: 'Trebuchet MS', sans-serif;}.container{ display: inline-block;}.typed-out{ overflow: hidden; border-right: .30em solid orange; border-radius: 4px; white-space: nowrap; animation: typing 1s steps(20, end) forwards, blinking 1.2s infinite; font-size: 1.6rem; width: 0;}@keyframes typing { from { width: 0 } to { width: 100% }}@keyframes blinking { from { border-color: transparent } to { border-color: green; }} </style></head><body> <h1>Web前端之家</h1> <div class="container"> <div class="typed-out">欢迎来到Web前端之家https://www.jiangweishan.com</div> </div></body></html>拓展有的同学预览了上面的效果，发现这里只有一行效果，如果我们有几行或者更多行，应该咋办呢？其实原理都差不多，只要使用CSS3动画的animation-delay属性，去延时动画出现的时间即可。来看下DEMO：HTML：<h1>Web前端之家https://www.jiangweishan.com</h1><div class="box"> <div class="c1"><div class="type">Web前端之家欢迎您！</div></div><br /><br /> <div class="c2"><div class="type2">Web前端之家欢迎您的到来！</div></div><br /><br /> <div class="c3"><div class="type3">请关注Web前端之家！</div></div><br /><br /> <div class="c4"> <div class="type4"><a href="https://www.jiangweishan.com">Web前端之家</a></div> </div></div>看上去我们，实现了多行打字效果，要在第一行打印完，接着开始打印下面的行，这里有个注意点，文字打印到某处的时候，光标也会跟着走的。我们是通过blinking动画去控制的。废话不多说啊，看下CSS的属性如何写：body{ background: #d3ffce; background-size: cover; font-family: Play; } a{ color: mediumseagreen; } .c1{ display: inline-block; } .c2{ display: inline-block; } .c3{ display: inline-block; } .c4{ display: inline-block; } h1{ font-size: 2.8rem; margin-top: 1%; } .box .type{ font-size: 2.5rem; overflow: hidden; border-right: .15em solid orange; white-space: nowrap; width: 0; animation: typing 1.5s steps(30, end) forwards; } .box .type2{ font-size: 2.5rem; overflow: hidden; border-right: .15em solid orange; white-space: nowrap; width: 0; animation: typing 1.5s steps(30, end) forwards; animation-delay: 1.5s; } .box .type3{ font-size: 2.5rem; overflow: hidden; border-right: .15em solid orange; white-space: nowrap; width: 0; animation: typing 2s steps(30, end) forwards; animation-delay: 3s; } .box .type4{ font-size: 2.5rem; overflow: hidden; margin-top: 6%; border-right: .15em solid orange; white-space: nowrap; width: 0; animation: typing 2s steps(30, end) forwards, blink .75s infinite; animation-delay: 5.5s; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink { from { border-color: transparent } to { border-color: orange; } }我们从上面代码发现，动画的定义是没变的，只不过是在对每行进行了时间和延迟处理而已。也就是我们上面提到的delay方法。效果如下：来看下完整的Demo：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML&CSS：分享一个用纯CSS打造的文本打字特效 - Web前端之家https://www.jiangweishan.com</title> <style> body{ background: #d3ffce; background-size: cover; font-family: Play; } a{ color: mediumseagreen; } .c1{ display: inline-block; } .c2{ display: inline-block; } .c3{ display: inline-block; } .c4{ display: inline-block; } h1{ font-size: 2.8rem; margin-top: 1%; } .box .type{ font-size: 2.5rem; overflow: hidden; border-right: .15em solid orange; white-space: nowrap; width: 0; animation: typing 1.5s steps(30, end) forwards; } .box .type2{ font-size: 2.5rem; overflow: hidden; border-right: .15em solid orange; white-space: nowrap; width: 0; animation: typing 1.5s steps(30, end) forwards; animation-delay: 1.5s; } .box .type3{ font-size: 2.5rem; overflow: hidden; border-right: .15em solid orange; white-space: nowrap; width: 0; animation: typing 2s steps(30, end) forwards; animation-delay: 3s; } .box .type4{ font-size: 2.5rem; overflow: hidden; margin-top: 6%; border-right: .15em solid orange; white-space: nowrap; width: 0; animation: typing 2s steps(30, end) forwards, blink .75s infinite; animation-delay: 5.5s; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink { from { border-color: transparent } to { border-color: orange; } } </style></head><body><h1>Web前端之家https://www.jiangweishan.com</h1><div class="box"> <div class="c1"><div class="type">Web前端之家欢迎您！</div></div><br /><br /> <div class="c2"><div class="type2">Web前端之家欢迎您的到来！</div></div><br /><br /> <div class="c3"><div class="type3">请关注Web前端之家！</div></div><br /><br /> <div class="c4"> <div class="type4"><a href="https://www.jiangweishan.com">Web前端之家</a></div> </div></div> </body></html>大家试着预览看下效果。总结本次分享的内容是很基础的，这个打字动画效果，适合用在比较简单的文字，如果文字10行或者更多的话，我们可以去构思下模块化的想法，也可以采用简单的JS去实现，由于时间关系，这里就不多说了，想进一步了解的同学，可以加QQ群讨论。...

如何使用CSS3混合模式在图像上显示酷炫“Web前端之家”文字

2021年08月19日

CSS3混合模式在图像上显示酷炫“Web前端之家”文字 | Web前端之家www.jiangweishan.com</title> <style> .backdrop { width: 1000px; height: 300px; position: relative; background-size: 100%; margin: 40px auto; } .text { color: black; background-color: white; mix-blend-mode:screen; width: 100%; height: 100%; font-weight: bolder; text-align: center; line-height: 300px; margin: 0; } .inverse { color: white; background-color: black; } .backdrop ,.text { border-radius: 2px; } .overlay { width: 100%; height: 100%; position: absolute; top: 0; mix-blend-mode:multiply; } /* water */ .water.backdrop { background-image: url(https://images.unsplash.com/reserve/AXx3QORhRDKAMrbb8pX4_photo%202.JPG); } .water.overlay { background-color: rgba(0,255,255,.1); } .water.text { font-size: 60pt; } /* fire */ .fire.backdrop { background-image: url(https://66.media.tumblr.com/e454398961e0203f2aad001cf7d177bf/tumblr_mrztj7GFJA1sdyj9lo1_1280.jpg); } .fire.overlay{ background-color: rgba(255,0,0,.1); } .fire.text{ font-size: 100pt; } </style></head><body> <div class="backdrop fire"> <p class="text fire">Web前端之家</p> <div class="overlay fire"></div> </div> <div class="backdrop fire"> <p class="text fire inverse">Web前端之家</p> <div class="overlay fire inverse"></div> </div> <div class="backdrop water"> <p class="text water">Web前端之家</p> <div class="overlay water"></div> </div> <div class="backdrop water"> <p class="text water inverse">Web前端之家</p> <div class="overlay water"></div> </div></body></html>运行试试吧。总结如果你觉得不错的话，留言吧，如果想学习更多的效果和技术，请加QQ群一起探讨。...

CSS3绘制图形应用：如何使用 CSS3 创建 Gmail 徽标

2021年08月19日

CSS3绘制图形应用：如何使用CSS3创建Gmail徽标。上代码吧。<!DOCTYPE HTML> <html> <head> <title>CSS3绘制图形应用：如何使用 CSS3 创建 Gmail 徽标 | Web前端之家www.jiangweishan.com</title> <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> <style type="text/css">  </style> </head> <body> <span id='gmail-logo2'> <span class='element1'> </span> <span class='element2'> </span> <span class='element3'> </span> <span class='element4'> </span> <span class='element5'> </span> </span> </body> </html>大家试试吧。...

HTML5和CSS3应用：绘制小水缸，实现动画效果

2021年08月10日

CSS3实现的应用：绘制小水缸，实现动画效果。之前也分享过一些了，大家可以去了解。OK，我们往下走吧，先看下效果图：一口可爱的小水缸，带着笑脸，冒着泡。首先我们需要绘制图形。HTML<label for="toggle">Turn shading off</label><input id="toggle" type="checkbox"/><div class="cauldron" style="--potion-hue: 176"> <div class="cauldron__opening"> <div class="cauldron__bubble" style="--delay: 6; --scale: 1.27; --speed: 9; --x: 57"></div> <div class="cauldron__bubble" style="--delay: 5; --scale: 1; --speed: 5; --x: 67"></div> <div class="cauldron__bubble" style="--delay: 4; --scale: 0.86; --speed: 7; --x: 63"></div> <div class="cauldron__bubble" style="--delay: 0; --scale: 1.27; --speed: 9; --x: 60"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 0.5; --speed: 10; --x: 38"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 1.14; --speed: 5; --x: 66"></div> <div class="cauldron__bubble" style="--delay: 10; --scale: 0.63; --speed: 9; --x: 74"></div> <div class="cauldron__bubble" style="--delay: 5; --scale: 0.93; --speed: 5; --x: 61"></div> <div class="cauldron__bubble" style="--delay: 3; --scale: 1.29; --speed: 6; --x: 35"></div> <div class="cauldron__bubble" style="--delay: 3; --scale: 1; --speed: 5; --x: 27"></div> <div class="cauldron__bubble" style="--delay: 6; --scale: 0.71; --speed: 9; --x: 39"></div> <div class="cauldron__bubble" style="--delay: 8; --scale: 1.5; --speed: 9; --x: 69"></div> <div class="cauldron__bubble" style="--delay: 3; --scale: 1.34; --speed: 9; --x: 63"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 0.88; --speed: 9; --x: 34"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 1.11; --speed: 6; --x: 47"></div> <div class="cauldron__bubble" style="--delay: 6; --scale: 0.56; --speed: 6; --x: 46"></div> <div class="cauldron__bubble" style="--delay: 6; --scale: 0.97; --speed: 9; --x: 39"></div> <div class="cauldron__bubble" style="--delay: 6; --scale: 0.69; --speed: 9; --x: 73"></div> <div class="cauldron__bubble" style="--delay: 3; --scale: 1.12; --speed: 6; --x: 57"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 0.55; --speed: 5; --x: 55"></div> <div class="cauldron__bubble" style="--delay: 7; --scale: 0.53; --speed: 5; --x: 72"></div> <div class="cauldron__bubble" style="--delay: 4; --scale: 1.04; --speed: 8; --x: 59"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 1.12; --speed: 5; --x: 41"></div> <div class="cauldron__bubble" style="--delay: 0; --scale: 0.71; --speed: 9; --x: 66"></div> <div class="cauldron__bubble" style="--delay: 9; --scale: 0.66; --speed: 6; --x: 47"></div> </div> <div class="cauldron__handle cauldron__handle--left"></div> <div class="cauldron__handle cauldron__handle--right"></div> <div class="cauldron__foot cauldron__foot--left"></div> <div class="cauldron__foot cauldron__foot--right"></div> <div class="cauldron__eye cauldron__eye--left"></div> <div class="cauldron__eye cauldron__eye--right"></div> <div class="cauldron__mouth"></div></div>我们分为了很多小块。最重要的还是CSS3这块的内容：* { box-sizing: border-box; transition: background 0.15s ease, box-shadow 0.15s ease;}:root { --cauldron-hue: 34; --potion-hue: 120; --size: 200; --bg: #111;}label { font-weight: bold; color: #fcfcfc; margin-bottom: 0.5rem;}[type='checkbox'] { margin-bottom: 2rem;}:checked ~ .cauldron { background: var(--cauldron-color);}:checked ~ .cauldron .cauldron__opening { background: var(--potion-color); box-shadow: none;}:checked ~ .cauldron:after,:checked ~ .cauldron:before { background: var(--potion-color); box-shadow: none;}:checked ~ .cauldron:before { background: transparent;}:checked ~ .cauldron .cauldron__handle { background: var(--rim-color);}:checked ~ .cauldron .cauldron__eye { box-shadow: none;}:checked ~ .cauldron .cauldron__mouth { box-shadow: none;}:checked ~ .cauldron .cauldron__foot { background: var(--inner-rim-color);}:checked ~ .cauldron .cauldron__bubble { background: var(--potion-color);}body { align-items: center; display: flex; justify-content: center; min-height: 100vh; background: var(--bg); flex-direction: column;}.cauldron { --rim-color: hsl(var(--cauldron-hue), 100%, 60%); --inner-rim-color: hsl(var(--cauldron-hue), 100%, 25%); --potion-color: hsl(var(--potion-hue), 100%, 50%); --cauldron-color: hsl(var(--cauldron-hue), 100%, 50%); --darkness: hsl(var(--cauldron-hue), 100%, 10%); --lightness: hsl(var(--cauldron-hue), 100%, 85%); --potion-stain-light: hsl(var(--potion-hue), 100%, 70%); --potion-stain-dark: hsl(var(--potion-hue), 100%, 30%); border-radius: 100%; height: calc(var(--size) * 1px); width: calc(var(--size) * 1px); background: radial-gradient(25% 25% at 25% 55%, var(--rim-color), transparent), radial-gradient(100% 100% at -2% 50%, transparent, transparent 92%, var(--cauldron-color)), radial-gradient(100% 100% at -5% 50%, transparent, transparent 80%, var(--darkness)), linear-gradient(310deg, var(--inner-rim-color) 25%, transparent), var(--cauldron-color); position: relative;}.cauldron__opening { width: 100%; position: absolute; top: 0; left: 0; height: 35%; background: linear-gradient(90deg, transparent, var(--potion-stain-dark)), var(--potion-color); border: calc(var(--size) * 0.05px) solid var(--rim-color); box-shadow: 0 0px calc(var(--size) * 0.05px) calc(var(--size) * 0.005px) var(--rim-color) inset, 0 calc(var(--size) * 0.025px) 0 calc(var(--size) * 0.025px) var(--inner-rim-color) inset, 0 10px 20px 0px var(--darkness), 0 10px 20px -10px var(--inner-rim-color); border-radius: 100%;}.cauldron__opening:after { content: ''; position: absolute; background: linear-gradient(90deg, transparent, var(--potion-stain-dark), transparent, var(--potion-stain-light), transparent, var(--potion-stain-dark), transparent); border-radius: 100%; top: 8px; right: 0; bottom: 4px; left: 0;}.cauldron__opening:before { content: ''; position: absolute; box-shadow: 0 0 calc(var(--size) * 0.025px) 0 var(--darkness) inset, 0 -1px calc(var(--size) * 0.015px) 0px var(--darkness) inset, 0 2px calc(var(--size) * 0.015px) 0px var(--lightness) inset, 0 0 calc(var(--size) * 0.075px) calc(var(--size) * 0.05px) var(--rim-color) inset; border-radius: 100%; top: calc(var(--size) * -0.05px); right: calc(var(--size) * -0.05px); bottom: calc(var(--size) * -0.05px); left: calc(var(--size) * -0.05px);}.cauldron__handle { height: calc(var(--size) * 0.3px); width: calc(var(--size) * 0.3px); position: absolute; background: linear-gradient(0deg, var(--darkness), transparent), radial-gradient(100% 100% at 50% 50%, var(--inner-rim-color), transparent), var(--rim-color); border-radius: 100%; top: 30%; z-index: -1;}.cauldron__handle:after { content: ''; background: var(--bg); height: 50%; width: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 100%;}.cauldron__handle--left { left: -14%;}.cauldron__handle--right { right: -14%;}.cauldron__foot { background: var(--inner-rim-color); position: absolute; z-index: -1; height: calc(var(--size) * 0.3px); width: calc(var(--size) * 0.3px); bottom: -5%; border-radius: 200% 0 200% 50%/200% 0 200% 50%;}.cauldron__foot--left { left: 10%; background: radial-gradient(110% 110% at 25% 50%, transparent, var(--darkness) 75%), var(--inner-rim-color);}.cauldron__foot--right { right: 10%; background: radial-gradient(110% 110% at 25% 50%, transparent, var(--darkness)), var(--inner-rim-color); transform: rotateY(180deg);}.cauldron__bubble { height: calc(var(--size) * 0.2px); width: calc(var(--size) * 0.2px); position: absolute; border-radius: 100%; top: 0; left: calc(var(--x) * 1%); border: 1px solid var(--potion-stain-light); background: radial-gradient(100% 115% at 25% 25%, #fff, transparent 33%), radial-gradient(15% 15% at 75% 75%, var(--cauldron-color), transparent), radial-gradient(100% 100% at 50% 25%, transparent, var(--potion-color) 98%); pointer-events: none; -webkit-animation: rise calc(var(--speed) * 1s) calc(var(--delay) * -1s) infinite ease; animation: rise calc(var(--speed) * 1s) calc(var(--delay) * -1s) infinite ease;}.cauldron__mouth { position: absolute; top: 60%; left: 50%; transform: translate(-50%, 0); height: calc(var(--size) * 0.1px); width: calc(var(--size) * 0.15px); border-radius: 100%; border-bottom: 4px solid #000; box-shadow: 0px 1px 0 0 var(--lightness); -webkit-clip-path: inset(50% 0 -10% 0); clip-path: inset(50% 0 -10% 0);}.cauldron__eye { height: calc(var(--size) * 0.075px); width: calc(var(--size) * 0.075px); background: #111; border-radius: 100%; position: absolute; top: 50%; box-shadow: 1px 1px 1px 0px var(--lightness), -1px -1px 1px 0 var(--inner-rim-color); -webkit-animation: blink 4s infinite linear both; animation: blink 4s infinite linear both;}.cauldron__eye--left { left: 20%;}.cauldron__eye--right { right: 20%;}@-webkit-keyframes rise { 0% { transform: scale(0) translate(-50%, 0); } 100% { transform: scale(var(--scale)) translate(-50%, -50vh); opacity: 0; }}@keyframes rise { 0% { transform: scale(0) translate(-50%, 0); } 100% { transform: scale(var(--scale)) translate(-50%, -50vh); opacity: 0; }}@-webkit-keyframes blink { 9% { transform: scaleY(1); } 10% { transform: scaleY(0); } 11% { transform: scaleY(1); } 12% { transform: scaleY(0); } 13% { transform: scaleY(1); }}@keyframes blink { 9% { transform: scaleY(1); } 10% { transform: scaleY(0); } 11% { transform: scaleY(1); } 12% { transform: scaleY(0); } 13% { transform: scaleY(1); }}结合动画和滤镜实现。这个需要很细心的去分析图形的每个节点。最后发下完整的DEMO。<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>HTML5-CSS3应用：绘制小水缸，实现动画效果 | Web前端之家www.jiangweishan.com</title> <style> * { box-sizing: border-box; transition: background 0.15s ease, box-shadow 0.15s ease; } :root { --cauldron-hue: 34; --potion-hue: 120; --size: 200; --bg: #111; } label { font-weight: bold; color: #fcfcfc; margin-bottom: 0.5rem; } [type='checkbox'] { margin-bottom: 2rem; } :checked ~ .cauldron { background: var(--cauldron-color); } :checked ~ .cauldron .cauldron__opening { background: var(--potion-color); box-shadow: none; } :checked ~ .cauldron:after, :checked ~ .cauldron:before { background: var(--potion-color); box-shadow: none; } :checked ~ .cauldron:before { background: transparent; } :checked ~ .cauldron .cauldron__handle { background: var(--rim-color); } :checked ~ .cauldron .cauldron__eye { box-shadow: none; } :checked ~ .cauldron .cauldron__mouth { box-shadow: none; } :checked ~ .cauldron .cauldron__foot { background: var(--inner-rim-color); } :checked ~ .cauldron .cauldron__bubble { background: var(--potion-color); } body { align-items: center; display: flex; justify-content: center; min-height: 100vh; background: var(--bg); flex-direction: column; } .cauldron { --rim-color: hsl(var(--cauldron-hue), 100%, 60%); --inner-rim-color: hsl(var(--cauldron-hue), 100%, 25%); --potion-color: hsl(var(--potion-hue), 100%, 50%); --cauldron-color: hsl(var(--cauldron-hue), 100%, 50%); --darkness: hsl(var(--cauldron-hue), 100%, 10%); --lightness: hsl(var(--cauldron-hue), 100%, 85%); --potion-stain-light: hsl(var(--potion-hue), 100%, 70%); --potion-stain-dark: hsl(var(--potion-hue), 100%, 30%); border-radius: 100%; height: calc(var(--size) * 1px); width: calc(var(--size) * 1px); background: radial-gradient(25% 25% at 25% 55%, var(--rim-color), transparent), radial-gradient(100% 100% at -2% 50%, transparent, transparent 92%, var(--cauldron-color)), radial-gradient(100% 100% at -5% 50%, transparent, transparent 80%, var(--darkness)), linear-gradient(310deg, var(--inner-rim-color) 25%, transparent), var(--cauldron-color); position: relative; } .cauldron__opening { width: 100%; position: absolute; top: 0; left: 0; height: 35%; background: linear-gradient(90deg, transparent, var(--potion-stain-dark)), var(--potion-color); border: calc(var(--size) * 0.05px) solid var(--rim-color); box-shadow: 0 0px calc(var(--size) * 0.05px) calc(var(--size) * 0.005px) var(--rim-color) inset, 0 calc(var(--size) * 0.025px) 0 calc(var(--size) * 0.025px) var(--inner-rim-color) inset, 0 10px 20px 0px var(--darkness), 0 10px 20px -10px var(--inner-rim-color); border-radius: 100%; } .cauldron__opening:after { content: ''; position: absolute; background: linear-gradient(90deg, transparent, var(--potion-stain-dark), transparent, var(--potion-stain-light), transparent, var(--potion-stain-dark), transparent); border-radius: 100%; top: 8px; right: 0; bottom: 4px; left: 0; } .cauldron__opening:before { content: ''; position: absolute; box-shadow: 0 0 calc(var(--size) * 0.025px) 0 var(--darkness) inset, 0 -1px calc(var(--size) * 0.015px) 0px var(--darkness) inset, 0 2px calc(var(--size) * 0.015px) 0px var(--lightness) inset, 0 0 calc(var(--size) * 0.075px) calc(var(--size) * 0.05px) var(--rim-color) inset; border-radius: 100%; top: calc(var(--size) * -0.05px); right: calc(var(--size) * -0.05px); bottom: calc(var(--size) * -0.05px); left: calc(var(--size) * -0.05px); } .cauldron__handle { height: calc(var(--size) * 0.3px); width: calc(var(--size) * 0.3px); position: absolute; background: linear-gradient(0deg, var(--darkness), transparent), radial-gradient(100% 100% at 50% 50%, var(--inner-rim-color), transparent), var(--rim-color); border-radius: 100%; top: 30%; z-index: -1; } .cauldron__handle:after { content: ''; background: var(--bg); height: 50%; width: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 100%; } .cauldron__handle--left { left: -14%; } .cauldron__handle--right { right: -14%; } .cauldron__foot { background: var(--inner-rim-color); position: absolute; z-index: -1; height: calc(var(--size) * 0.3px); width: calc(var(--size) * 0.3px); bottom: -5%; border-radius: 200% 0 200% 50%/200% 0 200% 50%; } .cauldron__foot--left { left: 10%; background: radial-gradient(110% 110% at 25% 50%, transparent, var(--darkness) 75%), var(--inner-rim-color); } .cauldron__foot--right { right: 10%; background: radial-gradient(110% 110% at 25% 50%, transparent, var(--darkness)), var(--inner-rim-color); transform: rotateY(180deg); } .cauldron__bubble { height: calc(var(--size) * 0.2px); width: calc(var(--size) * 0.2px); position: absolute; border-radius: 100%; top: 0; left: calc(var(--x) * 1%); border: 1px solid var(--potion-stain-light); background: radial-gradient(100% 115% at 25% 25%, #fff, transparent 33%), radial-gradient(15% 15% at 75% 75%, var(--cauldron-color), transparent), radial-gradient(100% 100% at 50% 25%, transparent, var(--potion-color) 98%); pointer-events: none; -webkit-animation: rise calc(var(--speed) * 1s) calc(var(--delay) * -1s) infinite ease; animation: rise calc(var(--speed) * 1s) calc(var(--delay) * -1s) infinite ease; } .cauldron__mouth { position: absolute; top: 60%; left: 50%; transform: translate(-50%, 0); height: calc(var(--size) * 0.1px); width: calc(var(--size) * 0.15px); border-radius: 100%; border-bottom: 4px solid #000; box-shadow: 0px 1px 0 0 var(--lightness); -webkit-clip-path: inset(50% 0 -10% 0); clip-path: inset(50% 0 -10% 0); } .cauldron__eye { height: calc(var(--size) * 0.075px); width: calc(var(--size) * 0.075px); background: #111; border-radius: 100%; position: absolute; top: 50%; box-shadow: 1px 1px 1px 0px var(--lightness), -1px -1px 1px 0 var(--inner-rim-color); -webkit-animation: blink 4s infinite linear both; animation: blink 4s infinite linear both; } .cauldron__eye--left { left: 20%; } .cauldron__eye--right { right: 20%; } @-webkit-keyframes rise { 0% { transform: scale(0) translate(-50%, 0); } 100% { transform: scale(var(--scale)) translate(-50%, -50vh); opacity: 0; } } @keyframes rise { 0% { transform: scale(0) translate(-50%, 0); } 100% { transform: scale(var(--scale)) translate(-50%, -50vh); opacity: 0; } } @-webkit-keyframes blink { 9% { transform: scaleY(1); } 10% { transform: scaleY(0); } 11% { transform: scaleY(1); } 12% { transform: scaleY(0); } 13% { transform: scaleY(1); } } @keyframes blink { 9% { transform: scaleY(1); } 10% { transform: scaleY(0); } 11% { transform: scaleY(1); } 12% { transform: scaleY(0); } 13% { transform: scaleY(1); } } </style></head><body> <label for="toggle">Turn shading off</label> <input id="toggle" type="checkbox"/> <div class="cauldron" style="--potion-hue: 176"> <div class="cauldron__opening"> <div class="cauldron__bubble" style="--delay: 6; --scale: 1.27; --speed: 9; --x: 57"></div> <div class="cauldron__bubble" style="--delay: 5; --scale: 1; --speed: 5; --x: 67"></div> <div class="cauldron__bubble" style="--delay: 4; --scale: 0.86; --speed: 7; --x: 63"></div> <div class="cauldron__bubble" style="--delay: 0; --scale: 1.27; --speed: 9; --x: 60"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 0.5; --speed: 10; --x: 38"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 1.14; --speed: 5; --x: 66"></div> <div class="cauldron__bubble" style="--delay: 10; --scale: 0.63; --speed: 9; --x: 74"></div> <div class="cauldron__bubble" style="--delay: 5; --scale: 0.93; --speed: 5; --x: 61"></div> <div class="cauldron__bubble" style="--delay: 3; --scale: 1.29; --speed: 6; --x: 35"></div> <div class="cauldron__bubble" style="--delay: 3; --scale: 1; --speed: 5; --x: 27"></div> <div class="cauldron__bubble" style="--delay: 6; --scale: 0.71; --speed: 9; --x: 39"></div> <div class="cauldron__bubble" style="--delay: 8; --scale: 1.5; --speed: 9; --x: 69"></div> <div class="cauldron__bubble" style="--delay: 3; --scale: 1.34; --speed: 9; --x: 63"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 0.88; --speed: 9; --x: 34"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 1.11; --speed: 6; --x: 47"></div> <div class="cauldron__bubble" style="--delay: 6; --scale: 0.56; --speed: 6; --x: 46"></div> <div class="cauldron__bubble" style="--delay: 6; --scale: 0.97; --speed: 9; --x: 39"></div> <div class="cauldron__bubble" style="--delay: 6; --scale: 0.69; --speed: 9; --x: 73"></div> <div class="cauldron__bubble" style="--delay: 3; --scale: 1.12; --speed: 6; --x: 57"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 0.55; --speed: 5; --x: 55"></div> <div class="cauldron__bubble" style="--delay: 7; --scale: 0.53; --speed: 5; --x: 72"></div> <div class="cauldron__bubble" style="--delay: 4; --scale: 1.04; --speed: 8; --x: 59"></div> <div class="cauldron__bubble" style="--delay: 2; --scale: 1.12; --speed: 5; --x: 41"></div> <div class="cauldron__bubble" style="--delay: 0; --scale: 0.71; --speed: 9; --x: 66"></div> <div class="cauldron__bubble" style="--delay: 9; --scale: 0.66; --speed: 6; --x: 47"></div> </div> <div class="cauldron__handle cauldron__handle--left"></div> <div class="cauldron__handle cauldron__handle--right"></div> <div class="cauldron__foot cauldron__foot--left"></div> <div class="cauldron__foot cauldron__foot--right"></div> <div class="cauldron__eye cauldron__eye--left"></div> <div class="cauldron__eye cauldron__eye--right"></div> <div class="cauldron__mouth"></div> </div></body></html>...

CSS3应用：画个东京奥运会五环图形效果

2021年07月29日

CSS3去花呢？先来看下最终效果图：首先我们规划HTML：<div class="container"> <div class="ring blue"></div> <div class="ring yellow yellow1"></div> <div class="ring yellow yellow2"></div></div>对应的CSS3代码：.ring { width: 100px; height: 100px; border-radius: 50%; position: absolute; border-style: solid; border-width: 10px;} .blue { border-color: #0180C3; top: 0; left: 0; z-index: 0;} .yellow { border-color: #FEB131; left: 70px; top: 60px;} .yellow1 { /* 在蓝色的环上面 */ z-index: 1; /* 切割圆 */ clip-path: polygon(0 0, 100% 100%, 0 100%);} .yellow2 { /* 在蓝色的环下面 */ z-index: -1; clip-path: polygon(0 0, 100% 100%, 100% 0);}然后再实现环之间交错效果。以蓝色和黄色的环为例：蓝色的环为基准，黄色的环切割成两个部分，第一个部分在蓝色的环上面，第二个部分在蓝色的环下面。画完蓝色和黄色的环以后，就可以继续画黑色的环。这次基准变成了黄色的环，要将黑色的环切割成两个部分。然后分别是绿色和红色的环，一样的原理。基本原理就这么多了，接下来分享下完整代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>CSS3：画个奥运会五环图形效果 | Web前端之家www.jiangweishan.com</title> <style> body { margin: 0; } .container { margin:100px auto; width: 500px; height: 200px; position: relative; } .ring { width: 100px; height: 100px; border-radius: 50%; position: absolute; border-style: solid; border-width: 10px; } .blue { border-color: #0180C3; top: 0; left: 0; z-index: 0; } .yellow { border-color: #FEB131; left: 70px; top: 60px; } .yellow1 { z-index: 1; clip-path: polygon(0 0, 100% 100%, 0 100%); } .yellow2 { z-index: -1; clip-path: polygon(0 0, 100% 100%, 100% 0); } .black { border-color: black; left: 140px; top: 0px; } .black1 { z-index: -2; clip-path: polygon(0 0, 100% 0, 0 100%); } .black2 { z-index: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); } .green { border-color: #059341; left: 210px; top: 60px; } .green1 { z-index: 1; clip-path: polygon(0 0, 100% 100%, 0 100%); } .green2 { z-index: -1; clip-path: polygon(0 0, 100% 100%, 100% 0); } .red { border-color: #FF0000; left: 280px; top: 0px; } .red1 { z-index: -2; clip-path: polygon(0 0, 100% 0, 0 100%); } .red2 { z-index: 0; clip-path: polygon(100% 100%, 100% 0, 0 100%); } </style></head><body><div class="container"> <div class="ring blue"></div> <div class="ring yellow yellow1"></div> <div class="ring yellow yellow2"></div> <div class="ring black black1"></div> <div class="ring black black2"></div> <div class="ring green green1"></div> <div class="ring green green2"></div> <div class="ring red red1"></div> <div class="ring red red2"></div> </div></body></html>大家可以预览下效果。...

CSS3动画：通过Animation实现简单的手指点击动画

2021年07月26日

CSS3动画的知识点了，近期都在忙于后台前端开发项目，难道今天有点时间，分享下关于CSS3动画知识点，今天我们看一个小TIPS：通过Animation实现简单的手指点击动画。鼠标放上去会有个特效。HTML：<div class="wrapper"> <div class="circle"></div> <div class="finger"></div> </div>CSS:.wrapper{position:relative;overflow:hidden;width:500px;height:500px;margin:0 auto;background-color:black} .circle{position:absolute;left:50%;top:50%;margin:-70px 0 0 -46px;　　　　　　background: url("./circle.png") center center no-repeat; width:62px;height:62px;animation:circleHide 1s ease infinite both} .finger{background:url("./finger.png") center center no-repeat;width:100px;height:140px;margin:170px auto;animation:fingerHandle 1s ease infinite both} @keyframes fingerHandle{ 0%{transform:none} 70%{transform:scale3d(.8,.8,.8)} 100%{transform:none} } @keyframes circleHide{ 0%{opacity:0;transform:scale3d(0,0,0)} 70%{opacity:1;transform:scale3d(1.2,1.2,1.2)} 100%{opacity:0;transform:scale3d(0,0,0)} }完整代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <title>CSS3--通过Animation实现简单的手指点击动画</title> <style> .wrapper{position:relative;overflow:hidden;width:500px;height:500px;margin:0 auto;background-color:black} .circle{position:absolute;left:50%;top:50%;margin:-70px 0 0 -46px;　　　　　　background: url("./circle.png") center center no-repeat; width:62px;height:62px;animation:circleHide 1s ease infinite both} .finger{background:url("./finger.png") center center no-repeat;width:100px;height:140px;margin:170px auto;animation:fingerHandle 1s ease infinite both} @keyframes fingerHandle{ 0%{transform:none} 70%{transform:scale3d(.8,.8,.8)} 100%{transform:none} } @keyframes circleHide{ 0%{opacity:0;transform:scale3d(0,0,0)} 70%{opacity:1;transform:scale3d(1.2,1.2,1.2)} 100%{opacity:0;transform:scale3d(0,0,0)} } </style> </head> <body> <div class="wrapper"> <div class="circle"></div> <div class="finger"></div> </div> </body></html>试试吧。大家可以吧circle.png和finger.png图自己放个位置运行即可。...

HTML5：CSS3画一个可爱动漫宠物

2021年07月12日

CSS3动画的文章了，近期一直折腾vue和react等项目。闲余之时，突然想分享一个HTML5应用：CSS3画一个可爱动漫宠物。先看下效果图：HTML代码：<label for="toggle">Toggle body overflow</label><input id="toggle" type="checkbox"/><div class="jigglypuff"> <div class="jigglypuff__left-arm"></div> <div class="jigglypuff__left-foot"></div> <div class="jigglypuff__right-foot"></div> <div class="jigglypuff__ear-left"> <div class="jigglypuff__ear-left-inner"></div> </div> <div class="jigglypuff__ear-right"> <div class="jigglypuff__ear-right-inner"></div> </div> <div class="jigglypuff__body"></div> <div class="jigglypuff__right-arm"></div> <div class="jigglypuff__mouth"></div> <div class="jigglypuff__eye-left"> <div class="jigglypuff__eye-left-pupil"></div> </div> <div class="jigglypuff__eye-right"> <div class="jigglypuff__eye-right-pupil"></div> </div> <div class="jigglypuff__tuft-container"> <div class="jigglypuff__tuft"></div> <div class="jigglypuff__tuft-line"></div> </div></div>CSS代码：*,*:after,*:before { box-sizing: border-box;}:root { --size: 50; --unit: calc((var(--size) / 853) * 1vmin); --pink: #efc7d0; --pink-dark: #daa4ae; --glare: radial-gradient(circle at center, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.15) 80%); --inner-ear: #161922; --border: #262626; --eye-light: #4c9cae; --eye-dark: #0e7486; --pupil-backdrop: #053747;}body { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 100vh; background: #b9f;}.jigglypuff { height: calc(805 * var(--unit)); width: calc(853 * var(--unit)); position: relative;}.jigglypuff * { position: absolute;}.jigglypuff__body { background: var(--pink-dark); left: 9.5%; top: 15%; height: 77.25%; width: 73%; border: calc(5 * var(--unit)) solid var(--border); border-radius: 60% 53% 61% 58%/53% 58% 58% 61%; overflow: hidden;}.jigglypuff__body:before { content: ''; background: var(--pink); width: 239%; height: 210%; left: 57%; bottom: 20%; border-radius: 50%/0 0 100% 100%; transform: translate(-50%, 0) rotate(4deg); position: absolute; transform-origin: bottom center;}.jigglypuff__left-arm { top: 56%; left: 0.75%; height: 15%; border: calc(5 * var(--unit)) solid var(--border); width: 27%; background: var(--pink-dark); border-radius: 70% 0 0 100%/25% 0 0 75%; transform-origin: 100% 50%; transform: rotate(1deg); overflow: hidden;}.jigglypuff__left-arm:before { content: ''; position: absolute; height: 100%; width: 41%; border-radius: 0 0 60% 0/0 0 83% 0; background: radial-gradient(circle at 0 50%, var(--pink) 70%, var(--pink-dark) 90%); left: -5%; top: 50%; transform: translate(0, -50%);}.jigglypuff__left-arm:after { content: ''; top: 20%; left: 7%; height: 19%; width: 15%; background: var(--glare); position: absolute; border-radius: 50%;}.jigglypuff__right-arm { top: 77%; left: 58.5%; background: var(--pink-dark); width: 11%; border: calc(5 * var(--unit)) solid var(--border); height: 12%; transform: rotate(-10deg); border-radius: 0 0 50% 50%/0 0 100% 100%; border-top: 0;}.jigglypuff__right-arm:before { content: ''; position: absolute; bottom: 20%; left: 50%; transform: translate(-50%, 0); background: var(--pink); height: 100%; width: 80%; border-radius: 0 0 50% 50%/0 0 100% 100%; z-index: 2;}.jigglypuff__right-arm:after { content: ''; position: absolute; background: var(--glare); height: 40%; width: 25%; border-radius: 50%; left: 21%; bottom: 57%; z-index: 3; transform: rotate(-10deg);}.jigglypuff__left-foot { height: 26%; width: 12%; background: var(--pink-dark); bottom: 0%; left: 17%; transform: rotate(70deg); border-radius: 29% 70% 50% 50%/24% 39% 67% 55%; border: calc(5 * var(--unit)) solid var(--border); overflow: hidden;}.jigglypuff__left-foot:after { content: ''; position: absolute; bottom: -7%; height: 60%; width: 150%; border-radius: 50%; background: radial-gradient(circle at 50% 75%, var(--pink) 50%, var(--pink-dark));}.jigglypuff__left-foot:before { content: ''; position: absolute; bottom: 9%; left: 20%; height: 25%; width: 30%; background: var(--glare); border-radius: 50%; transform: rotate(-10deg); z-index: 2;}.jigglypuff__right-foot { height: 25%; width: 13%; background: var(--pink-dark); border: calc(5 * var(--unit)) solid var(--border); bottom: 0; left: 61%; border-radius: 25% 39% 45% 101%/50% 64% 56% 97%; transform-origin: 0 100%; transform: rotate(-51deg) translate(0, 29%); overflow: hidden;}.jigglypuff__right-foot:before { content: ''; position: absolute; bottom: -10%; background: radial-gradient(var(--pink) 50%, var(--pink-dark)); width: 165%; height: 62%; border-radius: 50%; left: 50%; transform: translate(-50%, 0);}.jigglypuff__right-foot:after { content: ''; position: absolute; height: 15%; width: 35%; background: var(--glare); border-radius: 50%; bottom: 20%; right: 10%; transform: rotate(50deg); filter: blur(2px);}.jigglypuff__ear-left { height: 30%; width: 25%; background: var(--pink); left: 24%; top: 0%; transform-origin: 0 0; transform: rotate(19deg); border-radius: 9% 85% 25% 26%/17% 30% 0 50%; border: calc(5 * var(--unit)) solid var(--border);}.jigglypuff__ear-left:after { content: ''; height: 50%; width: 75%; background: var(--inner-ear); position: absolute; bottom: 91%; left: 8%; border: calc(5 * var(--unit)) solid var(--border); transform-origin: 0 100%; transform: rotate(28deg) translate(0, 100%); border-radius: 50%/15%; -webkit-clip-path: inset(0 0 90% 0); clip-path: inset(0 0 90% 0);}.jigglypuff__ear-left-inner { height: 80%; width: 58%; background: var(--inner-ear); left: 10%; top: 8%; border: calc(5 * var(--unit)) solid var(--border); border-radius: 15% 0 0 44%/20% 0 0 70%; overflow: hidden; -webkit-clip-path: polygon(0 9%, 100% 43%, 100% 100%, 0 100%); clip-path: polygon(0 9%, 100% 43%, 100% 100%, 0 100%);}.jigglypuff__ear-left-inner:before { content: ''; height: 42%; width: 70%; border-radius: 50%; bottom: 0; left: -11%; position: absolute; background: var(--glare);}.jigglypuff__ear-right { height: 35%; width: 31%; border: calc(5 * var(--unit)) solid var(--border); background: var(--pink); right: 0%; top: 35%; transform-origin: 100% 0; transform: rotate(30deg); border-radius: 100% 5% 56% 0/51% 5% 65% 0;}.jigglypuff__ear-right:after { content: ''; background: var(--inner-ear); width: 61%; height: 68%; right: 4%; top: 11%; position: absolute; border-top: calc(5 * var(--unit)) solid var(--border); -webkit-clip-path: inset(0 0 97% 80%); clip-path: inset(0 0 97% 80%);}.jigglypuff__ear-right-inner { background: var(--inner-ear); width: 61%; height: 68%; right: 8%; top: 11%; border: calc(5 * var(--unit)) solid var(--border); border-radius: 95% 5% 46% 0/76% 5% 70% 0; overflow: hidden; box-shadow: calc(15 * var(--unit)) 0 calc(2 * var(--unit)) 0 var(--pink-dark);}.jigglypuff__ear-right-inner:before { content: ''; z-index: 2; background: var(--glare); height: 50%; width: 67%; border-radius: 50%; bottom: 4%; right: -20%; position: absolute;}.jigglypuff__mouth { top: 47%; left: 33%; transform-origin: 0 50%; height: 15%; width: 18%; border: calc(5 * var(--unit)) solid var(--border); border-radius: 50%; transform: rotate(16deg); -webkit-clip-path: polygon(50% 10%, 91% 100%, 5% 100%); clip-path: polygon(50% 10%, 91% 100%, 5% 100%);}.jigglypuff__tuft-container { top: 11%; left: 34%; height: 37%; width: 37%;}.jigglypuff__tuft-container:after { content: ''; position: absolute; bottom: 0; left: 6%; height: 50%; width: 54%; border-radius: 50%; border: calc(5 * var(--unit)) solid var(--border); background: var(--pink); -webkit-clip-path: polygon(100% 23%, 47% 100%, 100% 100%); clip-path: polygon(100% 23%, 47% 100%, 100% 100%);}.jigglypuff__tuft { background: var(--pink); height: 100%; width: 100%; border-radius: 85% 50% 50% 39%/80% 52% 50% 55%; border: calc(5 * var(--unit)) solid var(--border); -webkit-clip-path: polygon(0 0, 100% 0, 100% 43%, 33% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 43%, 33% 100%, 0 100%);}.jigglypuff__tuft-line { height: 25%; width: 34%; top: 62%; left: 40%; border-radius: 95% 0 0 0/61% 0 0 0; border-top: calc(5 * var(--unit)) solid var(--border);}.jigglypuff__eye-left { height: 24%; width: 21%; border: calc(5 * var(--unit)) solid var(--border); background: #fff; top: 34%; left: 16%; border-radius: 55% 45% 60% 40%/58% 41% 61% 42%;}.jigglypuff__eye-left:after { content: ''; position: absolute; right: 13%; top: 41%; height: 13%; width: 14%; background: #fff; -webkit-clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%); clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%); -webkit-animation: twinkle 1.5s 0.75s infinite; animation: twinkle 1.5s 0.75s infinite;}.jigglypuff__eye-left-pupil { border: calc(5 * var(--unit)) solid var(--border); height: 77%; width: 78%; right: 2%; top: 10%; border-radius: 55% 45% 60% 40%/58% 41% 61% 42%; background: radial-gradient(circle at 50% 120%, var(--eye-light) 40%, transparent 50%), radial-gradient(circle at 85% 34%, var(--pupil-backdrop), transparent), var(--eye-dark);}.jigglypuff__eye-left-pupil:after { content: ''; position: absolute; top: 11%; right: 10%; height: 25%; width: 26%; background: radial-gradient(#fff 75%, transparent); border-radius: 50%;}.jigglypuff__eye-left-pupil:before { content: ''; height: 20%; width: 28%; bottom: 5%; left: 18%; background: var(--glare); border-radius: 50%; position: absolute; z-index: 2;}.jigglypuff__eye-right { border: calc(5 * var(--unit)) solid var(--border); top: 46%; left: 51%; height: 25%; width: 21%; border-radius: 61% 48% 56% 50%/50% 50% 58% 50%; background: #fff;}.jigglypuff__eye-right:after { content: ''; position: absolute; right: 13%; top: 41%; height: 13%; width: 14%; background: #fff; -webkit-clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%); clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%); -webkit-animation: twinkle 2s infinite; animation: twinkle 2s infinite;}.jigglypuff__eye-right-pupil { height: 79%; width: 81%; right: 2%; top: 10%; overflow: hidden; border: calc(5 * var(--unit)) solid var(--border); border-radius: 61% 48% 56% 50%/50% 50% 58% 50%; background: radial-gradient(circle at 50% 120%, var(--eye-light) 40%, transparent 50%), radial-gradient(circle at 71% 24%, var(--pupil-backdrop), transparent), var(--eye-dark);}.jigglypuff__eye-right-pupil:after { content: ''; position: absolute; top: 7%; right: 15%; height: 24%; width: 27%; border-radius: 50%; background: radial-gradient(#fff 75%, transparent);}.jigglypuff__eye-right-pupil:before { content: ''; position: absolute; bottom: 5%; left: 18%; border-radius: 50%; height: 20%; width: 37%; background: var(--glare); z-index: 2;}label { margin-bottom: 1rem; z-index: 3;}:checked { z-index: 3;}:checked ~ .jigglypuff .jigglypuff__body { overflow: visible;}@-webkit-keyframes twinkle { 0% { transform: rotate(0deg) scale(0); } 50% { transform: rotate(540deg) scale(1.2); } 100% { transform: rotate(1080deg) scale(0); }}@keyframes twinkle { 0% { transform: rotate(0deg) scale(0); } 50% { transform: rotate(540deg) scale(1.2); } 100% { transform: rotate(1080deg) scale(0); }}完整代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML5：CSS3画一个可爱动漫宠物 | Web前端之家www.jiangweishan.com</title> <style> *,*:after,*:before { box-sizing: border-box;}:root { --size: 50; --unit: calc((var(--size) / 853) * 1vmin); --pink: #efc7d0; --pink-dark: #daa4ae; --glare: radial-gradient(circle at center, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.15) 80%); --inner-ear: #161922; --border: #262626; --eye-light: #4c9cae; --eye-dark: #0e7486; --pupil-backdrop: #053747;}body { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 100vh; background: #b9f;}.jigglypuff { height: calc(805 * var(--unit)); width: calc(853 * var(--unit)); position: relative;}.jigglypuff * { position: absolute;}.jigglypuff__body { background: var(--pink-dark); left: 9.5%; top: 15%; height: 77.25%; width: 73%; border: calc(5 * var(--unit)) solid var(--border); border-radius: 60% 53% 61% 58%/53% 58% 58% 61%; overflow: hidden;}.jigglypuff__body:before { content: ''; background: var(--pink); width: 239%; height: 210%; left: 57%; bottom: 20%; border-radius: 50%/0 0 100% 100%; transform: translate(-50%, 0) rotate(4deg); position: absolute; transform-origin: bottom center;}.jigglypuff__left-arm { top: 56%; left: 0.75%; height: 15%; border: calc(5 * var(--unit)) solid var(--border); width: 27%; background: var(--pink-dark); border-radius: 70% 0 0 100%/25% 0 0 75%; transform-origin: 100% 50%; transform: rotate(1deg); overflow: hidden;}.jigglypuff__left-arm:before { content: ''; position: absolute; height: 100%; width: 41%; border-radius: 0 0 60% 0/0 0 83% 0; background: radial-gradient(circle at 0 50%, var(--pink) 70%, var(--pink-dark) 90%); left: -5%; top: 50%; transform: translate(0, -50%);}.jigglypuff__left-arm:after { content: ''; top: 20%; left: 7%; height: 19%; width: 15%; background: var(--glare); position: absolute; border-radius: 50%;}.jigglypuff__right-arm { top: 77%; left: 58.5%; background: var(--pink-dark); width: 11%; border: calc(5 * var(--unit)) solid var(--border); height: 12%; transform: rotate(-10deg); border-radius: 0 0 50% 50%/0 0 100% 100%; border-top: 0;}.jigglypuff__right-arm:before { content: ''; position: absolute; bottom: 20%; left: 50%; transform: translate(-50%, 0); background: var(--pink); height: 100%; width: 80%; border-radius: 0 0 50% 50%/0 0 100% 100%; z-index: 2;}.jigglypuff__right-arm:after { content: ''; position: absolute; background: var(--glare); height: 40%; width: 25%; border-radius: 50%; left: 21%; bottom: 57%; z-index: 3; transform: rotate(-10deg);}.jigglypuff__left-foot { height: 26%; width: 12%; background: var(--pink-dark); bottom: 0%; left: 17%; transform: rotate(70deg); border-radius: 29% 70% 50% 50%/24% 39% 67% 55%; border: calc(5 * var(--unit)) solid var(--border); overflow: hidden;}.jigglypuff__left-foot:after { content: ''; position: absolute; bottom: -7%; height: 60%; width: 150%; border-radius: 50%; background: radial-gradient(circle at 50% 75%, var(--pink) 50%, var(--pink-dark));}.jigglypuff__left-foot:before { content: ''; position: absolute; bottom: 9%; left: 20%; height: 25%; width: 30%; background: var(--glare); border-radius: 50%; transform: rotate(-10deg); z-index: 2;}.jigglypuff__right-foot { height: 25%; width: 13%; background: var(--pink-dark); border: calc(5 * var(--unit)) solid var(--border); bottom: 0; left: 61%; border-radius: 25% 39% 45% 101%/50% 64% 56% 97%; transform-origin: 0 100%; transform: rotate(-51deg) translate(0, 29%); overflow: hidden;}.jigglypuff__right-foot:before { content: ''; position: absolute; bottom: -10%; background: radial-gradient(var(--pink) 50%, var(--pink-dark)); width: 165%; height: 62%; border-radius: 50%; left: 50%; transform: translate(-50%, 0);}.jigglypuff__right-foot:after { content: ''; position: absolute; height: 15%; width: 35%; background: var(--glare); border-radius: 50%; bottom: 20%; right: 10%; transform: rotate(50deg); filter: blur(2px);}.jigglypuff__ear-left { height: 30%; width: 25%; background: var(--pink); left: 24%; top: 0%; transform-origin: 0 0; transform: rotate(19deg); border-radius: 9% 85% 25% 26%/17% 30% 0 50%; border: calc(5 * var(--unit)) solid var(--border);}.jigglypuff__ear-left:after { content: ''; height: 50%; width: 75%; background: var(--inner-ear); position: absolute; bottom: 91%; left: 8%; border: calc(5 * var(--unit)) solid var(--border); transform-origin: 0 100%; transform: rotate(28deg) translate(0, 100%); border-radius: 50%/15%; -webkit-clip-path: inset(0 0 90% 0); clip-path: inset(0 0 90% 0);}.jigglypuff__ear-left-inner { height: 80%; width: 58%; background: var(--inner-ear); left: 10%; top: 8%; border: calc(5 * var(--unit)) solid var(--border); border-radius: 15% 0 0 44%/20% 0 0 70%; overflow: hidden; -webkit-clip-path: polygon(0 9%, 100% 43%, 100% 100%, 0 100%); clip-path: polygon(0 9%, 100% 43%, 100% 100%, 0 100%);}.jigglypuff__ear-left-inner:before { content: ''; height: 42%; width: 70%; border-radius: 50%; bottom: 0; left: -11%; position: absolute; background: var(--glare);}.jigglypuff__ear-right { height: 35%; width: 31%; border: calc(5 * var(--unit)) solid var(--border); background: var(--pink); right: 0%; top: 35%; transform-origin: 100% 0; transform: rotate(30deg); border-radius: 100% 5% 56% 0/51% 5% 65% 0;}.jigglypuff__ear-right:after { content: ''; background: var(--inner-ear); width: 61%; height: 68%; right: 4%; top: 11%; position: absolute; border-top: calc(5 * var(--unit)) solid var(--border); -webkit-clip-path: inset(0 0 97% 80%); clip-path: inset(0 0 97% 80%);}.jigglypuff__ear-right-inner { background: var(--inner-ear); width: 61%; height: 68%; right: 8%; top: 11%; border: calc(5 * var(--unit)) solid var(--border); border-radius: 95% 5% 46% 0/76% 5% 70% 0; overflow: hidden; box-shadow: calc(15 * var(--unit)) 0 calc(2 * var(--unit)) 0 var(--pink-dark);}.jigglypuff__ear-right-inner:before { content: ''; z-index: 2; background: var(--glare); height: 50%; width: 67%; border-radius: 50%; bottom: 4%; right: -20%; position: absolute;}.jigglypuff__mouth { top: 47%; left: 33%; transform-origin: 0 50%; height: 15%; width: 18%; border: calc(5 * var(--unit)) solid var(--border); border-radius: 50%; transform: rotate(16deg); -webkit-clip-path: polygon(50% 10%, 91% 100%, 5% 100%); clip-path: polygon(50% 10%, 91% 100%, 5% 100%);}.jigglypuff__tuft-container { top: 11%; left: 34%; height: 37%; width: 37%;}.jigglypuff__tuft-container:after { content: ''; position: absolute; bottom: 0; left: 6%; height: 50%; width: 54%; border-radius: 50%; border: calc(5 * var(--unit)) solid var(--border); background: var(--pink); -webkit-clip-path: polygon(100% 23%, 47% 100%, 100% 100%); clip-path: polygon(100% 23%, 47% 100%, 100% 100%);}.jigglypuff__tuft { background: var(--pink); height: 100%; width: 100%; border-radius: 85% 50% 50% 39%/80% 52% 50% 55%; border: calc(5 * var(--unit)) solid var(--border); -webkit-clip-path: polygon(0 0, 100% 0, 100% 43%, 33% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 43%, 33% 100%, 0 100%);}.jigglypuff__tuft-line { height: 25%; width: 34%; top: 62%; left: 40%; border-radius: 95% 0 0 0/61% 0 0 0; border-top: calc(5 * var(--unit)) solid var(--border);}.jigglypuff__eye-left { height: 24%; width: 21%; border: calc(5 * var(--unit)) solid var(--border); background: #fff; top: 34%; left: 16%; border-radius: 55% 45% 60% 40%/58% 41% 61% 42%;}.jigglypuff__eye-left:after { content: ''; position: absolute; right: 13%; top: 41%; height: 13%; width: 14%; background: #fff; -webkit-clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%); clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%); -webkit-animation: twinkle 1.5s 0.75s infinite; animation: twinkle 1.5s 0.75s infinite;}.jigglypuff__eye-left-pupil { border: calc(5 * var(--unit)) solid var(--border); height: 77%; width: 78%; right: 2%; top: 10%; border-radius: 55% 45% 60% 40%/58% 41% 61% 42%; background: radial-gradient(circle at 50% 120%, var(--eye-light) 40%, transparent 50%), radial-gradient(circle at 85% 34%, var(--pupil-backdrop), transparent), var(--eye-dark);}.jigglypuff__eye-left-pupil:after { content: ''; position: absolute; top: 11%; right: 10%; height: 25%; width: 26%; background: radial-gradient(#fff 75%, transparent); border-radius: 50%;}.jigglypuff__eye-left-pupil:before { content: ''; height: 20%; width: 28%; bottom: 5%; left: 18%; background: var(--glare); border-radius: 50%; position: absolute; z-index: 2;}.jigglypuff__eye-right { border: calc(5 * var(--unit)) solid var(--border); top: 46%; left: 51%; height: 25%; width: 21%; border-radius: 61% 48% 56% 50%/50% 50% 58% 50%; background: #fff;}.jigglypuff__eye-right:after { content: ''; position: absolute; right: 13%; top: 41%; height: 13%; width: 14%; background: #fff; -webkit-clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%); clip-path: polygon(20% 87%, 50% 66%, 80% 87%, 67% 54%, 96% 35%, 60% 35%, 50% 5%, 40% 35%, 4% 35%, 33% 54%); -webkit-animation: twinkle 2s infinite; animation: twinkle 2s infinite;}.jigglypuff__eye-right-pupil { height: 79%; width: 81%; right: 2%; top: 10%; overflow: hidden; border: calc(5 * var(--unit)) solid var(--border); border-radius: 61% 48% 56% 50%/50% 50% 58% 50%; background: radial-gradient(circle at 50% 120%, var(--eye-light) 40%, transparent 50%), radial-gradient(circle at 71% 24%, var(--pupil-backdrop), transparent), var(--eye-dark);}.jigglypuff__eye-right-pupil:after { content: ''; position: absolute; top: 7%; right: 15%; height: 24%; width: 27%; border-radius: 50%; background: radial-gradient(#fff 75%, transparent);}.jigglypuff__eye-right-pupil:before { content: ''; position: absolute; bottom: 5%; left: 18%; border-radius: 50%; height: 20%; width: 37%; background: var(--glare); z-index: 2;}label { margin-bottom: 1rem; z-index: 3;}:checked { z-index: 3;}:checked ~ .jigglypuff .jigglypuff__body { overflow: visible;}@-webkit-keyframes twinkle { 0% { transform: rotate(0deg) scale(0); } 50% { transform: rotate(540deg) scale(1.2); } 100% { transform: rotate(1080deg) scale(0); }}@keyframes twinkle { 0% { transform: rotate(0deg) scale(0); } 50% { transform: rotate(540deg) scale(1.2); } 100% { transform: rotate(1080deg) scale(0); }} </style></head><body> <label for="toggle">Toggle body overflow</label><input id="toggle" type="checkbox"/><div class="jigglypuff"> <div class="jigglypuff__left-arm"></div> <div class="jigglypuff__left-foot"></div> <div class="jigglypuff__right-foot"></div> <div class="jigglypuff__ear-left"> <div class="jigglypuff__ear-left-inner"></div> </div> <div class="jigglypuff__ear-right"> <div class="jigglypuff__ear-right-inner"></div> </div> <div class="jigglypuff__body"></div> <div class="jigglypuff__right-arm"></div> <div class="jigglypuff__mouth"></div> <div class="jigglypuff__eye-left"> <div class="jigglypuff__eye-left-pupil"></div> </div> <div class="jigglypuff__eye-right"> <div class="jigglypuff__eye-right-pupil"></div> </div> <div class="jigglypuff__tuft-container"> <div class="jigglypuff__tuft"></div> <div class="jigglypuff__tuft-line"></div> </div></div></body></html>...

CSS3动画：宠物躺着招手动画特效

2021年04月30日

CSS3动画的应用：宠物躺着招手动画特效。上次我也分享过类似的动画效果，没看过的可以先看看。CSS3动画：圆形脉冲动画先下我们今天要分享的宠物动画预览图：原理解析对于宠物动画，第一步我们需要先用CSS3画宠物的形状和涂色。这个是一个比较复杂的活，我们需要把宠物分很多小块去实现。比如：<div class="snorlax"> <div class="snorlax__head"> <div class="snorlax__head-outline"></div> <div class="snorlax__ear snorlax__ear--left"></div> <div class="snorlax__ear snorlax__ear--right"></div> <div class="snorlax__brow snorlax__brow--left"></div> <div class="snorlax__brow snorlax__brow--right"></div> <div class="snorlax__eye snorlax__eye--left"></div> <div class="snorlax__eye snorlax__eye--right"></div> <div class="snorlax__mouth"> <div class="snorlax__tooth snorlax__tooth--left"></div> <div class="snorlax__tooth snorlax__tooth--right"></div> </div> </div> <div class="snorlax__arm-left"> <div class="snorlax__arm-wrapper"> <div class="snorlax__claws--left"></div> <div class="snorlax__arm-left-arm"></div> </div> </div> <div class="snorlax__arm-right"> <div class="snorlax__claws--right"></div> <div class="snorlax__arm-right-arm"></div> <div class="snorlax__claw"></div> </div> <div class="snorlax__body"> <div class="snorlax__body-shade"></div> <div class="snorlax__belly"> <div class="snorlax__belly-segment snorlax__belly-segment--one"></div> <div class="snorlax__belly-segment snorlax__belly-segment--two"></div> </div> </div> <div class="snorlax__left-foot"> <div class="snorlax__left-foot-foot"></div> <div class="snorlax__foot-claw snorlax__foot-claw--one"> <div></div> </div> <div class="snorlax__foot-claw snorlax__foot-claw--two"> <div></div> </div> <div class="snorlax__foot-claw snorlax__foot-claw--three"> <div></div> </div> </div> <div class="snorlax__right-foot"> <div class="snorlax__right-foot-foot"></div> <div class="snorlax__foot-claw snorlax__foot-claw--four"> <div></div> </div> <div class="snorlax__foot-claw snorlax__foot-claw--five"> <div></div> </div> <div class="snorlax__foot-claw snorlax__foot-claw--six"> <div></div> </div> </div></div>然后针对每一小块进行CSS3编译。 *,*:after,*:before { box-sizing: border-box;}:root { --size: 60; --unit: calc((var(--size) / 300) * 1vmin); --belly: #f1debb; --dark-belly: #b59c78; --body: #355a50; --dark-body: #162c37; --foot: #965b3c; --claws: #fafafa;}body { min-height: 100vh; display: flex; align-items: center; background: #177082; justify-content: center;}.snorlax { height: calc(237 * var(--unit)); width: calc(300 * var(--unit)); position: relative;}.snorlax *,.snorlax *:after,.snorlax *:before { position: absolute;}.snorlax:before { content: ''; position: absolute; bottom: 0; width: 100%; height: 20%; border-radius: 50%; filter: blur(10px); opacity: 0.5; background: #111; transform: translate(-50%, 25%); left: 50%;}.snorlax__body { border-radius: 50% 45% 50% 50%/68% 50% 28% 30%; height: 74%; width: 79%; border: calc(2 * var(--unit)) solid #000; background: var(--body); overflow: hidden; top: 60%; left: 47%; transform: translate(-50%, -50%);}.snorlax__body-shade { background: var(--dark-body); height: 30%; width: 80%; bottom: 0; border-radius: 50%; left: 50%; transform: translate(-50%, 50%);}.snorlax__body-shade:after { content: ''; position: absolute; width: 25%; height: 150%; border-radius: 50%; background: var(--dark-body); left: 9%; bottom: 24%; transform: rotate(-22deg);}.snorlax__brow { background: var(--belly);}.snorlax__brow--left { width: 50%; height: 100%; left: 5%; top: 11%; border-radius: 65% 47% 0 50%/70% 39% 0 44%;}.snorlax__brow--right { width: 54%; height: 100%; right: 4%; top: 10%; overflow: hidden; border-radius: 45% 80% 0 50%/72% 77% 0 44%;}.snorlax__brow--right:before { content: ''; right: 0; height: 100%; width: 32%; bottom: 0; background: var(--dark-belly); z-index: 2;}.snorlax__brow--right:after { content: ''; right: 16%; height: 100%; width: 32%; bottom: 36%; background: var(--belly); z-index: 3; border-radius: 0 0 75% 0/0 0 36% 0;}.snorlax__eye { height: calc(2 * var(--unit)); width: 15%; background: #000; top: 33%; z-index: 5;}.snorlax__eye--left { left: 21%;}.snorlax__eye--right { right: 25%;}.snorlax__mouth { height: calc(2 * var(--unit)); width: 30%; background: #000; top: 52%; left: 48%; transform: translate(-50%, 0);}.snorlax__tooth { background: #000; height: 235%; width: 20%; bottom: 100%; -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%); clip-path: polygon(0 100%, 50% 0, 100% 100%);}.snorlax__tooth:after { content: ''; background: var(--claws); height: 100%; width: 100%; -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%); clip-path: polygon(0 100%, 50% 0, 100% 100%); transform-origin: bottom center; transform: scale(0.65);}.snorlax__tooth--left { left: 0;}.snorlax__tooth--right { right: 0;}.snorlax__head { height: 30%; width: 45%; left: 50%; top: 5%; transform: translate(-50%, 0);}.snorlax__head-outline { background: var(--body); height: 100%; width: 100%; border: calc(2 * var(--unit)) solid #000; border-radius: 75% 75% 25% 25%/110% 110% 0% 0%; overflow: hidden;}.snorlax__head-outline:after { content: ''; right: -5%; height: 110%; width: 15%; border-radius: 50%/50%; top: -5%; background: var(--dark-body);}.snorlax__ear { height: 64%; border: calc(2 * var(--unit)) solid #000; background: var(--body); top: -14%; width: 35%; position: absolute; overflow: hidden; border-radius: 15% 85% 0 10%/20% 100% 0 80%; -webkit-clip-path: polygon(0 0, 100% 0, 100% 18%, 0 90%); clip-path: polygon(0 0, 100% 0, 100% 18%, 0 90%);}.snorlax__ear:before { content: ''; top: 0; left: 0; background: var(--body); position: absolute; z-index: 2; height: 100%; width: 15%; border-radius: 28%; transform-origin: top center; transform: rotate(-67deg) translate(11%, 23%);}.snorlax__ear--left { left: 4%;}.snorlax__ear--right { right: 4%; top: -15%; transform: rotateY(180deg);}.snorlax__ear--right:after { content: ''; left: -10%; width: 25%; background: var(--dark-body); height: 100%; top: -10%; border-radius: 50%/50%;}.snorlax__belly { position: absolute; height: 50%; width: 82%; left: 50%; top: 0; transform: translate(-49%, 0%);}.snorlax__belly:after { content: ''; position: absolute; width: 58%; height: 50%; border-top: calc(10 * var(--unit)) solid var(--belly); top: 90%; left: 50%; -webkit-clip-path: polygon(5% 0, 79% 0, 90% 100%, 5% 100%); clip-path: polygon(5% 0, 79% 0, 90% 100%, 5% 100%); transform: translate(-50%, -26%); z-index: 3; border-radius: 50% 50% 0 0/50% 50% 50% 50%;}.snorlax__belly-segment--one { height: 83%; width: 100%; bottom: 0%; left: 0%; background: var(--belly); transform-origin: 0 100%; transform: translate(6.5%, 13%) rotate(-20deg); border-radius: 40% 55% 0 17%/60% 100% 0% 40%; -webkit-clip-path: polygon(0 0, 75% 0, 75% 100%, 0 100%); clip-path: polygon(0 0, 75% 0, 75% 100%, 0 100%); z-index: 2;}.snorlax__belly-segment--one:before { content: ''; position: absolute; top: 100%; background: var(--belly); left: 50%; height: 80%; width: 80%; border-radius: 10%; transform: translate(-50%, -81%) rotate(10deg);}.snorlax__belly-segment--two { height: 90%; width: 100%; bottom: 0%; right: 0%; transform-origin: 100% 100%; background: var(--dark-belly); transform: translate(-7%, 14%) rotate(20deg); border-radius: 0% 34% 34% 0/0% 60% 40% 0%; -webkit-clip-path: polygon(30% 0, 100% 0, 100% 150%, 30% 150%); clip-path: polygon(30% 0, 100% 0, 100% 150%, 30% 150%);}.snorlax__belly-segment--two:after { content: ''; position: absolute; right: 10%; top: -4%; width: 100%; height: 102%; transform-origin: right bottom; transform: rotate(-2deg); background: var(--belly); z-index: 3; border-radius: 0 14% 19% 0/0 50% 50% 0;}.snorlax__belly-segment--two:before { content: ''; background: var(--belly); position: absolute; z-index: 2; height: 50%; width: 50%; bottom: 0; left: 50%; transform: translate(-50%, 31%) rotate(-20deg);}.snorlax__arm-left { height: 85%; width: 24%; left: 12%; top: 14%; transform: rotate(-21deg);}.snorlax__claws--left { background: #000; top: -4%; width: 60%; height: 10%; left: 48%; -webkit-clip-path: polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%); clip-path: polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%); transform: translate(-50%, 0);}.snorlax__claws--left:after { content: ''; width: 100%; height: 100%; -webkit-clip-path: polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%); clip-path: polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%); transform-origin: bottom center; background: #fff; transform: scaleY(0.8) scaleX(0.95);}.snorlax__arm-left-arm { background: var(--body); height: 68%; width: 100%; top: 0; left: 0; border-radius: 44% 54% 50% 50%/50% 60% 40% 50%; transform-origin: 50% 60%; transform: rotate(0deg); overflow: hidden; border: calc(2 * var(--unit)) solid #000;}.snorlax__arm-left-arm:after { content: ''; right: 0; width: 50%; background: var(--dark-body); height: 120%; top: 50%; transform: translate(56%, -50%) rotate(-15deg); border-radius: 50%; -webkit-clip-path: inset(0 50% 0 0); clip-path: inset(0 50% 0 0); -webkit-animation: fade 6s infinite linear; animation: fade 6s infinite linear;}@-webkit-keyframes fade { 0%, 100% { opacity: 1; } 50% { opacity: 0; }}@keyframes fade { 0%, 100% { opacity: 1; } 50% { opacity: 0; }}.snorlax__arm-wrapper { -webkit-animation: wave 6s infinite ease; animation: wave 6s infinite ease; height: 100%; width: 100%; transform-origin: 56% 41%;}@-webkit-keyframes wave { 0, 100% { transform: rotate(0deg); } 50% { transform: rotate(-100deg); }}@keyframes wave { 0, 100% { transform: rotate(0deg); } 50% { transform: rotate(-100deg); }}.snorlax__arm-right { height: 50%; width: 17%; right: 7%; top: 28%; transform: rotate(-39deg);}.snorlax__claw { bottom: 0; width: 15%; height: 9%; background: #000; transform: translate(109%, 19%) rotate(45deg); -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%);}.snorlax__claw:after { content: ''; -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); height: 100%; width: 100%; background: #fff; transform: scale(0.5);}.snorlax__arm-right-arm { height: 100%; width: 100%; border-radius: 25% 75% 65% 35%/56% 60% 40% 30%; background: var(--dark-body); overflow: hidden; border: calc(2 * var(--unit)) solid #000;}.snorlax__arm-right-arm:after { content: ''; height: 100%; width: 130%; border-radius: 50%; background: var(--body); bottom: 8%; left: -9%;}.snorlax__claws--right { bottom: -6%; left: 25%; height: 22%; width: 57%; background: #000; -webkit-clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0); clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0);}.snorlax__claws--right:after { height: 100%; width: 100%; content: ''; background: #fff; -webkit-clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0); clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0); transform-origin: top center; transform: scaleY(0.85) scaleX(0.85);}.snorlax__left-foot { height: 34%; width: 29%; bottom: 0; left: 2.5%;}.snorlax__left-foot-foot { height: 100%; width: 100%; top: 0; left: 0; background: var(--belly); border-radius: 60% 40% 55% 40%/60% 45% 55% 40%; border: calc(2 * (var(--unit))) solid #000; overflow: hidden;}.snorlax__left-foot-foot:after,.snorlax__left-foot-foot:before { content: '';}.snorlax__left-foot-foot:after { border: calc(2 * var(--unit)) solid #000; height: 38%; width: 49%; border-radius: 50%; background: var(--foot); left: 38%; bottom: 11%; transform: rotate(-36deg);}.snorlax__left-foot-foot:before { background: var(--dark-belly); height: 73%; width: 100%; left: 32%; bottom: 0; transform-origin: left center; border-radius: 61% 20% 20% 37%/73% 50% 50% 50%; transform: rotate(10deg);}.snorlax__foot-claw { top: 50%; left: 50%; width: 20%; height: 30%;}.snorlax__foot-claw:after { content: ''; background: var(--claws); bottom: 12%; height: 35%; width: 67%; left: 15%; border-radius: 50%;}.snorlax__foot-claw:before { content: ''; bottom: 2%; left: 0; width: 100%; height: 56%; border-radius: 50%; background: var(--claws); border: calc(3 * var(--unit)) solid #000;}.snorlax__foot-claw > div { width: 100%; height: 66%; top: 0; left: 0; background: #000; -webkit-clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%); clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%);}.snorlax__foot-claw > div:after { content: ''; height: 100%; width: 100%; background: var(--claws); bottom: 0; left: 0; transform-origin: bottom center; transform: scale(0.7); -webkit-clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%); clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%);}.snorlax__foot-claw--one { --clip-point: 65; left: -5%; top: 52%; transform: rotate(-90deg); width: 15%; height: 23%;}.snorlax__foot-claw--two { --clip-point: 50; top: 9%; left: 3%; height: 26%; transform: rotate(-45deg);}.snorlax__foot-claw--three { --clip-point: 20; top: -10%; left: 34%; width: 21%; height: 25%;}.snorlax__foot-claw--four { --clip-point: 20; top: -18%; left: 49%; width: 21%; height: 34%; transform: rotate(45deg);}.snorlax__foot-claw--five { --clip-point: 50; top: 0%; left: 78%; width: 21%; height: 31%; transform: rotate(40deg);}.snorlax__foot-claw--six { --clip-point: 50; top: 37%; left: 95%; width: 19%; height: 27%; transform: rotate(90deg);}.snorlax__right-foot { bottom: 0; right: 6.5%; width: 28%; height: 35%;}.snorlax__right-foot-foot { height: 100%; width: 100%; border: calc(2 * var(--unit)) solid #000; background: var(--belly); overflow: hidden; border-radius: 50% 50% 50% 50%/50% 45% 55% 50%;}.snorlax__right-foot-foot:before,.snorlax__right-foot-foot:after { content: ''; bottom: 0;}.snorlax__right-foot-foot:before { left: 5%; border-radius: 50%; height: 62%; width: 77%; background: var(--dark-belly);}.snorlax__right-foot-foot:after { left: 10%; border-radius: 50%; border: calc(2 * var(--unit)) solid #000; bottom: 14%; height: 42%; background: var(--foot); width: 55%;}最后我们，我们根据要求，对宠物需要做动画的部分设置动画效果。完整的DEMO代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS3动画：宠物躺着招手动画特效 | WEB前端之家https://www.jiangweishan.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> *,*:after,*:before { box-sizing: border-box;}:root { --size: 60; --unit: calc((var(--size) / 300) * 1vmin); --belly: #f1debb; --dark-belly: #b59c78; --body: #355a50; --dark-body: #162c37; --foot: #965b3c; --claws: #fafafa;}body { min-height: 100vh; display: flex; align-items: center; background: #177082; justify-content: center;}.snorlax { height: calc(237 * var(--unit)); width: calc(300 * var(--unit)); position: relative;}.snorlax *,.snorlax *:after,.snorlax *:before { position: absolute;}.snorlax:before { content: ''; position: absolute; bottom: 0; width: 100%; height: 20%; border-radius: 50%; filter: blur(10px); opacity: 0.5; background: #111; transform: translate(-50%, 25%); left: 50%;}.snorlax__body { border-radius: 50% 45% 50% 50%/68% 50% 28% 30%; height: 74%; width: 79%; border: calc(2 * var(--unit)) solid #000; background: var(--body); overflow: hidden; top: 60%; left: 47%; transform: translate(-50%, -50%);}.snorlax__body-shade { background: var(--dark-body); height: 30%; width: 80%; bottom: 0; border-radius: 50%; left: 50%; transform: translate(-50%, 50%);}.snorlax__body-shade:after { content: ''; position: absolute; width: 25%; height: 150%; border-radius: 50%; background: var(--dark-body); left: 9%; bottom: 24%; transform: rotate(-22deg);}.snorlax__brow { background: var(--belly);}.snorlax__brow--left { width: 50%; height: 100%; left: 5%; top: 11%; border-radius: 65% 47% 0 50%/70% 39% 0 44%;}.snorlax__brow--right { width: 54%; height: 100%; right: 4%; top: 10%; overflow: hidden; border-radius: 45% 80% 0 50%/72% 77% 0 44%;}.snorlax__brow--right:before { content: ''; right: 0; height: 100%; width: 32%; bottom: 0; background: var(--dark-belly); z-index: 2;}.snorlax__brow--right:after { content: ''; right: 16%; height: 100%; width: 32%; bottom: 36%; background: var(--belly); z-index: 3; border-radius: 0 0 75% 0/0 0 36% 0;}.snorlax__eye { height: calc(2 * var(--unit)); width: 15%; background: #000; top: 33%; z-index: 5;}.snorlax__eye--left { left: 21%;}.snorlax__eye--right { right: 25%;}.snorlax__mouth { height: calc(2 * var(--unit)); width: 30%; background: #000; top: 52%; left: 48%; transform: translate(-50%, 0);}.snorlax__tooth { background: #000; height: 235%; width: 20%; bottom: 100%; -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%); clip-path: polygon(0 100%, 50% 0, 100% 100%);}.snorlax__tooth:after { content: ''; background: var(--claws); height: 100%; width: 100%; -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%); clip-path: polygon(0 100%, 50% 0, 100% 100%); transform-origin: bottom center; transform: scale(0.65);}.snorlax__tooth--left { left: 0;}.snorlax__tooth--right { right: 0;}.snorlax__head { height: 30%; width: 45%; left: 50%; top: 5%; transform: translate(-50%, 0);}.snorlax__head-outline { background: var(--body); height: 100%; width: 100%; border: calc(2 * var(--unit)) solid #000; border-radius: 75% 75% 25% 25%/110% 110% 0% 0%; overflow: hidden;}.snorlax__head-outline:after { content: ''; right: -5%; height: 110%; width: 15%; border-radius: 50%/50%; top: -5%; background: var(--dark-body);}.snorlax__ear { height: 64%; border: calc(2 * var(--unit)) solid #000; background: var(--body); top: -14%; width: 35%; position: absolute; overflow: hidden; border-radius: 15% 85% 0 10%/20% 100% 0 80%; -webkit-clip-path: polygon(0 0, 100% 0, 100% 18%, 0 90%); clip-path: polygon(0 0, 100% 0, 100% 18%, 0 90%);}.snorlax__ear:before { content: ''; top: 0; left: 0; background: var(--body); position: absolute; z-index: 2; height: 100%; width: 15%; border-radius: 28%; transform-origin: top center; transform: rotate(-67deg) translate(11%, 23%);}.snorlax__ear--left { left: 4%;}.snorlax__ear--right { right: 4%; top: -15%; transform: rotateY(180deg);}.snorlax__ear--right:after { content: ''; left: -10%; width: 25%; background: var(--dark-body); height: 100%; top: -10%; border-radius: 50%/50%;}.snorlax__belly { position: absolute; height: 50%; width: 82%; left: 50%; top: 0; transform: translate(-49%, 0%);}.snorlax__belly:after { content: ''; position: absolute; width: 58%; height: 50%; border-top: calc(10 * var(--unit)) solid var(--belly); top: 90%; left: 50%; -webkit-clip-path: polygon(5% 0, 79% 0, 90% 100%, 5% 100%); clip-path: polygon(5% 0, 79% 0, 90% 100%, 5% 100%); transform: translate(-50%, -26%); z-index: 3; border-radius: 50% 50% 0 0/50% 50% 50% 50%;}.snorlax__belly-segment--one { height: 83%; width: 100%; bottom: 0%; left: 0%; background: var(--belly); transform-origin: 0 100%; transform: translate(6.5%, 13%) rotate(-20deg); border-radius: 40% 55% 0 17%/60% 100% 0% 40%; -webkit-clip-path: polygon(0 0, 75% 0, 75% 100%, 0 100%); clip-path: polygon(0 0, 75% 0, 75% 100%, 0 100%); z-index: 2;}.snorlax__belly-segment--one:before { content: ''; position: absolute; top: 100%; background: var(--belly); left: 50%; height: 80%; width: 80%; border-radius: 10%; transform: translate(-50%, -81%) rotate(10deg);}.snorlax__belly-segment--two { height: 90%; width: 100%; bottom: 0%; right: 0%; transform-origin: 100% 100%; background: var(--dark-belly); transform: translate(-7%, 14%) rotate(20deg); border-radius: 0% 34% 34% 0/0% 60% 40% 0%; -webkit-clip-path: polygon(30% 0, 100% 0, 100% 150%, 30% 150%); clip-path: polygon(30% 0, 100% 0, 100% 150%, 30% 150%);}.snorlax__belly-segment--two:after { content: ''; position: absolute; right: 10%; top: -4%; width: 100%; height: 102%; transform-origin: right bottom; transform: rotate(-2deg); background: var(--belly); z-index: 3; border-radius: 0 14% 19% 0/0 50% 50% 0;}.snorlax__belly-segment--two:before { content: ''; background: var(--belly); position: absolute; z-index: 2; height: 50%; width: 50%; bottom: 0; left: 50%; transform: translate(-50%, 31%) rotate(-20deg);}.snorlax__arm-left { height: 85%; width: 24%; left: 12%; top: 14%; transform: rotate(-21deg);}.snorlax__claws--left { background: #000; top: -4%; width: 60%; height: 10%; left: 48%; -webkit-clip-path: polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%); clip-path: polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%); transform: translate(-50%, 0);}.snorlax__claws--left:after { content: ''; width: 100%; height: 100%; -webkit-clip-path: polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%); clip-path: polygon(7% 100%, 7% 39%, 25% 73%, 22% 11%, 39% 42%, 49% 0, 61% 46%, 74% 11%, 79% 58%, 95% 44%, 90% 100%); transform-origin: bottom center; background: #fff; transform: scaleY(0.8) scaleX(0.95);}.snorlax__arm-left-arm { background: var(--body); height: 68%; width: 100%; top: 0; left: 0; border-radius: 44% 54% 50% 50%/50% 60% 40% 50%; transform-origin: 50% 60%; transform: rotate(0deg); overflow: hidden; border: calc(2 * var(--unit)) solid #000;}.snorlax__arm-left-arm:after { content: ''; right: 0; width: 50%; background: var(--dark-body); height: 120%; top: 50%; transform: translate(56%, -50%) rotate(-15deg); border-radius: 50%; -webkit-clip-path: inset(0 50% 0 0); clip-path: inset(0 50% 0 0); -webkit-animation: fade 6s infinite linear; animation: fade 6s infinite linear;}@-webkit-keyframes fade { 0%, 100% { opacity: 1; } 50% { opacity: 0; }}@keyframes fade { 0%, 100% { opacity: 1; } 50% { opacity: 0; }}.snorlax__arm-wrapper { -webkit-animation: wave 6s infinite ease; animation: wave 6s infinite ease; height: 100%; width: 100%; transform-origin: 56% 41%;}@-webkit-keyframes wave { 0, 100% { transform: rotate(0deg); } 50% { transform: rotate(-100deg); }}@keyframes wave { 0, 100% { transform: rotate(0deg); } 50% { transform: rotate(-100deg); }}.snorlax__arm-right { height: 50%; width: 17%; right: 7%; top: 28%; transform: rotate(-39deg);}.snorlax__claw { bottom: 0; width: 15%; height: 9%; background: #000; transform: translate(109%, 19%) rotate(45deg); -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%);}.snorlax__claw:after { content: ''; -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); height: 100%; width: 100%; background: #fff; transform: scale(0.5);}.snorlax__arm-right-arm { height: 100%; width: 100%; border-radius: 25% 75% 65% 35%/56% 60% 40% 30%; background: var(--dark-body); overflow: hidden; border: calc(2 * var(--unit)) solid #000;}.snorlax__arm-right-arm:after { content: ''; height: 100%; width: 130%; border-radius: 50%; background: var(--body); bottom: 8%; left: -9%;}.snorlax__claws--right { bottom: -6%; left: 25%; height: 22%; width: 57%; background: #000; -webkit-clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0); clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0);}.snorlax__claws--right:after { height: 100%; width: 100%; content: ''; background: #fff; -webkit-clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0); clip-path: polygon(20% 0, 16% 100%, 35% 78%, 55% 97%, 63% 69%, 85% 78%, 85% 56%, 100% 66%, 100% 0); transform-origin: top center; transform: scaleY(0.85) scaleX(0.85);}.snorlax__left-foot { height: 34%; width: 29%; bottom: 0; left: 2.5%;}.snorlax__left-foot-foot { height: 100%; width: 100%; top: 0; left: 0; background: var(--belly); border-radius: 60% 40% 55% 40%/60% 45% 55% 40%; border: calc(2 * (var(--unit))) solid #000; overflow: hidden;}.snorlax__left-foot-foot:after,.snorlax__left-foot-foot:before { content: '';}.snorlax__left-foot-foot:after { border: calc(2 * var(--unit)) solid #000; height: 38%; width: 49%; border-radius: 50%; background: var(--foot); left: 38%; bottom: 11%; transform: rotate(-36deg);}.snorlax__left-foot-foot:before { background: var(--dark-belly); height: 73%; width: 100%; left: 32%; bottom: 0; transform-origin: left center; border-radius: 61% 20% 20% 37%/73% 50% 50% 50%; transform: rotate(10deg);}.snorlax__foot-claw { top: 50%; left: 50%; width: 20%; height: 30%;}.snorlax__foot-claw:after { content: ''; background: var(--claws); bottom: 12%; height: 35%; width: 67%; left: 15%; border-radius: 50%;}.snorlax__foot-claw:before { content: ''; bottom: 2%; left: 0; width: 100%; height: 56%; border-radius: 50%; background: var(--claws); border: calc(3 * var(--unit)) solid #000;}.snorlax__foot-claw > div { width: 100%; height: 66%; top: 0; left: 0; background: #000; -webkit-clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%); clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%);}.snorlax__foot-claw > div:after { content: ''; height: 100%; width: 100%; background: var(--claws); bottom: 0; left: 0; transform-origin: bottom center; transform: scale(0.7); -webkit-clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%); clip-path: polygon(0 100%, calc(var(--clip-point) * 1%) 0, 100% 100%);}.snorlax__foot-claw--one { --clip-point: 65; left: -5%; top: 52%; transform: rotate(-90deg); width: 15%; height: 23%;}.snorlax__foot-claw--two { --clip-point: 50; top: 9%; left: 3%; height: 26%; transform: rotate(-45deg);}.snorlax__foot-claw--three { --clip-point: 20; top: -10%; left: 34%; width: 21%; height: 25%;}.snorlax__foot-claw--four { --clip-point: 20; top: -18%; left: 49%; width: 21%; height: 34%; transform: rotate(45deg);}.snorlax__foot-claw--five { --clip-point: 50; top: 0%; left: 78%; width: 21%; height: 31%; transform: rotate(40deg);}.snorlax__foot-claw--six { --clip-point: 50; top: 37%; left: 95%; width: 19%; height: 27%; transform: rotate(90deg);}.snorlax__right-foot { bottom: 0; right: 6.5%; width: 28%; height: 35%;}.snorlax__right-foot-foot { height: 100%; width: 100%; border: calc(2 * var(--unit)) solid #000; background: var(--belly); overflow: hidden; border-radius: 50% 50% 50% 50%/50% 45% 55% 50%;}.snorlax__right-foot-foot:before,.snorlax__right-foot-foot:after { content: ''; bottom: 0;}.snorlax__right-foot-foot:before { left: 5%; border-radius: 50%; height: 62%; width: 77%; background: var(--dark-belly);}.snorlax__right-foot-foot:after { left: 10%; border-radius: 50%; border: calc(2 * var(--unit)) solid #000; bottom: 14%; height: 42%; background: var(--foot); width: 55%;}</style></head><body> <div class="snorlax"> <div class="snorlax__head"> <div class="snorlax__head-outline"></div> <div class="snorlax__ear snorlax__ear--left"></div> <div class="snorlax__ear snorlax__ear--right"></div> <div class="snorlax__brow snorlax__brow--left"></div> <div class="snorlax__brow snorlax__brow--right"></div> <div class="snorlax__eye snorlax__eye--left"></div> <div class="snorlax__eye snorlax__eye--right"></div> <div class="snorlax__mouth"> <div class="snorlax__tooth snorlax__tooth--left"></div> <div class="snorlax__tooth snorlax__tooth--right"></div> </div> </div> <div class="snorlax__arm-left"> <div class="snorlax__arm-wrapper"> <div class="snorlax__claws--left"></div> <div class="snorlax__arm-left-arm"></div> </div> </div> <div class="snorlax__arm-right"> <div class="snorlax__claws--right"></div> <div class="snorlax__arm-right-arm"></div> <div class="snorlax__claw"></div> </div> <div class="snorlax__body"> <div class="snorlax__body-shade"></div> <div class="snorlax__belly"> <div class="snorlax__belly-segment snorlax__belly-segment--one"></div> <div class="snorlax__belly-segment snorlax__belly-segment--two"></div> </div> </div> <div class="snorlax__left-foot"> <div class="snorlax__left-foot-foot"></div> <div class="snorlax__foot-claw snorlax__foot-claw--one"> <div></div> </div> <div class="snorlax__foot-claw snorlax__foot-claw--two"> <div></div> </div> <div class="snorlax__foot-claw snorlax__foot-claw--three"> <div></div> </div> </div> <div class="snorlax__right-foot"> <div class="snorlax__right-foot-foot"></div> <div class="snorlax__foot-claw snorlax__foot-claw--four"> <div></div> </div> <div class="snorlax__foot-claw snorlax__foot-claw--five"> <div></div> </div> <div class="snorlax__foot-claw snorlax__foot-claw--six"> <div></div> </div> </div></div></body></html>...

Web前端之家推荐：功能最全的CSS3渐变生成器

2021年04月19日

CSS3渐变生成器。首先我们来看一张界面图：看到效果图后，相信大家就知道这个工具的大概用途了，其实就是用来根据PS里的渐变来生成相关的CSS代码。在网上有很多类似的工具，但是个人觉得都不咋滴，不是功能太差，就是兼容不好，有些难用。相信了解完此款，会“爱上它”。GOGOGO!!!简介除了平时的普通功能，它还有更高级的工具，例如滴管，拾色器，调色板编辑器和网站分析器。如您所知，HTML5为Web开发人员引入了许多令人兴奋的功能。功能之一是能够使用纯CSS3指定渐变，而无需创建任何图像并将其用作渐变效果的重复背景。重要提示：您需要使用Firefox，Chrome，Safari，Opera或IE的最新版本才能使用此GradientGenerator。它们将在这些浏览器中运行，并且在较旧版本的InternetExplorer中也将退回到更简单的渐变。特征这款工具强大之处，就是几乎包含我们想要的功能，例如：强大的类似Photoshop的界面跨浏览器CSS输出水平，垂直，对角和径向渐变复杂的多级渐变不透明度支持多个不透明度十六进制，RGB，RGBA，HSL，HSLA颜色格式IE9支持完整的多级渐变从图像导入（将图像渐变转换为CSS）从现有CSS导入通过色相，饱和度，亮度调整渐变超过135个渐变预设保存自定义渐变预设Sass输出灵活的预览面板用于发送和共享的渐变永久链接帮助主渐变控件使您能够：通过拖动停止标记来调整渐变停止位置通过双击停止标记来调整停止颜色通过向上或向下拖动停止标记来删除停止通过单击现有停止标记之间的任意位置来添加新的停止您可以使用“停止”面板来更精确地控制颜色和当前所选停靠点的位置。“预览”面板允许以垂直或水平方式预览当前渐变，还可以快速预览IE中InternetExplorer后备渐变的外观。最后，“CSS”面板始终具有用于当前渐变的CSS，以便于轻松复制和粘贴到样式表中。您也可以使用此面板将现有的渐变CSS导入到该工具中。浏览器兼容性最后上下工具的地址：功能最全的CSS3渐变生成器。您也可以点击页面上导航进入工具页面：总结上述内容，只是大概陈述了一些基本知识，具体的需要大家自己慢慢研究下，其实不难。希望此款工具能够方便到大家，如果您有任何问题，都可以加QQ群讨论。...

CSS3动画：圆形脉冲动画

2021年02月08日

CSS3动画：圆形脉冲动画 - Web前端之家https://www.jiangweishan.com</title> <style> body { background: #e1ad01; } .pulse { position: absolute; left: 50%; top: 50%; transform: scale(1.5, 1.5) translate(-50%, -50%); height: 150px; width: 150px; background: #a83f39; border-radius: 50%; } </style></head><body> <div class="pulse"> </div><script> </script></body></html>要创建脉冲动画，我们使用box-shadow属性。如果您从未使用box-shadow过，Mozilla会提供一些出色的文档：@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(168, 63, 57, 0.4); } 70% { box-shadow: 0 0 0 50px rgba(168, 63, 57, 0); } 100% { box-shadow: 0 0 0 150px rgba(168, 63, 57, 0); } }要使用此动画，我们只需将其添加到.pulse：.pulse { .... animation: pulse 2s infinite; }现在，我们创建了脉冲动画。看下完整的DEMO特效。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3动画：圆形脉冲动画 - Web前端之家https://www.jiangweishan.com</title> <style> body { background: #e1ad01; } .pulse { position: absolute; left: 50%; top: 50%; transform: scale(1.5, 1.5) translate(-50%, -50%); height: 150px; width: 150px; background: #a83f39; border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(168, 63, 57, 0.4); } 70% { box-shadow: 0 0 0 50px rgba(168, 63, 57, 0); } 100% { box-shadow: 0 0 0 150px rgba(168, 63, 57, 0); } } </style></head><body> <div class="pulse"> </div><script> </script></body></html>大家试试效果，是不是很酷呢？赶紧应用到你们的项目中去吧！！！！...

CSS3酷炫动画：手把手教您使用纯CSS制作蜡烛动画

2021年02月07日

通过此动画，我们将使用一些基本的CSS绘图。然后，我们将使用CSS创建触发事件。最后，我们将模拟火焰（尽我们所能！）。注意：您将在下面看到我使用绝对定位和变换来定位HTML元素，这是使用CSS绘制时的好技巧。下面是我们要使用CSS绘制的内容：如果愿意，您可以跟着我。我已经建立了一个基础笔，它建立了一切的基础。因此，我们首先绘制蜡烛的底座（桌子表面）。我们将为表的颜色和宽度使用一些SCSS变量：// table dimensions$tableWidth: 280px;$tableHeight: 10px;$tableBackground: #8b4513;该表基本上是div具有某些尺寸的。我们可以将HTML更新为如下所示：<div class="wrapper"> <div class="table"></div></div>现在，我们添加一些基本的SCSS（用于transform将表格居中）：.table { position: absolute; left: 50%; top: 50%; width: $tableWidth; height: $tableHeight; background: $tableBackground; transform: translate(-50%, -50%); z-index: 2;}这看起来有些毫无生气。CSS绘图的技巧是使用box-shadow，因此我们将其添加到：.table { .... box-shadow: 0px 2px 5px #111;}现在，您应该具有：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS蜡烛动画 - Web前端之家https://www.jiangweishan.com</title> <style> body { margin: 0;}.wrapper { background-color: #2a2a35; height: 100vh; width: 100vw;}.table { position: absolute; left: 50%; top: 50%; width: 280px; height: 10px; background: #8b4513; transform: translate(-50%, -50%); z-index: 2; box-shadow: 0px 2px 5px #111;} </style></head><body> <div class="wrapper"> <div class="table"></div> </div> <script> </script></body></html>太棒了！现在让我们在那张桌子上放一支蜡烛。我们将为我们的蜡烛尺寸和颜色设置一些SCSS变量（随意使用您想要的任何尺寸）：// candle$candleWidth: 35px;$candleHeight: 130px;$candleBorderColor: #673c63;$stickWidth: 3px;$stickHeight: 15px;如果检查一下我之前显示的蜡烛的图像，您会发现它本质上是div一个border上面有一根大棒的蜡烛。首先让我们自己绘制蜡烛。我们首先更新HTML：<div class="wrapper"> <div class="candle"> </div> <div class="table"></div></div>现在，我们添加我们的CSS（同样，box-shadow这里是技巧）：.candle { position: absolute; left: 50%; top: 50%; width: $candleWidth; height: $candleHeight; background: #fff; transform-origin: center right; transform: translate(-50%, -100%); box-shadow: -2px 0px 0px #95c6f2 inset; border: 3px solid $candleBorderColor;}我们有蜡烛！现在，我们在上面添加棍子（我们已经在上面包括了尺寸）。我们首先需要将其添加到我们的HTML中：<div class="wrapper"> <div class="candle"> <div class="candle-stick"></div> </div> <div class="table"></div></div>CSS（这里没什么花哨的）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS蜡烛动画 - Web前端之家https://www.jiangweishan.com</title> <style> body { margin: 0;}.wrapper { background-color: #2a2a35; height: 100vh; width: 100vw;}.table { position: absolute; left: 50%; top: 50%; width: 280px; height: 10px; background: #8b4513; transform: translate(-50%, -50%); z-index: 2; box-shadow: 0px 2px 5px #111;}.candle { position: absolute; left: 50%; top: 50%; width: 35px; height: 130px; background: #fff; transform-origin: center right; transform: translate(-50%, -100%); box-shadow: -2px 0px 0px #95c6f2 inset; border: 3px solid #673c63;}.candle-stick { width: 3px; height: 15px; background: #673c63; position: absolute; left: 50%; top: 0%; background: #673c63; border-radius: 8px; transform: translate(-50%, -100%);} </style></head><body> <div class="wrapper"> <div class="candle"> <div class="candle-stick"></div> </div> <div class="table"></div> </div> <script> </script></body></html>如您所见，这里没有动画，因此让我们开始制作动画。我们将首先添加一个按钮，该按钮会将背景颜色从浅色更改为深色（我们已经设置了这些SCSS变量—$lightBackground和$darkBackground）。将此添加到HTML的最顶部：<input id="toggle" type="checkbox"><label for="toggle">Trigger Candle</label>这会给我们一个不太吸引人的复选框和标签。因此，让我们对其进行样式设置，使其看起来更好一些：label { background: #a5d6a7; padding: 0.5rem 1rem; border-radius: 0.5rem; position: absolute; font: 900 24px/1.4 -system-ui, sans-serif; transform: translate(50%, 50%); cursor: pointer;}这为标签提供了一些样式，但是我们也想从视图中隐藏复选框。现在，我们可以通过将hidden属性添加到复选框HTML来做到这一点。但是，这会使键盘导航器无法访问该复选框，因此更好的选择是将其移出视线。首先，让我们.visually-hidden为复选框HTML添加一个类：<input id="toggle" type="checkbox" class="visually-hidden">然后，使用此CSS将复选框移到左侧：.visually-hidden { position: absolute; left: -100vw;}当复选框具有焦点时，我们还提供视觉提示：input:checked + label { outline: 1px dotted red;}（如果您想知道为什么在HTML中将放置在input之前label，现在您知道为什么了。这样我们就可以使用同级选择器（+）。稍后再使用。）现在，您可能不喜欢按钮周围的红色虚线轮廓，但我将留给您提出更好的建议。（例如，您可以改为更改标签的背景色。）这是我们现在拥有的：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS蜡烛动画 - Web前端之家https://www.jiangweishan.com</title> <style> body { margin: 0;}.wrapper { background-color: #2a2a35; height: 100vh; width: 100vw;}.table { position: absolute; left: 50%; top: 50%; width: 280px; height: 10px; background: #8b4513; transform: translate(-50%, -50%); z-index: 2; box-shadow: 0px 2px 5px #111;}.candle { position: absolute; left: 50%; top: 50%; width: 35px; height: 130px; background: #fff; transform-origin: center right; transform: translate(-50%, -100%); box-shadow: -2px 0px 0px #95c6f2 inset; border: 3px solid #673c63;}.candle-stick { width: 3px; height: 15px; background: #673c63; position: absolute; left: 50%; top: 0%; background: #673c63; border-radius: 8px; transform: translate(-50%, -100%);}label { background: #a5d6a7; padding: 0.5rem 1rem; border-radius: 0.5rem; position: absolute; font: 900 24px/1.4 -system-ui, sans-serif; transform: translate(50%, 50%); cursor: pointer;}.visually-hidden { position: absolute; left: -100vw;}input:checked + label { outline: 1px dotted red;} </style></head><body> <input id="toggle" type="checkbox" class="visually-hidden"> <label for="toggle">Trigger Candle</label> <div class="wrapper"> <div class="candle"> <div class="candle-stick"></div> </div> <div class="table"></div> </div><script> </script></body></html>让我们根据是否选中复选框来更改页面背景。我们可以通过使用常规的同级选择器来执行此操作而无需使用JavaScript ~：#toggle:checked ~ .wrapper { background: $lightBackground;}现在我们还可以添加一个过渡，使过渡更加平滑：.wrapper { background-color: $darkBackground; height: 100vh; width: 100vw; transition: background-color 0.6s ease;}我们现在有这个：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS蜡烛动画 - Web前端之家https://www.jiangweishan.com</title> <style> body { margin: 0;}.wrapper { background-color: #2a2a35; height: 100vh; width: 100vw; transition: background-color 0.6s ease;}.table { position: absolute; left: 50%; top: 50%; width: 280px; height: 10px; background: #8b4513; transform: translate(-50%, -50%); z-index: 2; box-shadow: 0px 2px 5px #111;}.candle { position: absolute; left: 50%; top: 50%; width: 35px; height: 130px; background: #fff; transform-origin: center right; transform: translate(-50%, -100%); box-shadow: -2px 0px 0px #95c6f2 inset; border: 3px solid #673c63;}.candle-stick { width: 3px; height: 15px; background: #673c63; position: absolute; left: 50%; top: 0%; background: #673c63; border-radius: 8px; transform: translate(-50%, -100%);}label { background: #a5d6a7; padding: 0.5rem 1rem; border-radius: 0.5rem; position: absolute; font: 900 24px/1.4 -system-ui, sans-serif; transform: translate(50%, 50%); cursor: pointer;}.visually-hidden { position: absolute; left: -100vw;}input:checked + label { outline: 1px dotted red;}#toggle:checked ~ .wrapper { background: #ffffe0;} </style></head><body> <input id="toggle" type="checkbox" class="visually-hidden"> <label for="toggle">Trigger Candle</label> <div class="wrapper"> <div class="candle"> <div class="candle-stick"></div> </div> <div class="table"></div> </div><script> </script></body></html>我们要做的另一件事是在背景明亮时添加火焰。和以前一样，我们设置SCSS变量：// flame$flameHeight: 20px;$flameWidth: 16px;$flameColor1: #e25822;$flameColor2: #e2b822;让我们还更新HTML以使其包含火焰：<label for="toggle">Trigger Candle</label><input id="toggle" type="checkbox" hidden><div class="wrapper"> <div class="candle"> <div class="candle-stick"></div> <div class="flame"></div> </div> <div class="table"></div></div>我们的火焰底数需要使用border-radius八个值。在绘制复杂形状时，FancyBorderRadiusGenerator网站非常适合border-radius为您生成。所以这是我们的CSS（border-radius是关键部分）：.flame { width: $flameWidth; height: $flameHeight; background: #673c63; position: absolute; left: 50%; top: 0%; background: $flameColor1; transform: translate(-50%, -170%); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;}现在，我们可以添加一些动画，使其像真实的火焰一样闪烁。我们将在两种颜色（$flameColor1和$flameColor2）之间更改火焰，并且还将在左右两侧稍微改变位置。首先，这是关键帧代码：@keyframes fire-flicker { from { background: $flameColor1; left: 47%; } to { background: $flameColor2; left: 53%; }}然后，我们需要将此动画添加到flame类中：animation: fire-flicker 0.2s infinite linear;现在，我们的火焰将闪烁：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS蜡烛动画 - Web前端之家https://www.jiangweishan.com</title> <style> body { margin: 0;}.wrapper { background-color: #2a2a35; height: 100vh; width: 100vw; transition: background-color 0.6s ease;}.table { position: absolute; left: 50%; top: 50%; width: 280px; height: 10px; background: #8b4513; transform: translate(-50%, -50%); z-index: 2; box-shadow: 0px 2px 5px #111;}.candle { position: absolute; left: 50%; top: 50%; width: 35px; height: 130px; background: #fff; transform-origin: center right; transform: translate(-50%, -100%); box-shadow: -2px 0px 0px #95c6f2 inset; border: 3px solid #673c63;}.candle-stick { width: 3px; height: 15px; background: #673c63; position: absolute; left: 50%; top: 0%; background: #673c63; border-radius: 8px; transform: translate(-50%, -100%);}label { background: #a5d6a7; padding: 0.5rem 1rem; border-radius: 0.5rem; position: absolute; font: 900 24px/1.4 -system-ui, sans-serif; transform: translate(50%, 50%); cursor: pointer;}.visually-hidden { position: absolute; left: -100vw;}input:checked + label { outline: 1px dotted red;}#toggle:checked ~ .wrapper { background: #ffffe0;}.flame { width: 16px; height: 20px; background: #673c63; position: absolute; left: 50%; top: 0%; background: #e25822; transform: translate(-50%, -170%); border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; animation: fire-flicker 0.2s infinite linear;}@keyframes fire-flicker { from { background: #e25822; left: 47%; } to { background: #e2b822; left: 53%; }} </style></head><body> <input id="toggle" type="checkbox" class="visually-hidden"> <label for="toggle">Trigger Candle</label> <div class="wrapper"> <div class="candle"> <div class="candle-stick"></div> <div class="flame"></div> </div> <div class="table"></div> </div><script> </script></body></html>随时尝试改善它，因为它可能会更好！好吧，让我们做进一步的调整。当背景较暗时，我们将关闭火焰。我们将使用它opacity来实现这一目标。在flame课程上，添加不透明度。我们还将向其添加一个过渡，使其与匹配background：.flame { ... opacity: 0; transition: opacity 0.6s ease; }然后，我们可以使用SCSS的功能以及checked状态的一些嵌套：#toggle:checked ~ .wrapper { background: $lightBackground; .flame { opacity: 1; } }现在，火焰仅在明亮的背景下显示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS蜡烛动画 - Web前端之家https://www.jiangweishan.com</title> <style> body { margin: 0;}.wrapper { background-color: #2a2a35; height: 100vh; width: 100vw; transition: background-color 0.6s ease;}.table { position: absolute; left: 50%; top: 50%; width: 280px; height: 10px; background: #8b4513; transform: translate(-50%, -50%); z-index: 2; box-shadow: 0px 2px 5px #111;}.candle { position: absolute; left: 50%; top: 50%; width: 35px; height: 130px; background: #fff; transform-origin: center right; transform: translate(-50%, -100%); box-shadow: -2px 0px 0px #95c6f2 inset; border: 3px solid #673c63;}.candle-stick { width: 3px; height: 15px; background: #673c63; position: absolute; left: 50%; top: 0%; background: #673c63; border-radius: 8px; transform: translate(-50%, -100%);}label { background: #a5d6a7; padding: 0.5rem 1rem; border-radius: 0.5rem; position: absolute; font: 900 24px/1.4 -system-ui, sans-serif; transform: translate(50%, 50%); cursor: pointer;}.visually-hidden { position: absolute; left: -100vw;}input:checked + label { outline: 1px dotted red;}#toggle:checked ~ .wrapper { background: #ffffe0;}#toggle:checked ~ .wrapper .flame { opacity: 1;}.flame { width: 16px; height: 20px; background: #673c63; position: absolute; left: 50%; top: 0%; background: #e25822; transform: translate(-50%, -170%); border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; animation: fire-flicker 0.2s infinite linear; opacity: 0; transition: opacity 0.6s ease;}@keyframes fire-flicker { from { background: #e25822; left: 47%; } to { background: #e2b822; left: 53%; }} </style></head><body> <input id="toggle" type="checkbox" class="visually-hidden"><label for="toggle">Trigger Candle</label><div class="wrapper"> <div class="candle"> <div class="candle-stick"></div> <div class="flame"></div> </div> <div class="table"></div></div><script> </script></body></html>最后，标签的“触发蜡烛”文本有点平淡。我们可以做很多事情！因此，让我们改进标签，使文本在“Lumos”和“Nox”之间切换–当然是受哈利·波特的启发！首先，我们可以将标签更改为不包含文本（我们将content在其中添加文本）：<label for="toggle"></label>现在，我们将添加一些CSS来切换文本：label::after { content: "Lumos";}#toggle:checked ~ label::after { content: "Nox";}为了阻止标签跳动，让我们添加以下样式：label { ... min-width: 100px; text-align: center;}我们终于得到它了。我们的蜡烛动画完成了-几乎没有JavaScript！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS蜡烛动画 - Web前端之家https://www.jiangweishan.com</title> <style> body { margin: 0; } .wrapper { background-color: #2a2a35; height: 100vh; width: 100vw; transition: background-color 0.6s ease; } .table { position: absolute; left: 50%; top: 50%; width: 280px; height: 10px; background: #8b4513; transform: translate(-50%, -50%); z-index: 2; box-shadow: 0px 2px 5px #111; } .candle { position: absolute; left: 50%; top: 50%; width: 35px; height: 130px; background: #fff; transform-origin: center right; transform: translate(-50%, -100%); box-shadow: -2px 0px 0px #95c6f2 inset; border: 3px solid #673c63; } .candle-stick { width: 3px; height: 15px; background: #673c63; position: absolute; left: 50%; top: 0%; background: #673c63; border-radius: 8px; transform: translate(-50%, -100%); } label { background: #a5d6a7; padding: 0.5rem 1rem; border-radius: 0.5rem; position: absolute; font: 900 24px/1.4 -system-ui, sans-serif; transform: translate(50%, 50%); cursor: pointer; min-width: 100px; text-align: center; } .visually-hidden { position: absolute; left: -100vw; } input:checked + label { outline: 1px dotted red; } #toggle:checked ~ .wrapper { background: #ffffe0; } #toggle:checked ~ .wrapper .flame { opacity: 1; } .flame { width: 16px; height: 20px; background: #673c63; position: absolute; left: 50%; top: 0%; background: #e25822; transform: translate(-50%, -170%); border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; animation: fire-flicker 0.2s infinite linear; opacity: 0; transition: opacity 0.6s ease; } @keyframes fire-flicker { from { background: #e25822; left: 47%; } to { background: #e2b822; left: 53%; } } label::after { content: "Lumos"; } #toggle:checked ~ label::after { content: "Nox"; } </style></head><body> <input id="toggle" type="checkbox" class="visually-hidden"> <label for="toggle"></label> <div class="wrapper"> <div class="candle"> <div class="candle-stick"></div> <div class="flame"></div> </div> <div class="table"></div> </div><script> </script></body></html>...

纯CSS3绘制游戏手柄并且涂色酷炫效果

2021年02月06日

CSS3的效果，默认和点击分别实现颜色变化功能。走起吧，直击分享主题：纯CSS3绘制游戏手柄并且涂色酷炫效果。有兴趣的朋友可以进来看看哟，先上个效果图再说咯。先用CSS绘制出手柄的设计图，然后在实现功能。默认和点击分别实现颜色变化，通过点击“ToggleCSSillustration”和“Hideimage”去控制。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>纯CSS3绘制游戏手柄并且涂色酷炫效果-Web前端之家https://www.jiangweishan.com</title><style>*,*:before,*:after{box-sizing:border-box;}img{position:absolute;top:50%;left:50%;width:75vmin;transform:translate(-50%,-50%);opacity:0.5;z-index:2;}[type='checkbox']{margin-bottom:2rem;}label{margin-bottom:0.5rem;font-weight:bold;font-family:sans-serif;color:#fafdff;}#toggle:checked~.container.controller{display:block;}#image:checked~.containerimg{display:none;}:root{--bg:#005ca3;--accent:#0a45f5;--desired-size:75;--controller-white:#f1f1f4;--controller-black:#1f1f1f;--unit:calc((var(--desired-size)/1920)*1vmin);}body{min-height:100vh;background:var(--bg);overflow:auto;display:flex;align-items:center;justify-content:center;flex-direction:column;}.container{position:relative;width:calc(1920*var(--unit));height:calc(1080*var(--unit));}.controller{display:none;}.controller__container{width:calc(1920*var(--unit));height:calc(1080*var(--unit));position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}.controller__container:before{content:'';position:absolute;bottom:0;left:50%;width:80%;height:35%;z-index:-1;background:radial-gradient(rgba(13,13,13,0.5),transparent50%);filter:blur(25px);transform:translate(-50%,24%);}.controller__body{width:calc(1330*var(--unit));height:calc(880*var(--unit));position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}.controller__body:before,.controller__body:after{content:'';position:absolute;z-index:-1;bottom:0;height:15%;width:40%;filter:blur(25px);background:radial-gradient(#0d0d0d,transparent75%);}.controller__body:before{transform:translate(-25%,50%);left:0;}.controller__body:after{right:0;transform:translate(25%,50%);}.controller__body-top{width:200%;height:125%;background:var(--controller-white);top:1%;left:50%;border-radius:75%75%00/100%100%00;position:absolute;transform:translate(-50%,0%);}.controller__body-top--center{-webkit-clip-path:inset(032.5%52%32.5%);clip-path:inset(032.5%52%32.5%);transform:translate(-50%,0.4%);background:#dcdee4;}.controller__body-top--left{-webkit-clip-path:inset(062.5%52%30.5%);clip-path:inset(062.5%52%30.5%);}.controller__body-top--right{-webkit-clip-path:inset(030.5%52%62.5%);clip-path:inset(030.5%52%62.5%);}.controller__grip{--mirrored:0;--size:250;height:calc(var(--size)*var(--unit));width:calc(var(--size)*var(--unit));background:var(--controller-white);border-radius:25%20%25%25%/25%25%25%25%;top:5%;position:absolute;transform:rotateY(calc(var(--mirrored)*180deg))rotate(-10.75deg);}.controller__gripdiv:nth-of-type(1){background:var(--controller-white);height:360%;width:100%;position:absolute;transform-origin:topleft;transform:rotate(19deg)translate(-26%,-8%);border-radius:95%0069%;-webkit-clip-path:inset(7.78%050%0);clip-path:inset(7.78%050%0);}.controller__gripdiv:nth-of-type(2){background:var(--controller-white);height:360%;width:100%;position:absolute;transform-origin:topleft;transform:rotate(19deg)translate(-26%,-12%);border-radius:100%013%60%/63%025%44%;-webkit-clip-path:inset(50%000);clip-path:inset(50%000);}.controller__gripdiv:nth-of-type(3){position:absolute;background:var(--controller-white);height:200%;width:15%;left:0%;top:230%;transform-origin:bottomcenter;border-radius:100%/50%;transform:rotate(32deg)translate(-671%,-32%);}.controller__gripdiv:nth-of-type(4){position:absolute;}.controller__grip--left{left:12%;}.controller__grip--right{--mirrored:1;right:12%;}.controller__sticks-container{position:absolute;left:50%;top:25%;width:85%;height:76%;overflow:hidden;transform:translate(-50%,0%);}.controller__sticks{height:38%;width:60%;background:var(--controller-black);position:absolute;top:15%;left:50%;transform:translate(-50%,0);border-radius:19%/50%;}.controller__sticks>div{--lightness:rgba(166,166,166,0.15);position:absolute;height:100%;width:38%;top:0;border-radius:50%;}.controller__sticks>div:before{content:'';background:linear-gradient(-30deg,var(--lightness),transparent,var(--lightness));height:100%;width:100%;position:absolute;border-radius:50%;filter:blur(3px);}.controller__sticks>div:after{box-sizing:border-box;content:'';height:90%;width:90%;position:absolute;border-radius:50%;border:calc(5*var(--unit))solidvar(--lightness);filter:blur(6px);top:50%;left:50%;transform:translate(-50%,-50%);}.controller__sticks>div:nth-of-type(1){left:0;}.controller__sticks>div:nth-of-type(2){right:0;}.controller__sticks>div:nth-of-type(2).controller__stick{transform:translate(-47%,-55%);}.controller__stick{height:82%;width:82%;background:#262626;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-53%,-55%);}.controller__stick>div:nth-of-type(1){border:var(--unit)solid#000;height:85%;width:85%;transform:translate(-50%,-50%);background:linear-gradient(5deg,rgba(255,255,255,0.1),#1a1a1a,rgba(255,255,255,0.1),#1a1a1a,rgba(255,255,255,0.1));position:absolute;border-radius:50%;top:50%;left:50%;}.controller__stick>div:nth-of-type(1)div{height:95%;width:95%;background:#1a1a1a;border-radius:50%;position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;}.controller__stick>div:nth-of-type(2){background:repeating-conic-gradient(rgba(26,26,26,0.5)1deg,rgba(153,153,153,0.5)6deg),#666;filter:blur(1px);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:75%;height:75%;box-shadow:calc(-4*var(--unit))calc(2*var(--unit))calc(20*var(--unit))calc(2*var(--unit))#080808inset;}.controller__stick>div:nth-of-type(2)div{position:absolute;top:50%;left:50%;background:radial-gradient(circleat80%100%,#262626,transparent),#666;transform:translate(-50%,-50%);border-radius:50%;width:60%;height:60%;box-shadow:calc(1*var(--unit))calc(2*var(--unit))calc(13*var(--unit))calc(2*var(--unit))rgba(255,255,255,0.35),calc(-5*var(--unit))calc(-2*var(--unit))calc(10*var(--unit))calc(8*var(--unit))#262626,calc(5*var(--unit))calc(4*var(--unit))calc(10*var(--unit))calc(8*var(--unit))#262626;}.controller__backdrop{height:60%;width:100%;background:var(--controller-black);}.controller__clip{background:var(--bg);width:65%;height:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,3%);border-radius:15%15%00/22%22%00;-webkit-clip-path:inset(0080%0);clip-path:inset(0080%0);}.controller__grip-underlay{--mirrored:0;position:absolute;width:50%;height:150%;top:0;transform:rotateY(calc(var(--mirrored)*180deg))translate(-57%,-37%)rotate(10deg);}.controller__grip-underlay:before{content:'';position:absolute;bottom:0;right:0;background:var(--controller-white);border-radius:50%/50%;height:40%;width:4%;transform-origin:bottomcenter;transform:translate(-253%,0%)rotate(12deg);}.controller__grip-underlay:after{content:'';position:absolute;bottom:0;right:0;background:var(--controller-black);height:5%;width:20%;border-radius:004%0/0025%0;transform:translate(-59%,-2%);}.controller__grip-underlaydiv:nth-of-type(1){background:var(--controller-white);position:absolute;bottom:0;right:0;width:100%;height:100%;-webkit-clip-path:polygon(00,100%0,100%70%,85%99.5%,0100%);clip-path:polygon(00,100%0,100%70%,85%99.5%,0100%);}.controller__grip-underlaydiv:nth-of-type(2){background:var(--controller-black);position:absolute;height:100%;width:26%;right:0;bottom:0;transform:translate(44%,23.5%)rotate(14deg);border-radius:100%00100%/50%0050%;-webkit-clip-path:polygon(025%,60%25%,54%77%,079%);clip-path:polygon(025%,60%25%,54%77%,079%);}.controller__grip-underlaydiv:nth-of-type(2):after{content:'';background:var(--controller-white);position:absolute;bottom:0;right:0;width:50%;height:61%;border-radius:100%00100%/50%00100%;}.controller__grip-underlaydiv:nth-of-type(3){background:var(--controller-white);position:absolute;bottom:0;width:10%;height:7%;right:21%;z-index:2;transform:translate(0%,-3%)rotate(0deg);border-radius:0065%0/00100%0;}.controller__grip-underlaydiv:nth-of-type(4){position:absolute;background:var(--controller-white);width:40%;height:25%;top:21%;right:-15%;transform:rotate(30deg)translate(-7%,-2%);border-radius:0100%00/064%00;}.controller__grip-underlay--left{left:0;}.controller__grip-underlay--right{--mirrored:1;right:0;}.controller__touch-pad{--touch-pad-inset:#aaa1a1;--touch-pad-fade:rgba(255,255,255,0.15);position:absolute;width:42%;height:34.5%;left:50%;top:1.5%;transform:translate(-50%,0);border-radius:50%50%00/8%8%00;overflow:hidden;}.controller__touch-pad:after{content:'';position:absolute;background:linear-gradient(#b3b3b3,#fff,transparent);top:0;left:50%;width:95%;height:30%;transform:translate(-50%,0);border-radius:18%18%00/50%50%00;opacity:0.5;-webkit-clip-path:polygon(-2%0,102%0,98%100%,2%100%);clip-path:polygon(-2%0,102%0,98%100%,2%100%);}.controller__touch-pad>div:nth-of-type(1){width:86%;height:100%;background:var(--touch-pad-fade);left:50%;position:absolute;transform:translate(-50%,0);border-radius:0014%14%/0025%25%;}.controller__touch-pad>div:nth-of-type(1):before{content:'';position:absolute;bottom:0;width:65%;height:25%;left:50%;background:var(--touch-pad-fade);transform:translate(-50%,0);}.controller__touch-pad>div:nth-of-type(1):after{content:'';position:absolute;bottom:0;left:50%;height:5%;width:20%;border-radius:50%;background:radial-gradient(#fff,transparent);filter:blur(3px);transform:translate(-50%,50%);}.controller__touch-pad>div:nth-of-type(1)div{--mirrored:0;background:var(--touch-pad-fade);position:absolute;height:100%;width:15%;border-radius:80%0090%/13%0030%;overflow:hidden;transform:rotateY(calc(var(--mirrored)*180deg))rotate(-11.5deg)translate(-23%,2%);}.controller__touch-pad>div:nth-of-type(1)div:before{content:'';position:absolute;width:100%;height:20%;top:0;left:0;background:var(--touch-pad-inset);}.controller__touch-pad>div:nth-of-type(1)div:after{content:'';position:absolute;top:8%;left:0;width:100%;height:100%;border-radius:50%000/10%000;background:linear-gradient(var(--accent)15%65%,transparent85%);}.controller__touch-pad>div:nth-of-type(1)div:nth-of-type(1){top:0;left:0;}.controller__touch-pad>div:nth-of-type(1)div:nth-of-type(2){--mirrored:1;top:0;right:0;}.controller__touch-pad>div:nth-of-type(2){position:absolute;top:0;left:50%;height:94%;width:81%;background:var(--controller-white);transform:translate(-50%,0);border-radius:0015%15%/0025%25%;}.controller__touch-pad>div:nth-of-type(2):after,.controller__touch-pad>div:nth-of-type(2):before{content:'';position:absolute;top:0;height:100%;background:var(--controller-white);width:15%;}.controller__touch-pad>div:nth-of-type(2):before{left:0;border-radius:100%0085%/12%0025%;transform:rotate(-12deg)translate(-27%,0);}.controller__touch-pad>div:nth-of-type(2):after{right:0;border-radius:0100%85%0/012%25%0;transform:rotate(12deg)translate(27%,0);}.controller__speaker{position:absolute;top:39%;left:50%;display:flex;flex-direction:row;transform:translate(-50%,0);}.controller__speakerdiv{--size:12;background:#0d0d0d;height:calc(var(--size)*var(--unit));width:calc(var(--size)*var(--unit));border-radius:50%;box-shadow:calc(-0.75*var(--unit))calc(0.5*var(--unit))calc(0.75*var(--unit))calc(0.5*var(--unit))insetrgba(255,255,255,0.25);}.controller__speakerdiv:nth-of-type(odd){transform:translate(0,-98%)scale(1.2);}.controller__speakerdiv:nth-of-type(even){transform:translate(0,70%)scale(1.2);}.controller__start{position:absolute;background:linear-gradient(transparent68%,rgba(255,255,255,0.5)70%,transparent72%),#333;top:57.5%;left:50%;border-radius:15%/50%;width:calc(68*var(--unit));height:calc(var(--unit)*18);transform:translate(-50%,-50%);box-shadow:00calc(0*var(--unit))calc(4*var(--unit))#000,00calc(0*var(--unit))calc(1*var(--unit))rgba(255,255,255,0.5)inset;}.controller__headphone{position:absolute;left:50%;top:63.5%;border-radius:50%;width:calc(20*var(--unit));height:calc(8*var(--unit));background:#000;transform:translate(-50%,0);}.controller__buttons{position:absolute;top:23.75%;left:70.25%;height:calc(90*var(--unit));width:calc(90*var(--unit));}.controller__button{height:100%;width:100%;border-radius:50%;position:absolute;box-shadow:00calc(4*var(--unit))calc(4*var(--unit))rgba(115,115,115,0.35)inset;border:calc(2*var(--unit))solid#0d0d0d;}.controller__button:after,.controller__button:before{content:'';position:absolute;width:75%;height:75%;top:50%;left:50%;transform:translate(-50%,-50%);}.controller__button--square{transform:translate(0,0);}.controller__button--square:before{width:55%;height:55%;border:calc(4*var(--unit))solid#404040;}.controller__button--triangle{transform:translate(108%,-108%);}.controller__button--triangle:after,.controller__button--triangle:before{-webkit-clip-path:polygon(50%0%,100%100%,0100%);clip-path:polygon(50%0%,100%100%,0100%);}.controller__button--triangle:before{height:60%;width:65%;background:#404040;transform:translate(-50%,-50%)translate(0,-16%);}.controller__button--triangle:after{background:var(--controller-white);height:48%;width:49%;transform:translate(-50%,-50%)translate(0,-16%);}.controller__button--cross{transform:translate(108%,108%);}.controller__button--cross:after,.controller__button--cross:before{height:calc(4*var(--unit));background:#404040;width:70%;}.controller__button--cross:after{transform:translate(-50%,-50%)rotate(45deg);}.controller__button--cross:before{transform:translate(-50%,-50%)rotate(-45deg);}.controller__button--circle{transform:translate(216%,0%);}.controller__button--circle:before{width:70%;height:70%;border-radius:50%;border:calc(4*var(--unit))solid#404040;}.controller__dpad{position:absolute;width:calc(84*var(--unit));height:calc(100*var(--unit));top:16%;left:calc(210*var(--unit));}.controller__dbutton{position:absolute;height:100%;width:100%;background:#666;top:0;left:0;transform-origin:bottomcenter;-webkit-clip-path:polygon(00,100%0,100%25%,93%70%,57%100%,50%100%,43%100%,7%70%,025%);clip-path:polygon(00,100%0,100%25%,93%70%,57%100%,50%100%,43%100%,7%70%,025%);border-radius:35%35%00/27%27%00;}.controller__dbutton--top{transform:translate(0,0);}.controller__dbutton--right{transform:translate(0,12%)rotate(90deg)translate(0,-14%);}.controller__dbutton--bottom{transform:translate(0,12%)rotate(-180deg)translate(0,-14%);}.controller__dbutton--left{transform:translate(0,12%)rotate(-90deg)translate(0,-14%);}.controller__dbutton>div{background:rgba(242,242,242,0.75);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:35%/27%;width:85%;height:85%;-webkit-clip-path:polygon(00,100%0,93%70%,57%100%,50%100%,43%100%,7%70%);clip-path:polygon(00,100%0,93%70%,57%100%,50%100%,43%100%,7%70%);}.controller__dbutton>div:after,.controller__dbutton>div:before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}.controller__dbutton>div:before{background:var(--controller-white);height:90%;background:var(--controller-white);width:90%;border-radius:35%/27%;-webkit-clip-path:polygon(00,100%0,93%70%,57%100%,50%100%,43%100%,7%70%);clip-path:polygon(00,100%0,93%70%,57%100%,50%100%,43%100%,7%70%);}.controller__dbutton>div:after{background:#404040;top:26%;width:28%;height:14%;-webkit-clip-path:polygon(0100%,50%0,100%100%);clip-path:polygon(0100%,50%0,100%100%);}.controller__trigger{--mirrored:0;height:calc(80*var(--unit));width:calc(254*var(--unit));background:var(--controller-black);position:absolute;transform:translate(0%,0)rotateY(calc(var(--mirrored)*180deg))translate(-13%,3%)rotate(-11deg);border-radius:60%50%00/100%100%00;-webkit-clip-path:polygon(19%0,9%100%,86%100%,86%0);clip-path:polygon(19%0,9%100%,86%100%,86%0);overflow:hidden;}.controller__trigger:after,.controller__trigger:before{content:'';position:absolute;top:0;left:50%;}.controller__trigger:before{height:25%;width:75%;transform:translate(-50%,0);background:linear-gradient(transparent25%,rgba(255,255,255,0.25));}.controller__trigger:after{height:75%;top:25%;width:100%;transform:translate(-50%,0);background:linear-gradient(90deg,transparent019%,rgba(255,255,255,0.5),transparent45%55%),linear-gradient(90deg,transparent069%,rgba(255,255,255,0.5),transparent80%);}.controller__trigger--left{left:12%;}.controller__trigger--right{--mirrored:1;right:12%;}.controller__auxiliary-button{--mirrored:0;position:absolute;top:9%;border:calc(2*var(--unit))solid#262626;border-radius:50%/30%;background:var(--controller-white);box-shadow:00calc(2*var(--unit))calc(2*var(--unit))rgba(115,115,115,0.5)inset;height:calc(62*var(--unit));width:calc(34*var(--unit));transform:rotateY(calc(var(--mirrored)*180deg))rotate(-12deg)translate(-18%,-4%);}.controller__auxiliary-button>div{position:absolute;top:0;left:50%;}.controller__auxiliary-button--share{left:26%;}.controller__auxiliary-button--share>div{background:#a6a6a6;height:24%;width:10%;transform-origin:bottomcenter;transform:translate(50%,-200%)rotate(12deg);}.controller__auxiliary-button--share>div:after,.controller__auxiliary-button--share>div:before{content:'';position:absolute;bottom:0;left:0;height:70%;width:100%;background:#a6a6a6;transform-origin:50%220%;}.controller__auxiliary-button--share>div:before{transform:rotate(-33deg);}.controller__auxiliary-button--share>div:after{transform:rotate(33deg);}.controller__auxiliary-button--options{--mirrored:1;right:26%;}.controller__auxiliary-button--options>div{background:#a6a6a6;width:10%;height:30%;transform:translate(0,-160%)rotate(102deg)translate(0,-22%);}.controller__auxiliary-button--options>div:after,.controller__auxiliary-button--options>div:before{content:'';position:absolute;bottom:0;left:0;height:100%;width:100%;background:#a6a6a6;}.controller__auxiliary-button--options>div:before{transform:translate(-250%,0);}.controller__auxiliary-button--options>div:after{transform:translate(250%,0);}.controller__logo{position:absolute;top:50%;left:50%;width:calc(90*var(--unit));height:calc(70*var(--unit));transform:translate(-50%,-74%);}.controller__logo>div:nth-of-type(2){height:96%;width:22%;background:var(--controller-black);position:absolute;top:50%;left:50%;border:calc(3*var(--unit))solid#0d0d0d;transform:translate(-71%,-50%)skewY(15deg);}.controller__logo>div:nth-of-type(2):after,.controller__logo>div:nth-of-type(2):before{content:'';position:absolute;}.controller__logo>div:nth-of-type(2):before{left:108%;top:-5%;width:150%;height:62%;background:var(--controller-black);border:calc(3*var(--unit))solid#0d0d0d;border-radius:050%50%0;}.controller__logo>div:nth-of-type(2):after{left:0%;width:230%;box-shadow:00calc(2*var(--unit))calc(2*var(--unit))rgba(255,255,255,0.5)inset;height:20%;background:var(--controller-black);border-radius:030%00/0100%00;-webkit-clip-path:polygon(00,100%0,100%80%,030%);clip-path:polygon(00,100%0,100%80%,030%);}.controller__logo>div:nth-of-type(1){position:absolute;height:38%;transform-origin:bottomcenter;width:122%;bottom:0;left:32%;transform:skewX(62deg)rotate(-13deg)translate(-2%,-21%);}.controller__logo>div:nth-of-type(1)div:after{content:'';position:absolute;top:50%;left:50%;width:70%;height:25%;background:#0d0d0d;transform:translate(-50%,-50%);border-radius:25%/50%;}.controller__logo>div:nth-of-type(1)div:nth-of-type(1){height:54%;background:var(--controller-black);position:absolute;top:45%;width:100%;-webkit-clip-path:polygon(57%0,100%0,100%100%,19%100%);clip-path:polygon(57%0,100%0,100%100%,19%100%);border-radius:25%/50%;box-shadow:calc(-1*var(--unit))calc(1*var(--unit))calc(1*var(--unit))calc(1*var(--unit))rgba(255,255,255,0.5)inset;border:calc(2.5*var(--unit))solid#0d0d0d;}.controller__logo>div:nth-of-type(1)div:nth-of-type(2){border:calc(2*var(--unit))solid#0d0d0d;top:2%;width:100%;left:2%;position:absolute;box-shadow:calc(-1*var(--unit))calc(1*var(--unit))calc(1*var(--unit))calc(1*var(--unit))rgba(255,255,255,0.5)inset;height:58%;background:var(--controller-black);border-radius:35%/50%;-webkit-clip-path:polygon(00,85%0,40%100%,0%100%);clip-path:polygon(00,85%0,40%100%,0%100%);}.controller__mute{position:absolute;width:calc(20*var(--unit));height:calc(20*var(--unit));top:60%;left:50%;transform:translate(-50%,0);}.controller__mute>div:nth-of-type(1){position:absolute;top:38%;left:50%;width:62%;height:36%;background:#808080;border-radius:0025%25%/0050%50%;transform:translate(-50%,0);}.controller__mute>div:nth-of-type(1):after,.controller__mute>div:nth-of-type(1):before{content:'';position:absolute;}.controller__mute>div:nth-of-type(1):before{height:200%;width:80%;background:#808080;border:var(--unit)solidvar(--controller-black);border-radius:25%;position:absolute;left:50%;top:0;transform:translate(-50%,-60%);}.controller__mute>div:nth-of-type(1):after{width:150%;height:50%;border-radius:25%/25%;background:#808080;border:var(--unit)solidvar(--controller-black);top:50%;left:50%;transform:translate(-50%,-159%)rotate(45deg);}.controller__mute>div:nth-of-type(2){position:absolute;bottom:0;left:50%;background:#808080;transform:translate(-50%,0);width:60%;height:15%;border-radius:25%;}.controller__mute>div:nth-of-type(2):after{content:'';left:50%;bottom:0;height:200%;background:#808080;width:25%;position:absolute;transform:translate(-50%,0);}.controller__patch{--mirrrored:0;position:absolute;bottom:1.5%;height:25%;width:7%;background:var(--controller-white);border-radius:50%/50%;transform-origin:bottomcenter;}.controller__patch--left{left:4%;transform:rotate(6deg);}.controller__patch--right{right:4%;transform:rotate(-6deg);}</style></head><body><labelfor="toggle">ToggleCSSillustration</label><inputid="toggle"type="checkbox"/><labelfor="image">Hideimage</label><inputid="image"type="checkbox"/><divclass="container"><divclass="controller"><divclass="controller__container"><divclass="controller__body"><divclass="controller__triggercontroller__trigger--left"></div><divclass="controller__triggercontroller__trigger--right"></div><divclass="controller__body-topcontroller__body-top--left"></div><divclass="controller__body-topcontroller__body-top--right"></div><divclass="controller__body-topcontroller__body-top--center"></div><divclass="controller__gripcontroller__grip--left"><div></div><div></div><div></div><div></div></div><divclass="controller__gripcontroller__grip--right"><div></div><div></div><div></div><div></div></div><divclass="controller__sticks-container"><divclass="controller__backdrop"></div><divclass="controller__clip"></div><divclass="controller__grip-underlaycontroller__grip-underlay--left"><div></div><div></div><div></div><div></div></div><divclass="controller__grip-underlaycontroller__grip-underlay--right"><div></div><div></div><div></div><div></div></div><divclass="controller__sticks"><div><divclass="controller__stick"><div><div></div></div><div><div></div></div></div></div><div><divclass="controller__stick"><div><div></div></div><div><div></div></div></div></div></div></div><divclass="controller__touch-pad"><div><div></div><div></div></div><div><div></div><div></div></div></div><divclass="controller__speaker"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><divclass="controller__start"></div><divclass="controller__headphone"></div><divclass="controller__buttons"><divclass="controller__buttoncontroller__button--triangle"></div><divclass="controller__buttoncontroller__button--square"></div><divclass="controller__buttoncontroller__button--circle"></div><divclass="controller__buttoncontroller__button--cross"></div></div><divclass="controller__dpad"><divclass="controller__dbuttoncontroller__dbutton--top"><div></div></div><divclass="controller__dbuttoncontroller__dbutton--right"><div></div></div><divclass="controller__dbuttoncontroller__dbutton--bottom"><div></div></div><divclass="controller__dbuttoncontroller__dbutton--left"><div></div></div></div><divclass="controller__auxiliary-buttoncontroller__auxiliary-button--share"><div></div></div><divclass="controller__auxiliary-buttoncontroller__auxiliary-button--options"><div></div></div><divclass="controller__logo"><div><div></div><div></div></div><div></div></div><divclass="controller__mute"><div></div><div></div></div><divclass="controller__patchcontroller__patch--left"></div><divclass="controller__patchcontroller__patch--right"></div></div></div></div></div><script></script></body></html>试试吧。...

分享一个纯CSS3实现的绘制动画效果：可爱宠物

2021年02月05日

CSS3实现的绘制动画效果，想弄出来这个效果，需要很大的耐心哟。先来看下效果图，如下：废话不多说，直接上代码。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>分享一个纯CSS3实现的绘制动画效果：可爱宠物-Web前端之家https://jiangweishan.com/</title><style>*{box-sizing:border-box;}:root{--coefficient:1vmin;--size:50;--min-size:200;--unit:calc((var(--size)/493)*var(--coefficient));--stroke:#0d0d0d;--lip-color:#ffb3b3;--cheek-color:#ff8080;--tongue-color:#f33;--cap-color:#47c20a;--leaf-color:#369108;--backdrop:#0e8134;--eye-shade:#4d3c33;--fur-color:#b4a088;--face:#f2f2f2;--eye:#f2f2f2;--outfit:#f2a60d;--pupil:#0a3a5c;--pot-color:#fc6;--default-petal-color:#f00;--cap-accent:#ffd500;--peak-color:#2d7906;--flower-core:#f2cc0d;--stroke-border:calc(5*var(--unit))solidvar(--stroke);}body{min-height:100vh;background:#ffb3b3;}img,.leif{height:calc(511*var(--unit));width:calc(493*var(--unit));position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}.leif*,.leif*:after,.leif*:before{position:absolute;}.leif__himself{height:100%;width:100%;-webkit-clip-path:circle(50%at50%38%);clip-path:circle(50%at50%38%);}.leif__container{height:100%;width:100%;-webkit-animation:pop-in0.5s1sbothcubic-bezier(0.58,0.68,0.71,1.41);animation:pop-in0.5s1sbothcubic-bezier(0.58,0.68,0.71,1.41);}.leif__eye-closed{-webkit-animation:blink-closed8sinfinitesteps(1);animation:blink-closed8sinfinitesteps(1);border:calc(10*var(--unit))solidvar(--stroke);-webkit-clip-path:polygon(045%,100%60%,100%100%,0100%);clip-path:polygon(045%,100%60%,100%100%,0100%);border-radius:50%;}.leif__eye-closed--left{height:18%;left:12%;width:14%;bottom:51%;}.leif__eye-closed--right{height:19%;left:48%;width:16%;bottom:45%;}.leif__arch{height:100%;width:100%;border-radius:50%;background:var(--backdrop);bottom:12%;border:var(--stroke-border);}.leif__eye-open{-webkit-animation:blink-open8sinfinitesteps(1);animation:blink-open8sinfinitesteps(1);}.leif__eye-open--left{height:18%;left:12%;width:14%;border-radius:50%;background:var(--eye);bottom:51%;}.leif__eye-open--left:after{content:'';position:absolute;top:35%;left:60%;height:50%;width:50%;transform:translate(-50%,-50%);border-radius:50%;background:var(--pupil);}.leif__eye-open--right{height:19%;left:48%;width:16%;border-radius:50%;background:var(--eye);bottom:45%;}.leif__eye-open--right:after{content:'';position:absolute;top:34%;left:39%;height:50%;width:50%;transform:translate(-50%,-50%);border-radius:50%;background:var(--pupil);}.leif__pot{height:17%;width:20%;background:var(--stroke);left:32%;top:60%;transform:rotate(-4deg);-webkit-clip-path:polygon(0-100%,100%-100%,100%25%,90%25%,70%100%,30%100%,10%25%,025%);clip-path:polygon(0-100%,100%-100%,100%25%,90%25%,70%100%,30%100%,10%25%,025%);}.leif__pot:after,.leif__pot:before{content:'';background:var(--pot-color);left:50%;transform:translate(-50%,0);z-index:3;}.leif__pot:before{height:15%;width:90%;top:5%;}.leif__pot:after{bottom:5%;height:70%;width:90%;-webkit-clip-path:polygon(0-100%,100%-100%,100%25%,92%-10%,70%100%,30%100%,8%-10%,025%);clip-path:polygon(0-100%,100%-100%,100%25%,92%-10%,70%100%,30%100%,8%-10%,025%);}.leif__pot.flower__container{width:100%;height:100%;left:0;bottom:0;-webkit-animation:grow2s2slinearboth;animation:grow2s2slinearboth;}.leif__pot.flower__show{height:100%;width:100%;left:0;bottom:100%;-webkit-clip-path:inset(0000);clip-path:inset(0000);}.leif__pot.flower{bottom:0;--size:70;--r:40;--hue:210;z-index:-2;}.leif__pot.flower:before{content:'';width:10%;height:100%;background:var(--stroke);top:50%;left:50%;transform-origin:50%0;transform:rotate(calc(var(--r)*-1deg))translate(-50%,0);}.leif__arm--right{left:56%;top:58%;height:15%;transform:rotate(7deg);width:9%;border:var(--stroke-border);border-radius:30%70%;background:var(--fur-color);}.leif__body{height:50%;width:27%;background:var(--outfit);top:50%;left:36%;border:var(--stroke-border);border-radius:40%60%50%50%/62%62%30%30%;}.leif__body:after,.leif__body:before{content:'';}.leif__body:before{height:20%;width:100%;top:15%;left:0;background:var(--fur-color);-webkit-clip-path:polygon(050%,25%0,100%0,100%100%,0100%);clip-path:polygon(050%,25%0,100%0,100%100%,0100%);}.leif__body:after{width:25%;height:30%;border:var(--stroke-border);border-radius:50%;right:10%;top:10%;background:var(--outfit);transform:rotate(12deg)translate(15%,0);}.leif__forearm{height:8%;width:20%;background:var(--fur-color);border:var(--stroke-border);top:65.25%;left:42%;transform-origin:100%50%;transform:rotate(-8deg);border-radius:30%0030%/25%0025%;-webkit-clip-path:polygon(-50%0,90%0,96%100%,-50%100%);clip-path:polygon(-50%0,90%0,96%100%,-50%100%);}.leif__forearm.claw{width:35%;height:35%;border-radius:50%;background:var(--stroke);top:calc(var(--t,5)*1%);right:95%;transform-origin:100%50%;transform:rotate(calc(var(--r,1)*1deg));-webkit-clip-path:polygon(050%,100%0,100%100%);clip-path:polygon(050%,100%0,100%100%);}.leif__forearm.claw:nth-of-type(2){--t:30;--r:-3;}.leif__forearm.claw:nth-of-type(3){--t:60;--r:2;}.leif__head{top:13.5%;width:62%;height:48%;left:51.5%;transform:translate(-50%,0%);background:var(--fur-color);border-radius:50%/50%;border:var(--stroke-border);}.leif__face{bottom:7%;left:3%;height:85%;width:83.5%;border-radius:47%50%61%52%/48%57%54%56%;overflow:hidden;}.leif__face-border{height:100%;width:100%;}.leif__face-borderdiv:nth-of-type(1){height:74%;width:47%;background:var(--face);border-radius:50%;top:6%;left:-1%;transform:rotate(17deg);}.leif__face-borderdiv:nth-of-type(2){background:var(--face);top:4%;transform:rotate(-44deg);right:4%;border-radius:50%;height:84%;width:51%;}.leif__face-borderdiv:nth-of-type(3){height:150%;width:200%;top:50%;left:50%;background:var(--face);transform:translate(-50%,0);}.leif__face-patch{height:150%;width:100%;top:40%;left:50%;background:var(--face);transform:translate(-50%,0);-webkit-clip-path:polygon(015%,8%2%,15%9%,26%9%,31%0,50%0,53%11%,68%15%,77%8%,100%42%);clip-path:polygon(015%,8%2%,15%9%,26%9%,31%0,50%0,53%11%,68%15%,77%8%,100%42%);}.leif__nose{background:var(--lip-color);top:50%;left:27%;border-radius:50%/50%;height:16%;width:18%;transform:rotate(10deg);}.leif__nose:after,.leif__nose:before{content:'';width:13%;height:34%;background:#404040;border-radius:50%/25%;}.leif__nose:after{left:31%;top:35%;}.leif__nose:before{left:59%;top:37%;}.leif__cheek{background:var(--cheek-color);border-radius:50%50%40%60%/50%50%50%50%;}.leif__cheek--left{height:20%;width:10%;top:52%;left:4%;}.leif__cheek--right{height:20%;width:16%;top:62%;right:18%;}.leif__mouth-patch{width:50%;height:5%;background:var(--face);bottom:36%;left:14%;transform-origin:0100%;transform:rotate(5deg);}.leif__arm--left{height:30%;width:8%;top:56%;background:var(--fur-color);border:var(--stroke-border);left:40%;border-radius:100%050%50%/50%;transform-origin:50%0;transform:rotate(34deg);}.leif__arm--left.claw{height:13%;width:10%;background:var(--stroke);border-radius:50%;top:95%;left:calc(var(--x,26)*1%);}.leif__arm--left.claw:nth-of-type(2){--x:37;}.leif__arm--left.claw:nth-of-type(3){--x:50;}.leif__mouth{width:45%;height:26%;background:var(--face);bottom:12%;left:14%;-webkit-clip-path:polygon(05%,100%17%,100%100%,0100%);clip-path:polygon(05%,100%17%,100%100%,0100%);}.leif__mouth>div:nth-of-type(1){background:var(--lip-color);width:150%;height:200%;bottom:0;left:50%;transform-origin:bottomcenter;transform:translate(-50%,0)rotate(4deg);border-radius:0050%50%/00100%100%;}.leif__mouth>div:nth-of-type(2){background:#000;bottom:21%;width:133%;height:200%;border-radius:0050%50%/00100%100%;left:50%;transform-origin:bottomcenter;transform:translate(-50%,0)rotate(4deg);overflow:hidden;-webkit-clip-path:polygon(50%50%,87%100%,10%100%);clip-path:polygon(50%50%,87%100%,10%100%);}.leif__mouth>div:nth-of-type(2):after{content:'';height:10%;width:26%;border-radius:50%50%00/100%100%00;bottom:-2%;left:50%;transform:translate(-50%,0);background:var(--tongue-color);}.leif__mouth>div:nth-of-type(3){background:var(--lip-color);bottom:43%;width:185%;height:200%;left:50%;transform-origin:bottomcenter;transform:translate(-50%,0)rotate(4deg);border-radius:0050%50%/00100%100%;}.leif__mouth>div:nth-of-type(4){background:var(--face);bottom:62%;width:185%;height:200%;left:50%;transform-origin:bottomcenter;transform:translate(-50%,0)rotate(4deg);border-radius:0050%50%/00100%100%;}.leif__mouth>div:nth-of-type(5){left:0%;top:0;height:100%;width:21%;border-top:calc(10*var(--unit))solidvar(--face);border-radius:50%;transform:rotate(-49deg)translate(27%,-5%);}.leif__mouth>div:nth-of-type(6){right:0%;top:0;height:100%;width:24%;border-top:calc(10*var(--unit))solidvar(--face);border-radius:50%;transform:rotate(52deg)translate(0%,5%);}.leif__eye--left{height:40%;width:30%;top:22%;background:var(--face);overflow:hidden;}.leif__eye--left>div{background:var(--eye-shade);height:111%;width:107%;right:0;top:0;border-radius:65%30%50%50%/78%36%50%0%;}.leif__eye--left>div>div:nth-of-type(1){background:var(--face);height:100%;width:100%;border-radius:65%30%50%50%/78%36%50%0%;top:29%;left:6%;transform:rotate(4deg);}.leif__eye--left>div>div:nth-of-type(2){background:var(--eye-shade);width:68%;height:68%;border-radius:50%;right:0;}.leif__eye--right{background:var(--face);height:45%;width:52%;left:50%;top:31%;transform:rotate(52deg);overflow:hidden;}.leif__eye--right>div{background:var(--eye-shade);height:131%;width:138%;left:0;top:3%;border-radius:50%50%0100%/50%30%055%;}.leif__eye--right>div>div:nth-of-type(1){background:var(--face);height:109%;width:87%;transform:rotate(19deg)translate(10%,19%);border-radius:50%50%00/100%100%00;}.leif__eye--right>div>div:nth-of-type(2){background:var(--eye-shade);height:57%;width:35%;border-radius:50%;top:16%;left:0;}.leif__eye--right>div>div:nth-of-type(2):after{content:'';height:27%;width:36%;border-radius:50%;border-top:calc(5*var(--unit))solidvar(--eye-shade);left:92%;top:17%;transform:rotate(-60deg);}.leif__cap{height:20%;width:30%;left:39%;top:1%;}.leif__cap>div:nth-of-type(1){right:0;top:0;width:90%;height:150%;border-radius:50%;border:var(--stroke-border);background:var(--cap-color);}.leif__cap>div:nth-of-type(1)>div{background:var(--cap-color);height:10%;width:17%;border-radius:50%;top:13%;left:31%;}.leif__cap>div:nth-of-type(1)>div:nth-of-type(1){z-index:2;}.leif__cap>div:nth-of-type(1)>div:nth-of-type(2),.leif__cap>div:nth-of-type(1)>div:nth-of-type(3),.leif__cap>div:nth-of-type(1)>div:nth-of-type(4),.leif__cap>div:nth-of-type(1)>div:nth-of-type(5),.leif__cap>div:nth-of-type(1)>div:nth-of-type(6){background:var(--cap-accent);transform:translate(calc(var(--x,0)*1%),calc(var(--y,0)*1%))rotate(calc(var(--r,0)*1deg));}.leif__cap>div:nth-of-type(1)>div:nth-of-type(2){--x:-55;--y:-5;}.leif__cap>div:nth-of-type(1)>div:nth-of-type(3){--x:22;--y:-70;--r:120;height:12%;}.leif__cap>div:nth-of-type(1)>div:nth-of-type(4){--x:85;--y:-5;--r:-20;height:11%;}.leif__cap>div:nth-of-type(1)>div:nth-of-type(5){--x:30;--y:80;--r:60;height:11%;}.leif__cap>div:nth-of-type(1)>div:nth-of-type(6){--x:-50;--y:80;--r:130;height:11%;}.leif__cap>div:nth-of-type(2){width:107%;height:62%;top:48%;border:var(--stroke-border);border-radius:50%;transform:rotate(17deg)translate(-1%,1%);background:var(--peak-color);}.flower{--petal-color:hsl(var(--hue),100%,50%);height:calc(var(--size,125)*var(--unit));width:calc(var(--size,125)*var(--unit));bottom:1%;left:50%;transform:translate(-50%,0)translate(calc(var(--x,0)*1%),calc(var(--y,0)*1%))rotate(calc(var(--r,0)*1deg));}.flower__core{top:50%;left:50%;height:30%;width:30%;border-radius:50%;border:var(--stroke-border);transform:translate(-50%,-50%);background:var(--flower-core);transform-style:preserve-3d;}.flower__core:after,.flower__core:before{content:'';height:25%;width:220%;background:var(--stroke);border-radius:5%/50%;top:50%;left:50%;transform:translate3d(-50%,-50%,-1px);}.flower__core:after{transform:translate3d(-50%,-50%,-1px)rotate(90deg);}.flower__petal{height:50%;width:50%;top:0;left:50%;transform:translate(-50%,0);transform-origin:50%100%;-webkit-clip-path:polygon(-50%0,50%100%,150%0);clip-path:polygon(-50%0,50%100%,150%0);}.flower__petal:after{content:'';width:60%;left:50%;height:100%;border-radius:50%;border-top:calc(10*var(--unit))solidvar(--petal-color,var(--default-petal-color));transform-origin:50%0;transform:translate(-50%,0)rotate(180deg)translate(0,-34%);-webkit-clip-path:inset(0080%0);clip-path:inset(0080%0);}.flower__petal--0{transform:translate(-50%,0)rotate(0deg);}.flower__petal--1{transform:translate(-50%,0)rotate(90deg);}.flower__petal--2{transform:translate(-50%,0)rotate(180deg);}.flower__petal--3{transform:translate(-50%,0)rotate(270deg);}.flower__petal>div:nth-of-type(1){left:50%;width:60%;height:100%;bottom:0;border-radius:50%/25%;background:var(--stroke);transform-origin:50%100%;transform:translate(-50%,0)rotate(-23deg)translate(0,0);}.flower__petal>div:nth-of-type(2){left:50%;width:60%;height:100%;border-radius:50%/25%;background:var(--stroke);transform-origin:50%100%;transform:translate(-50%,0)rotate(23deg)translate(0,0);}.flower__petal>div:nth-of-type(2):after{content:'';height:100%;width:100%;border-top:calc(10*var(--unit))solidvar(--stroke);border-radius:50%;transform-origin:50%0;transform:rotate(-23deg)rotate(-180deg)translate(65%,-18%);-webkit-clip-path:inset(0081%0);clip-path:inset(0081%0);}.flower__petal>div:nth-of-type(3){left:50%;width:100%;height:100%;bottom:0;transform:translate(-50%,0);-webkit-clip-path:polygon(-34%0,50%90%,134%0);clip-path:polygon(-34%0,50%90%,134%0);}.flower__petal>div:nth-of-type(3):after,.flower__petal>div:nth-of-type(3):before{content:'';height:100%;width:43%;left:50%;bottom:0;border-radius:50%/25%;background:var(--petal-color,var(--default-petal-color));}.flower__petal>div:nth-of-type(3):before{transform:translate(-50%,0)rotate(37deg)translate(27%,0%);}.flower__petal>div:nth-of-type(3):after{transform:translate(-50%,0)rotate(-37deg)translate(-27%,0%);}.flower--1{--hue:190;--x:0;--y:0;--size:125;--r:0;}.flower--2{--hue:320;--x:140;--y:-75;--size:75;--r:40;}.flower--3{--hue:30;--x:-140;--y:-75;--size:75;--r:80;}.flower--4{--hue:0;--x:-170;--y:-85;--size:105;--r:85;}.flower--5{--hue:260;--x:170;--y:-85;--size:105;--r:-85;}.leaf{left:calc(var(--x)*1%);top:calc(var(--y)*1%);height:14%;width:7%;transform-origin:50%100%;transform:rotate(calc(var(--r)*1deg))scale(var(--scale,1))rotateY(calc(var(--flip,0)*180deg));}.leaf>div:nth-of-type(1){border-radius:90%10%50%50%/75%10%50%25%;height:100%;width:100%;background:var(--stroke);-webkit-clip-path:polygon(00,103%0,50%50%,100%100%,0100%);clip-path:polygon(00,103%0,50%50%,100%100%,0100%);}.leaf>div:nth-of-type(2){background:var(--leaf-color);width:100%;border-radius:50%;height:100%;border-radius:90%10%50%50%/75%10%50%25%;transform:scale(0.7)translate(6%,0);-webkit-clip-path:polygon(00,90%0,75%50%,100%100%,0100%);clip-path:polygon(00,90%0,75%50%,100%100%,0100%);}.leaf>div:nth-of-type(3){height:100%;width:100%;left:100%;top:0;border-left:var(--stroke-border);border-width:calc(10*var(--unit));transform-origin:bottomcenter;border-radius:90%10%50%50%/75%10%50%25%;transform:translate(-15%,0)rotate(-18deg);-webkit-clip-path:polygon(00,71%0,100%41%,9%81%);clip-path:polygon(00,71%0,100%41%,9%81%);}.leaf--1{--x:8;--y:52;--r:5;--flip:0;--scale:1;}.leaf--2{--x:9;--y:56;--r:-45;--flip:1;--scale:1.1;}.leaf--3{--x:23;--y:68;--r:-85;--flip:0;--scale:1;}.leaf--4{--x:26;--y:67;--r:70;--flip:1;--scale:1.05;}.leaf--5{--x:24;--y:68;--r:-140;--flip:0;--scale:1;}.leaf--6{--x:66;--y:66;--r:-65;--flip:0;--scale:1;}.leaf--7{--x:71;--y:68;--r:145;--flip:1;--scale:1;}.leaf--8{--x:71;--y:68;--r:90;--flip:1;--scale:1;}.leaf--9{--x:84;--y:52;--r:5;--flip:1;--scale:1;}.leaf--10{--x:86;--y:52;--r:40;--flip:1;--scale:1;}.star{height:calc(20*var(--unit));width:calc(20*var(--unit));top:calc(var(--y,50)*1%);left:calc(var(--x,50)*1%);-webkit-animation:sparkle2scalc(var(--d,0)*1s)infiniteboth;animation:sparkle2scalc(var(--d,0)*1s)infiniteboth;}.star:after,.star:before{content:'';height:100%;width:40%;border-radius:50%/25%;background:#fff;left:50%;top:0;transform:translate(-50%,0)rotate(calc(var(--r,0)*1deg));}.star:after{--r:90;}.star--1{--x:30;--y:90;--d:2.25;}.star--2{--x:4;--y:51;--d:2;}.star--3{--x:92;--y:49;--d:3;}.star--4{--x:66;--y:92;--d:2.5;}@-webkit-keyframespop-in{from{transform:translate(0,100%);}}@keyframespop-in{from{transform:translate(0,100%);}}@-webkit-keyframessparkle{0%,50%,100%{transform:scale(0)rotate(0);}25%{transform:scale(1.2)rotate(450deg);}}@keyframessparkle{0%,50%,100%{transform:scale(0)rotate(0);}25%{transform:scale(1.2)rotate(450deg);}}@-webkit-keyframesgrow{from{transform:translate(0,100%);}}@keyframesgrow{from{transform:translate(0,100%);}}@-webkit-keyframesblink-open{0%,10%,40%,100%{transform:scale(1);}25%{transform:scale(0);}}@keyframesblink-open{0%,10%,40%,100%{transform:scale(1);}25%{transform:scale(0);}}@-webkit-keyframesblink-closed{0%,10%,40%,100%{transform:scale(0);}25%{transform:scale(1);}}@keyframesblink-closed{0%,10%,40%,100%{transform:scale(0);}25%{transform:scale(1);}}</style></head><body><divclass="leif"><divclass="leif__arch"></div><divclass="leif__himself"><divclass="leif__container"><divclass="leif__body"></div><divclass="leif__arm--left"><divclass="claw"></div><divclass="claw"></div><divclass="claw"></div></div><divclass="leif__arm--right"></div><divclass="leif__cap"><div><div></div><div></div><div></div><div></div><div></div><div></div></div><div></div></div><divclass="leif__head"><divclass="leif__face"><divclass="leif__face-border"><div></div><div></div><div></div></div><divclass="leif__eyeleif__eye--right"><div><div></div><div></div></div></div><divclass="leif__eyeleif__eye--left"><div><div></div><div></div></div></div><divclass="leif__face-patch"></div><divclass="leif__mouth"><div></div><div></div><div></div><div></div><div></div><div></div></div><divclass="leif__mouth-patch"></div><divclass="leif__nose"></div><divclass="leif__cheekleif__cheek--left"></div><divclass="leif__cheekleif__cheek--right"></div></div><divclass="leif__eye-openleif__eye-open--left"></div><divclass="leif__eye-openleif__eye-open--right"></div><divclass="leif__eye-closedleif__eye-closed--left"></div><divclass="leif__eye-closedleif__eye-closed--right"></div></div><divclass="leif__pot"><divclass="flower__show"><divclass="flower__container"><divclass="flowerflower--undefined"><divclass="flower__petalflower__petal--0"><div></div><div></div><div></div><div></div></div><divclass="flower__petalflower__petal--1"><div></div><div></div><div></div><div></div></div><divclass="flower__petalflower__petal--2"><div></div><div></div><div></div><div></div></div><divclass="flower__petalflower__petal--3"><div></div><div></div><div></div><div></div></div><divclass="flower__core"></div></div></div></div></div><divclass="leif__forearm"><divclass="claw"></div><divclass="claw"></div><divclass="claw"></div></div></div></div><divclass="leafleaf--1"><div></div><div></div><div></div></div><divclass="leafleaf--2"><div></div><div></div><div></div></div><divclass="leafleaf--3"><div></div><div></div><div></div></div><divclass="leafleaf--4"><div></div><div></div><div></div></div><divclass="leafleaf--5"><div></div><div></div><div></div></div><divclass="leafleaf--6"><div></div><div></div><div></div></div><divclass="leafleaf--7"><div></div><div></div><div></div></div><divclass="leafleaf--8"><div></div><div></div><div></div></div><divclass="leafleaf--9"><div></div><div></div><div></div></div><divclass="leafleaf--10"><div></div><div></div><div></div></div><divclass="flowerflower--1"><divclass="flower__petalflower__petal--0"><div></div><div></div><div></div><div></div></div><divclass="flower__petalflower__petal--1"><div></div><div></div><div></div><div></div></div><divclass="flower__petalflower__petal--2"><div></div><div></div><div></div><div></div></div><divclass="flower__petalflower__petal--3"><div></div><div></div><div></div><div></div></div><divclass="flower__core"></div></div><divclass="flowerflower--2"><divclass="flower__petalflower__petal--0"><div></div><div></div><div></div><div></div></div><divclass="flower__petalflower__petal--1"><div></div><div></div><div></div><div></div></div><divclass="flower__petalflower__petal--2"><div></div><div></div><div></div><div></div></div><divclass="flower__petalflower__petal--3"><div></div><div></div><div></div><div></div></div><divclass="flower__core"></div></div><divclass="flowerflower--3"><divclass="flower__petalflower__petal--0"><div></div><div></div><div></div><div></div></div><divclass="flower__petalflower__petal--1"><div></div><div></div><div></div><div></div></div><divclass="flower__petalflower__petal--2"><div></div><div></div><div></div><div></div></div><divclass="flower__petalflower__petal--3"><div></div><div></div><div></div><div></div></div><divclass="flower__core"></div></div><divclass="flowerflower--4"><divclass="flower__petalflower__petal--0"><div></div><div></div><div></div><div></div></div><divclass="flower__petalflower__petal--1"><div></div><div></div><div></div><div></div></div><divclass="flower__petalflower__petal--2"><div></div><div></div><div></div><div></div></div><divclass="flower__petalflower__petal--3"><div></div><div></div><div></div><div></div></div><divclass="flower__core"></div></div><divclass="flowerflower--5"><divclass="flower__petalflower__petal--0"><div></div><div></div><div></div><div></div></div><divclass="flower__petalflower__petal--1"><div></div><div></div><div></div><div></div></div><divclass="flower__petalflower__petal--2"><div></div><div></div><div></div><div></div></div><divclass="flower__petalflower__petal--3"><div></div><div></div><div></div><div></div></div><divclass="flower__core"></div></div><divclass="starstar--1"></div><divclass="starstar--2"></div><divclass="starstar--3"></div><divclass="starstar--4"></div></div><script>constrestart=()=>{constMARKUP=document.body.innerHTMLdocument.body.innerHTML=''requestAnimationFrame(()=>(document.body.innerHTML=MARKUP))}document.body.addEventListener('click',restart)</script></body></html>...

CSS3动画：模拟canvas酷炫特效

2020年11月13日

CSS3动画：模拟canvas酷炫特效。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实现发光边框特效 - Web前端之家https://jiangweishan.com/</title> <style> body { margin: 0; width: 100vw; height: 100vh; background: #010326; } .root { --glow_width: 2px; --animation_length: 2s; --delay_factor: 2; position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; transform: translate(-50%, -50%) rotate(45deg); /* Uncomment the line below to see how this system is set up */ /* border: 1px dashed red; */ overflow: hidden; } .side { position: absolute; top: 0; left: 0; } .side.left, .side.right { width: var(--glow_width); height: 0; background: linear-gradient(to bottom, transparent, #c03225, transparent); animation: heightAnim var(--animation_length) linear infinite, hider calc(var(--delay_factor) * var(--animation_length)) var(--animation_length) infinite; } .side.top, .side.bottom { width: 100%; height: var(--glow_width); background: linear-gradient(to left, transparent, #c03225, transparent); animation: widthAnim var(--animation_length) 0s linear infinite, hider calc(var(--delay_factor) * var(--animation_length)) var(--animation_length) infinite; } .side.right { left: auto; right: 0; height: 0; animation-delay: calc(var(--animation_length) / 2); animation-direction: normal, reverse; } .side.bottom { top: auto; bottom: 0; width: 0; animation-delay: calc(var(--animation_length) / 2); animation-direction: normal, reverse; } @keyframes heightAnim { 0% { height: 0px; } 50% { height: 300px; transform: initial; } 100% { transform: translate(0, 300px); } } @keyframes widthAnim { 0% { width: 0px; } 50% { width: 300px; transform: initial; } 100% { transform: translate(300px, 0px); } } @keyframes hider { 0%, 50% { opacity: 0; } 51%, 100% { opacity: 1; } } </style></head><body> <div class="root" style="display: none;"> <div> <div class="side left"></div> <div class="side top"></div> <div class="side right"></div> <div class="side bottom"></div> </div> </div> <script> let template = `<div class="root" style="transform: translate(-50%, -50%) rotate({{ value }})"> <div> <div class="side left"></div> <div class="side top"></div> <div class="side right"></div> <div class="side bottom"></div> </div> </div>` let segments = 9 for(let i = -segments; i < segments; i++){ document.body.innerHTML += template.replace("{{ value }}", 90/segments * i + "deg") } // document.body.innerHTML += template.replace("{{ value }}", 90/segments * 0 + "deg") </script></body></html>...

CSS3:处理文字溢出省略号代替的应用

2020年11月02日

CSS3:处理文字溢出省略号代替的应用 - Web前端之家https://jiangweishan.com/</title> <style type="text/css"> .tf{ width: 100px; height:50px; border:1px solid black; overflow: hidden; text-overflow: clip;/*如果只是单纯的隐藏的话，加不加这句话效果都一样 height+overflow就可对溢出的文字直接隐藏*/ } .tf1{ width: 100px; border:1px solid black; overflow: hidden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; white-space: nowrap; /*若使用ellipsis属性 text-overflow:ellipsis; overflow: hidden;white-space: nowrap; 这三个属性缺一不可 */ } </style></head><body> <div class="tf"> Web前端之家Web前端之家Web前端之家Web前端之家Web前端之家 </div> <div class="tf1"> Web前端之家Web前端之家Web前端之家Web前端之家Web前端之家 </div> </body></html>...

处理CSS3 transform过渡抖动兼容问题

2020年10月28日

CSS3transform过渡抖动兼容问题。transform:scale();缩放在IE浏览器下会有抖动transform缩放在IE浏览器下会有抖动可以在缩放的同时添加一个旋转如：transform: scale(1.2);换成：transform: scale(1.2) rotate(0.1deg);transform:translate();偏移会使图片或文字变得模糊transform偏移还会使图片或文字失帧，变得模糊，可以使用clac解决如：transform:translate(-50%);换成：transform: translate(calc(-50% + 1px));clac是CSS3的计算属性，可以使用在样式中的计算，clac语法：clac(数+数)，注：这里“运算符号”两端的空格不能少transform存在兼容性，IE浏览器只能兼容到IE9，兼容写法：transform:scale(1.2) rotate(0.1deg);-ms-transform:scale(1.2) rotate(0.1deg);　　　　 /* IE 9 */-moz-transform:scale(1.2) rotate(0.1deg);　　　 /* Firefox */-webkit-transform:scale(1.2) rotate(0.1deg);　 /* Safari 和 Chrome */-o-transform:scale(1.2) rotate(0.1deg);　　　　 /* Opera */...

分享按钮点击CSS3特效：酷炫发散效果

2020年09月01日

CSS3特效：鼠标点击按钮酷炫发散效果。这个效果很实用的，大家可以看下DEMO。效果图：DEMO代码走一波：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web前端之家https://www.jiangweishan.com</title> <style> .btn{ display: block; width: 300px; height: 100px; margin: 50px; outline: 0; overflow: hidden; position: relative; transition: .3s; cursor: pointer; user-select: none; text-align: center; line-height: 100px; font-size: 50px; background: tomato; color: #fff; border-radius: 10px; } .btn>span{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .btn>span:after{ content: ''; position: absolute; background: transparent; border-radius:50%; width: 100%; padding-top: 100%; margin-left: -50%; margin-top: -50%; left: var(--x,-100%); top: var(--y,-100%); } .btn:active{ background: orangered; } .btn>input[type=checkbox]{ display: none } .btn>input[type=checkbox]+span:after{ animation: ripple-in 1s; } .btn>input[type=checkbox]:checked+span:after{ animation: ripple-out 1s; } @keyframes ripple-in{ from { transform: scale(0); background: rgba(0,0,0,.25) } to { transform: scale(1.5); background: transparent } } @keyframes ripple-out{ from { transform: scale(0); background: rgba(0,0,0,.25) } to { transform: scale(1.5); background: transparent } } </style></head><body> <label class="btn" tabindex="1"> <input type="checkbox"><span onclick="ripple(this,event)">Web前端之家</span> </label></body> <script> function ripple(dom,ev){ console.log(ev) var x = ev.offsetX; var y = ev.offsetY; dom.style.setProperty('--x',x+'px'); dom.style.setProperty('--y',y+'px');}</script></html>其实这个只是点击，有时候，我们需要滑动，你直接把点击事件改成hover就可以了。...

ie-CSS3.htc在html5中的使用方法

2020年07月20日

CSS3.htc在html5中的使用方法。css带来的便利是很容易感受的到的，但恶心的是它在ie下的不兼容，所以某位牛人现身写了个ie-CSS3.htc，允许你在ie下去使用CSS3的部分东西。ie-CSS3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件，不只是box-shadow，它还可以让你的IE浏览器支持圆角属性border-radius和文字阴影属性text-shadow。ie-CSS3的使用方法很简单。先下载它并放到你的项目目录中在你需要使用CSS3的样式里加入behavior:url(js/ie-CSS3.htc);就可以了（括号里是ie-CSS3.htc的地址）用法大致如下：.box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */ behavior: url(ie-CSS3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */}最近用到了这个东西，发现动态改变div的内容之后，这段脚本生成的vml会出现变形。。所以加了一个手动刷新的函数，通过innerHTML赋值之后调用一下就可以了el.innerHTML = '....';if(window.update_CSS3_fix) update_CSS3_fix(el);如果使用jquery就不用这么麻烦，在你的框架里加一段：(function(){ if (!jQuery.browser.msie) return; jQuery.fn.__ohtml__ = jQuery.fn.html; jQuery.fn.html = function(value) { jQuery(this).__ohtml__(value); this.each(function() { update_CSS3_fix(this); }); return this; };})();...

CSS3 @media不起作用是什么原因？怎么解决？

2020年06月01日

CSS3@media不起作用是什么原因？怎么解决？不要慌呢，慢慢分析。首先确认是不是css本身的问题，而不是媒体查询没有生效。例如：div{display:flex;}/*那么div所有的display效果都将无法生效*/第一种错误：格式书写错误,and后面必须有空格例如下面代码：@media screen and (max-width:500px){ }第二种错误：样式冲突；@media查询代码的样式被后面的css所覆盖注意：建议在书写css的过程中，@media查询带的css写在后面，以免这样避免被前面的css覆盖。第三种错误：css本身出了问题导致css不生效注意：这是一种很常见的错误，例如块元素浮动导致父级元素没有高度；此时给父元素加背景颜色发现没有生效，实际上是css导致的错误，而没有显示。例如css选择的优先级也会导致对其中一种生效另外一种不生效，等等css错误导致的问题也非常多，就不一一列举了。第四种错误：meta属性viewport属性，这个虽然基本常识，应该也会有人漏掉。<meta name="viewport" content="width=device-width, initial-scale=1" />第五种错误：括号中的内容内容不能写结束符“;”，以及其它错误。解决办法：有很多解决方法，但是建议可以是用css排除法，使用css注释掉一部分；当然浏览器也是一个很好的查看代码解决问题的方法。@media screen and (max-width:200px){/*这只是一个示例*/}...

分享下CSS3里的2D变形方法

2020年05月21日

CSS3里的2D变形方法。转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。移动translate(x,y)<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: #ccc; /*transform: translate(x, y);x y 可以是负值*/ /*变形：移动*/ transition: all 0.5s;/*当点击鼠标时，慢慢的移动，松开鼠标之后，慢慢的回去*/ } div:active { /* a:active鼠标点击没有松开的时候触发的状态*/ transform: translate(50px, 50px);/*当点击之后，移动位置*/ /*transform: translate(50px);只移动x轴的情况这样写*/ /*transform: translate(0,50px);只移动y轴这样写*/ /*transform: translateX(50px);也可以这样写，而且一般这样写*/ /*transform: translateY(50px);也可以这样写*/ } </style></head><body><div></div></body></html>案例：盒子水平垂直居中对齐的新写法<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: #ccc; /*transform: translate(100px);水平移动100*/ /*transform: translate(50%);这样写的话，移动的50%宽度是以他自身的宽度一半为准的，也就是div的一半，200px/2=100px，而不是以父级或浏览器的宽度的一半为准*/ /*以前我们定位的盒子居中对齐是先移动父级的一半宽度，再往回走自己宽度的一半，才能实现居中*/ /*以前的居中是这样写的*/ position: absolute; left: 50%; /* !*以父级宽度为准*!*/ top: 50%; /*margin-left: -100px;以前的居中是这样写的，但是这样写的话就被写死了，父级宽度如果改动的话，这里也要改，他不会自动变*/ transform: translate(-50%, -50%); /*现在不需要再计算一半距离是多少，直接用50%就可以了*/ } </style></head><body><div></div></body></html>缩放scale（x，y）transform:scale(0.8,1);这里如果括号里只写一个数的话，就不像translate(x,y)一样是默认为x值了，scale（）括号里如果只有一个值的话，是xy一起共同都是这个值scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）scaleX(x)元素仅水平方向缩放（X轴缩放）scaleY(y)元素仅垂直方向缩放（Y轴缩放）scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: #ccc; margin: 100px auto; transition: all 0.5s;/* 渐变 x y 轴都变 */ } div:hover { transform: scale(1.2, 1.5); /* x 水平缩放 y垂直缩放鼠标经过后放大，离开后复原，如果只有一个参数的话，宽度、高度都缩放，可以做一些网站的鼠标经过后图片放大的效果*/ } </style></head><body><div></div></body></html>旋转rotate(deg)可以对元素进行旋转，正值为顺时针，负值为逆时针；<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title><style> img { margin: 100px; transition: all 0.5s; } img:hover { transform: rotate(90deg);/*这里给 -90deg的话，就是逆时针旋转*/ } </style></head><body><section> <img src="https://jiangweishan.com/zb_users/upload/2020/05/202005131589364968696188.jpg" alt=""></section></body>鼠标经过后，图片旋转90度，并且是在0.5s的时间内匀速旋转。上面例子拓展：<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> img { margin: 100px; transition: all 0.8s;/*过渡所有条件都过渡*/ border-radius: 50%; /*给图片圆角*/ border: 5px solid cadetblue; } img:hover { transform: rotate(360deg);/*旋转的度数写多少都可以，720都行*/ } </style></head><body><section> <img src="https://jiangweishan.com/zb_users/upload/2020/05/202005131589364968696188.jpg" alt=""></section></body></html>拓展练习：图片变成圆角，加边框，并且顺时针旋转360度。transform-origin可以调整元素转换变形的原点，上面的图片旋转是围绕中心点旋转的，也可以设置为围绕其他点旋转。<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> img { width: 200px; margin: 100px; transition: all 0.6s; transform-origin: top left;/* origin：原点。transform-origin这个属性默认值是center center 围绕中心点旋转，修改成top left之后，他就会围绕左上角旋转如果要精确一些的话，可以写成像素的：transform-origin: 20px 30px;*/ } img:hover { transform: rotate(180deg); } </style></head><body><img src="https://jiangweishan.com/zb_users/upload/2020/05/202005131589364968696188.jpg" alt=""></body></html>倾斜skew（deg,deg）通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { font-size: 50px; font-weight: 700; margin: 100px; transition: all 0.7s; } div:hover { /*transform: skew(-30deg,0);*/ transform: skew(0, -10deg);/*y轴这个值如果大了，他会跑掉，离开鼠标能点到的地方又会跑回来*/ } </style></head><body><div>楚乔</div></body></html>...

CSS3里的linear-gradient()函数

2020年05月09日

CSS3里的linear-gradient()函数</title> <style>#grad1 { height: 200px; background-color: red; /* 不支持线性的时候显示 */ background-image: linear-gradient(to right, red , yellow);}</style></head><body><h3>线性渐变 - 从左到右</h3><p>从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：</p><div id="grad1"></div><p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持渐变。</p></body></html>预览看下吧。...

Web前端开发：探讨CSS3中元素位移、旋转、倾斜、缩放等方式

2020年05月08日

CSS3实现各种旋转等方式，然后去实现一些动画效果，所以这方面的知识点还是得熟练掌握。众所周知，转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。接下来我们逐个了解下，GOGOGO!!!移动translate(x,y)<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: #ccc; /*transform: translate(x, y);x y 可以是负值*/ /*变形：移动*/ transition: all 0.5s;/*当点击鼠标时，慢慢的移动，松开鼠标之后，慢慢的回去*/ } div:active { /* a:active鼠标点击没有松开的时候触发的状态*/ transform: translate(50px, 50px);/*当点击之后，移动位置*/ /*transform: translate(50px);只移动x轴的情况这样写*/ /*transform: translate(0,50px);只移动y轴这样写*/ /*transform: translateX(50px);也可以这样写，而且一般这样写*/ /*transform: translateY(50px);也可以这样写*/ } </style></head><body><div></div></body></html>案例：盒子水平垂直居中对齐的新写法<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: #ccc; /*transform: translate(100px);水平移动100*/ /*transform: translate(50%);这样写的话，移动的50%宽度是以他自身的宽度一半为准的，也就是div的一半，200px/2=100px，而不是以父级或浏览器的宽度的一半为准*/ /*以前我们定位的盒子居中对齐是先移动父级的一半宽度，再往回走自己宽度的一半，才能实现居中*/ /*以前的居中是这样写的*/ position: absolute; left: 50%; /* !*以父级宽度为准*!*/ top: 50%; /*margin-left: -100px;以前的居中是这样写的，但是这样写的话就被写死了，父级宽度如果改动的话，这里也要改，他不会自动变*/ transform: translate(-50%, -50%); /*现在不需要再计算一半距离是多少，直接用50%就可以了*/ } </style></head><body><div></div></body></html>缩放scale（x，y）transform:scale(0.8,1);这里如果括号里只写一个数的话，就不像translate(x,y)一样是默认为x值了，scale（）括号里如果只有一个值的话，是xy一起共同都是这个值。scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）scaleX(x)元素仅水平方向缩放（X轴缩放）scaleY(y)元素仅垂直方向缩放（Y轴缩放）scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: #ccc; margin: 100px auto; transition: all 0.5s;/* 渐变 x y 轴都变 */ } div:hover { transform: scale(1.2, 1.5); /* x 水平缩放 y垂直缩放鼠标经过后放大，离开后复原，如果只有一个参数的话，宽度、高度都缩放，可以做一些网站的鼠标经过后图片放大的效果*/ } </style></head><body><div></div></body></html>旋转rotate(deg)可以对元素进行旋转，正值为顺时针，负值为逆时针；<style> img { margin: 100px; transition: all 0.5s; } img:hover { transform: rotate(90deg);/*这里给 -90deg的话，就是逆时针旋转*/ } </style></head><body><section> <img src="images/chu.jpg" alt=""></section></body>上面例子拓展：<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> img { margin: 100px; transition: all 0.8s;/*过渡所有条件都过渡*/ border-radius: 50%; /*给图片圆角*/ border: 5px solid cadetblue; } img:hover { transform: rotate(360deg);/*旋转的度数写多少都可以，720都行*/ } </style></head><body><section> <img src="images/chu.jpg" alt=""></section></body></html>拓展练习：图片变成圆角，加边框，并且顺时针旋转360度。transform-origin 可以调整元素转换变形的原点，上面的图片旋转是围绕中心点旋转的，也可以设置为围绕其他点旋转<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> img { width: 200px; margin: 100px; transition: all 0.6s; transform-origin: top left;/* origin：原点。transform-origin这个属性默认值是center center 围绕中心点旋转，修改成top left之后，他就会围绕左上角旋转如果要精确一些的话，可以写成像素的：transform-origin: 20px 30px;*/ } img:hover { transform: rotate(180deg); } </style></head><body><img src="images/pk1.png" alt=""></body></html>倾斜skew（deg,deg）通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { font-size: 50px; font-weight: 700; margin: 100px; transition: all 0.7s; } div:hover { /*transform: skew(-30deg,0);*/ transform: skew(0, -10deg);/*y轴这个值如果大了，他会跑掉，离开鼠标能点到的地方又会跑回来*/ } </style></head><body><div>楚乔</div></body></html>总结了解完这些基础CSS3变形的知识，我们可以去实现一些动画，会轻松很多了，赶紧去试试吧。...

如何使用js判断浏览器是否支持CSS3属性？

2020年04月21日

CSS3属性？使用js脚本判断浏览器是否支持某一个CSS3属性：/** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false * @version 1.0 * @author ydr.me */ function supportCSS3(style) { var prefix = ['webkit', 'Moz', 'ms', 'o'], i, humpString = [], htmlStyle = document.documentElement.style, _toHumb = function (string) { return string.replace(/-(\w)/g, function ($0, $1) { return $1.toUpperCase(); }); }; for (i in prefix) humpString.push(_toHumb(prefix[i] + '-' + style)); humpString.push(_toHumb(style)); for (i in humpString) if (humpString[i] in htmlStyle) return true; return false; }使用方法alert(supportCSS3('animation-play-state'));...

HTML5+CSS3:模拟太阳系行星运转动画

2020年02月09日

用html5+css模拟太阳系行星运转动画，废话不多说直接上DEMO，如下：<html><head> <style> .solarsys{ width: 800px; height: 800px;; position: relative; margin: 0 auto; background-color: #000000; padding: 0; transform: scale(1); } /*太阳*/ .sun { left:357px; top:357px; height: 90px; width: 90px; background-color: rgb(248,107,35); border-radius: 50%; box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35); position: absolute; margin: 0; } /*水星*/ .mercury { left:337.5px; top:395px; height: 10px; width: 10px; background-color: rgb(166,138,56); border-radius: 50%; position: absolute; transform-origin: 62.5px 5px; animation: rotate 1.5s infinite linear; } /*水星轨道*/ .mercuryOrbit { left:342.5px; top:342.5px; height: 115px; width: 115px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; margin: 0px; padding: 0px; } /*金星*/ .venus { left:309px; top:389px; height: 22px; width: 22px; background-color: rgb(246,157,97); border-radius: 50%; position: absolute; transform-origin: 91px 11px; animation: rotate 3.84s infinite linear; } /*金星轨道*/ .venusOrbit { left:320px; top:320px; height: 160px; width: 160px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; /*margin: 100px;*/ /*transform-origin: -75px -75px;*/ /*animation: rotate 4s infinite linear;*/ margin: 0px; padding: 0px; } /*地球*/ .earth { left:266.5px; top:391px; height: 18px; width: 18px; background-color: rgb(115,114,174); border-radius: 50%; position: absolute; transform-origin: 134px 9px; animation: rotate 6.25s infinite linear; } /*地球轨道*/ .earthOrbit { left:275px; top:275px; height: 250px; width: 250px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; /*margin: 100px;*/ /*transform-origin: -75px -75px;*/ /*animation: rotate 4s infinite linear;*/ margin: 0px; padding: 0px; } /*火星*/ .mars { left:222.5px; top:392.5px; height: 15px; width: 15px; background-color: rgb(140,119,63); border-radius: 50%; position: absolute; transform-origin: 177.5px 7.5px; animation: rotate 11.75s infinite linear; } /*火星轨道*/ .marsOrbit { left:230px; top:230px; height: 340px; width: 340px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; /*margin: 100px;*/ /*transform-origin: -75px -75px;*/ /*animation: rotate 4s infinite linear;*/ margin: 0px; padding: 0px; } /*木星*/ .jupiter { left:134px; top:379px; height: 42px; width: 42px; background-color: rgb(156,164,143); border-radius: 50%; position: absolute; transform-origin: 266px 21px; animation: rotate 74.04s infinite linear; } /*木星轨道*/ .jupiterOrbit { left:155px; top:155px; height: 490px; width: 490px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; /*margin: 100px;*/ /*transform-origin: -75px -75px;*/ /*animation: rotate 4s infinite linear;*/ margin: 0px; padding: 0px; } /*土星*/ .saturn { left:92px; top:387px; height: 26px; width: 26px; background-color: rgb(215,171,68); border-radius: 50%; position: absolute; transform-origin: 308px 13px; animation: rotate 183.92s infinite linear; } /*土星轨道*/ .saturnOrbit { left:105px; top:105px; height: 590px; width: 590px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; /*margin: 100px;*/ /*transform-origin: -75px -75px;*/ /*animation: rotate 4s infinite linear;*/ margin: 0px; padding: 0px; } /*天王星*/ .uranus { left:41.5px; top:386.5px; height: 27px; width: 27px; background-color: rgb(164,192,206); border-radius: 50%; position: absolute; transform-origin: 358.5px 13.5px; animation: rotate 524.46s infinite linear; } /*天王星轨道*/ .uranusOrbit { left:55px; top:55px; height: 690px; width: 690px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; /*margin: 100px;*/ /*transform-origin: -75px -75px;*/ /*animation: rotate 4s infinite linear;*/ margin: 0px; padding: 0px; } /*海王星*/ .neptune { left:10px; top:390px; height: 20px; width: 20px; background-color: rgb(133,136,180); border-radius: 50%; position: absolute; transform-origin: 390px 10px; animation: rotate 1028.76s infinite linear; } /*海王星轨道*/ .neptuneOrbit { left:20px; top:20px; height: 760px; width: 760px; background-color: transparent; border-radius: 50%; border-style: dashed; border-color: gray; position: absolute; border-width: 1px; /*margin: 100px;*/ /*transform-origin: -75px -75px;*/ /*animation: rotate 4s infinite linear;*/ margin: 0px; padding: 0px; } @keyframes rotate { 100% { transform: rotate(-360deg); } } </style></head><body> <div class="solarsys">  <div class='sun'></div>  <div class='mercuryOrbit'></div>  <div class='mercury'></div>  <div class='venusOrbit'></div>  <div class='venus'></div>  <div class='earthOrbit'></div>  <div class='earth'></div>  <div class='marsOrbit'></div>  <div class='mars'></div>  <div class='jupiterOrbit'></div>  <div class='jupiter'></div>  <div class='saturnOrbit'></div>  <div class='saturn'></div>  <div class='uranusOrbit'></div>  <div class='uranus'></div>  <div class='neptuneOrbit'></div>  <div class='neptune'></div> </div></body></html>...

这些CSS3动画库，您是否都了解和应用过？

2019年12月25日

CSS3动画，现在项目中应用非常广，因为它能拉近跟用户的距离和增强粘合度等，使得我们的产品更加多元化；因此，作为一名Web前端技术人员，需要更多的去学习动画相关的知识。前端网页设计在过去十年中经历了一场革命。在上世纪90年代后期，我们大多数人仍在设计静态杂志版式。如今，我们正在构建具有数以千计的大小调整，协调一致的活动部件的“数字机器”。简而言之，出色的UI设计师也需要成为出色的动画师 -对Web动画技术有扎实的理解。请记住，我们是从精通代码的UI设计器而不是“代码专家”开发人员的角度来看每个库。其中一些库是纯CSS。其他的都是JavaScript，但除了基本的HTML/CSS和/或JavaScript理解之外，没有其他要求才有用。Animate.cssBounce.jsAnimeJSGreenSock(GSAP)MagicAnimationsZDogCSShakeHover.CSSAniJSAnimate.cssAnimate.css是可用的最小，最易用的CSS动画库之一。将Animate库应用到您的项目就像链接CSS并将所需的CSS类添加到HTML元素一样简单。如果愿意，还可以使用jQuery触发特定事件的动画。创作者：DanielEden发行日期：2013当前版本：3.7.2人气：GitHub上的62,284星描述： “跨浏览器的CSS动画库。易用性与易用性一样。”库大小： 56.7kB（最小）GitHub的：https://github.com/daneden/animate.css在撰写本文时，它仍然是最流行和广泛使用的CSS动画库之一，并且其缩小文件足够小，可以包含在移动网站中。Animate.css仍在积极开发中。请注意第4版，它将支持CSS自定义属性（又称CSS变量）。这是最简单，最强大的动画库之一，我们会毫不犹豫地在任何项目中使用它。Bounce.jsBounce.js是一个JavaScript动画库，致力于为您的网站提供一系列独特的，有趣的，华纳兄弟风格的动画。创作者：Tictail发售日：2014当前版本：0.8.2人气：GitHub上的5,975星描述：“立即创建精美的CSS3驱动的动画。”资料库大小：16kBGitHub的：https://github.com/tictail/bounce.jsBounce.js是一个简洁的动画库，其中附带约十个动画预设-因此该库很小。与animate.css一样，动画是平滑无瑕的。如果您的需求集中在“流行和泡泡”风格的动画类型上，并且可以从较低的文件大小开销中受益，则可能要考虑使用此库。AnimeJSAnimeJS是我们列表中的最新成员，但自创建以来已赢得了许多转换。它具有难以置信的通用性和强大功能，并且不会为HTML游戏动画提供支持。唯一真正的问题是“ 它对简单的Web应用程序是否构成过大杀伤力？”也许。但是由于它速度快，体积小且相对容易学习，因此很难发现它的缺点。AnimeJS被描述为具有简单但功能强大的API的“ 轻量级JavaScript动画库 ” 。它与CSS属性，SVG，DOM属性和JavaScript对象一起使用。太棒了该项目可在GitHub上获得。创建者：朱利安·加尼尔（JulianGarnier）发售日期：2016当前版本：3.1.0人气：GitHub上32,605星描述：“JavaScript动画引擎”。程式库大小：16.8kB（最小）GitHub的：https://github.com/juliangarnier/anime最令人印象深刻的是，Anime.JS具有令人惊叹的“文档”，可在漂亮的应用程序环境中演示HTML，JavaScript代码和可用示例。简而言之，如果您对JavaScript动画解决方案感到满意，那么很难找到忽略AnimeJS的理由。GreenSock(GSAP)GreenSock（或GSAP–GreenSock动画平台）是网络动画的瑞士军刀。对于流畅运行的时尚精美动画，GSAP是理想的选择。您可以设置动画，从DOM元素到SVG，其生态系统包括一些令人惊叹的插件，可让您执行各种有趣的工作，例如，对SVG进行变形，绘制SVG描边，滚动功能，加扰文本等等。它是快速的，跨浏览器兼容的，并且其语法简单直观。当前版本：2.1.3GitHub上的流行度：GitHub上的 9,709星Description：“适用于现代网络的超高性能，专业级动画。”库大小：313kB（包含该库轻量级下载文件的最小文件夹）GitHub的：https://github.com/greensock/GreenSock-JS/许可证：标准的免费许可证，与特定功能和插件的付费模型混合在一起。有关更多详细信息，请参见许可页面。GSAP是模块化的，因此您可以选择项目所需的库部分，这对于控制文件大小非常有用。如果您正在寻找功能强大但直观，功能强大的文档和社区支持，我绝对建议您在下一个项目中为这个动画库做个尝试。你会很热情。MagicAnimationsMagicAnimations一直是最令人印象深刻的动画库之一。它具有许多不同的动画，其中许多动画是该库非常独特的。与Animate.css一样，您只需导入CSS文件即可实现Magic。您也可以使用jQuery实现动画。该项目提供了一个特别酷的演示应用程序。当前版本：1.4.1人气：GitHub6,074星描述：“具有特殊效果的CSS3动画”库大小：54.9kB（最小）GitHub的：https://github.com/miniMAC/magic许可证：MIT许可证。与Animate.css相比，MagicAnimation的文件大小适中，并且以其签名动画而著称，例如魔术效果，愚蠢效果和炸弹效果。如果您正在寻找与众不同的东西，那就去吧。您不会失望的。ZdogZdog是一个JavaScript库，用于创建DavidDeSandro制作的3D设计和动画。借助它的帮助，您可以使用<canvas>元素或SVG 绘制设计，并以光滑的3D效果以流畅的动画使它们栩栩如生。当前版本：1.1.0人气：GitHub上的6,940星描述：“适用于画布和SVG的圆形，扁平，设计友好的伪3D引擎”库大小：28kB（最小）GitHub的：https://github.com/metafizzy/zdog许可证：MIT许可证。如果您熟悉JavaScript，您将很快学习Zdog的基础知识：它具有简单易懂的声明性API，出色的文档和大量的学习资源。在SitePoint上查看我对Zdog的介绍。CSShakeCSShake准确地传达了包装盒上所说的内容-一个CSS库，专门用于在您的网页中摇动元素。如您所料，可以使用多种变体来摇动Web组件。当前版本：1.5.0人气：GitHub4,039星库大小：21.9kB（最小版本）GitHub的：https://github.com/elrumordelaluz/csshakeApple普及了UI风格，即当用户输入错误的响应时（例如模仿人摇头）大力摇晃UI元素（对话框，模态框或文本框）。CSShake提供了一系列有趣的“摇动”动画，并且该库中不乏任何变体。Hover.cssHover.css是一个CSS动画库，旨在与您网站中的按钮和其他UI元素一起使用。它具有非常不错的2D过渡，以及许多其他精心制作的动画。当前版本：2.3.2人气：GitHub上21,818星描述：“可以轻松地应用于您自己的元素，进行修改或仅用于启发。”资料库大小：93.0kB（最小）GitHub的：https://github.com/IanLunn/Hover许可证：根据要求，免费的个人/开源许可证和付费的商业许可证。有关详细信息，请阅读GitHub上的许可部分。Hover.css最适合于动画离散页面元素，例如按钮，徽标，SVG组件或特色图像，而不是较大的复杂页面动画。可以说，它最引人注目的动画效果是其独特的气泡和卷曲。AniJS我们的最终库因其独特的方法而很有趣。AniJS是一个动画库，可让您将动画添加到简单的“类似句子”结构的元素中。采用以下格式：如果点击，在广场，待办事项摆动动画要 .container盒<div data-anijs="if: click, do: flipInY, to: .container-box"></div>如果您对JavaScript不太熟悉，那么这可能是步入JS编排动作的好方法。创作者：DarielNoel发售日：2014当前版本：0.9.3人气：GitHub上的3.524星描述：“一个无需编写代码即可提高您的Web设计的库。”资料库大小：10.5kBGitHub的：https://github.com/anijs/anijsAniJS是一个在功能上具有非常合理的大小因数的库。与其他动画库（许多其他动画库可能发现的非常规动画库）相比，它用于实现的格式非常原始且与众不同。但是，该库值得一试，对于您的项目至少要尝试一次。您应该选择哪个库呢？有许多动画库可供您在项目中实施。上面列出的那些是复杂性和稳定性的最佳组合。如果您正在寻找简单易用，功能强大的CSS解决方案，则Animate.css可能是功能最丰富的“ 物有所值 ”选项。如果您正在寻找更完整，功能更强大的JavaScript选项，则很难拆分GreenSock和AnimeJS。尽管在Web应用程序中使用动画库当然可以改善交互性，但是过度使用动画库会破坏目的，并经常使用户感到困惑。请注意并谨慎使用动画。您是否为项目使用动画库？您最喜欢的动画库是什么？...

如何用JS去判断是否支持CSS3

2019年12月19日

CSS3的出现让浏览器的表现更加的丰富多彩，表现冲击最大的就是动画了，在日常书写动画的时候，很有必要去事先判断浏览器是否支持，尤其是在写CSS3动画库的时候。比如transition的animation-play-state，就只有部分浏览器支持。检测方法下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性：/** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false * @version 1.0 */function supportCSS3(style) { var prefix = ['webkit', 'Moz', 'ms', 'o'], i, humpString = [], htmlStyle = document.documentElement.style, _toHumb = function (string) { return string.replace(/-(\w)/g, function ($0, $1) { return $1.toUpperCase(); }); }; for (i in prefix) humpString.push(_toHumb(prefix[i] + '-' + style)); humpString.push(_toHumb(style)); for (i in humpString) if (humpString[i] in htmlStyle) return true; return false;}使用方法:alert(supportCSS3('animation-play-state'));...

简单实例：用CSS3画椭圆

2019年11月12日

CSS3的发展，很多形状可以通过CSS3画出，本篇文章给大家带来的内容是关于如何快速简单的使用CSS3画出各种各样的椭圆。使用CSS3画出各种各样的椭圆的原理：我们需要使用CSS3中的border-radius属性，修改width值为200px，然后把border-radius改成100px/50px;“/”之前的是水平半径，”/”之后的是垂直半径，所以100px/50px就让div成了椭圆border-radius:100px/50px;示例：<html> <head><style>#oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }</style> <head><body><div id="oval"></div></body></html>border-radius属性是一个简写属性，用于设置四个border-*-radius属性。语法：border-radius: 1-4 length|% / 1-4 length|%;...

CSS3动画里的@keyframe的定义和应用

2019年09月25日

@keyframes规则用于指定动画规则，定义一个CSS动画的一个周期的行为；可通过沿动画序列建立关键帧来指定动画序列循环期间的中间步骤。动画是使用可变的CSS样式创建的；在动画期间，CSS属性可以多次更改。定义动画，必须从@keyframes规则开始。@keyframe规则由关键字“@keyframes”组成，后跟一个标识符，给出动画的名称（将使用animation-name引用），然后是一组样式规则（用大括号分隔）。然后，通过使用标识符作为“animation-name”属性的值，将动画应用于元素。语法：@keyframes animation-name {keyframes-selector {css-styles;}}animation-name：这是必需的，它定义动画名称。keyframes-selector：定义动画的百分比，它介于0％到100％之间。一个动画可以包含许多选择器。/* 定义动画n */@keyframes your-animation-name { /* style rules */}/* 将其应用于元素 */.element { animation-name: your-animation-name; /* 或者使用动画速记属性 */ animation: your-animation-name 1s ...}在大括号内，定义关键帧或路径点，这些关键帧或路径点在动画期间的某些点上指定要设置动画的属性的值。这允许您在动画序列中控制中间步骤。例如，一个简单的动画@keyframe可能如下所示：@keyframes change-bg-color { 0% { background-color: red; } 100% { background-color: blue; }}0%”和“100%”是关键帧选择器，每个都定义了关键帧规则。关键帧规则的关键帧声明块由属性和值组成。还可以使用选择器关键字from和to，而不是分别使用0%和100%，因为它们是等价的。@keyframes change-bg-color { from { background-color: red; } to { background-color: blue; }}关键帧选择器由一个或多个逗号分隔的百分比值或from和to关键字组成。注意，百分比单位说明符必须用于百分比值。因此，'0'是一个无效的关键帧选择器。注意：为了获得浏览器的最佳支持，请始终指定0％和100％选择器。示例1：<!DOCTYPE html><html><head><meta charset="UTF-8"><style>@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);html,body {height: 100%;}body {background-color: #F5F5F5;color: #555;font-size: 1.1em;font-family: 'Gentium Basic', serif;}.container {margin: 20px auto;min-width: 320px;max-width: 500px;height: 100%;overflow: hidden;}.text {font-size: 3em;font-weight: bold;color: #0099cc;-webkit-transform-origin: left center;-ms-transform-origin: left center;transform-origin: left center;-webkit-animation: fall 4s infinite;animation: fall 4s infinite;}@-webkit-keyframes fall {from {-webkit-transform: rotate(0) translateX(0);transform: rotate(0) translateX(0);opacity: 1;}to {-webkit-transform: rotate(90deg) translateX(200px);transform: rotate(90deg) translateX(200px);opacity: 0;}}@keyframes fall {from {-webkit-transform: rotate(0) translateX(0);transform: rotate(0) translateX(0);opacity: 1;}to {-webkit-transform: rotate(90deg) translateX(200px);transform: rotate(90deg) translateX(200px);opacity: 0;}}</style></head><body style="text-align: center"><div class="container"><p class="text">Falling Text</p></div></body></html>示例2：<!DOCTYPE html><html><head><meta charset="UTF-8"><style>@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);body {background-color: #F5F5F5;color: #555;font-size: 1.1em;font-family: 'Gentium Basic', serif;}.container {margin: 50px auto;min-width: 320px;max-width: 500px;}.text {font-size: 3em;font-weight: bold;color: #0099cc;-webkit-transform-origin: left center;-ms-transform-origin: left center;transform-origin: left center;-webkit-animation: fall 4s infinite;animation: fall 4s infinite;}@-webkit-keyframes fall {from,15% {-webkit-transform: rotate(0) translateX(0);transform: rotate(0) translateX(0);opacity: 1;-webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);}50%,60% {-webkit-transform: rotate(90deg) translateX(0);transform: rotate(90deg) translateX(0);opacity: 1;-webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);animation-timing-function: cubic-bezier(.13, .84, .82, 1);}85%,to {-webkit-transform: rotate(90deg) translateX(200px);transform: rotate(90deg) translateX(200px);opacity: 0;}}@keyframes fall {from,15% {-webkit-transform: rotate(0) translateX(0);transform: rotate(0) translateX(0);opacity: 1;-webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);}50%,60% {-webkit-transform: rotate(90deg) translateX(0);transform: rotate(90deg) translateX(0);opacity: 1;-webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);animation-timing-function: cubic-bezier(.13, .84, .82, 1);}85%,to {-webkit-transform: rotate(90deg) translateX(200px);transform: rotate(90deg) translateX(200px);opacity: 0;}}</style></head><body style="text-align: center"><div class="container"><p class="text">Falling Text</p></div></body></html>OK，就这么多。...

CSS3绘画可爱的小猫咪！！！

2019年09月22日

CSS3绘画可爱的小猫咪，鼠标滑动上去，可以有笑眯眯的效果哦<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title>纯CSS3绘制的小猫笑脸动画DEMO演示</title><style>body { margin: 0px; background: #F6F7A7;}.mao_box { position: relative; top: 50px; /*width:424px;*/}.mao { margin: 0 auto; width: 400px;}.mao_head { margin: 0 auto; width: 400px; height: 340px; background: #F6F7F2; position: relative; border-radius: 50% 50% 35% 35%; border: solid 2px #2e2e2e; overflow: hidden; z-index: 10;}.huawen { position: absolute; height: 160px; width: 180px; background: #8D8D8D; left: 110px; border-radius: 0% 0% 50% 50%; overflow: hidden;} .huawen > div:first-child { height: 160px; width: 90px; background: #F0AC6B; }/*耳朵*/.erduo { width: 374px; height: 120px; position: absolute; top: -6px; left: 50%; margin-left: -187px; border-radius: 0% 0% 0% 0%;} /*左耳*/ .erduo > div:first-child { height: 200px; width: 160px; border: 2px solid #2e2e2e; background: #f3f3f3; transform: rotate(-15deg); -ms-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg); border-radius: 4% 80% 0% 50%; position: absolute; left: -20px; top: 0px; transition: transform 1s,left 1s; } /*右耳*/ .erduo > div:last-child { height: 180px; width: 160px; border: 2px solid #2e2e2e; background: #f3f3f3; transform: rotate(15deg); -ms-transform: rotate(15deg); -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); border-radius: 80% 4% 50% 0%; position: absolute; right: -20px; top: 0px; transition: transform 1s,right 1s; }/*鼠标浮动耳朵样式*//*左耳*/.mao:hover .erduo > div:first-child { left: -10px; transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); border-radius: 4% 80% 0% 60%; /*transition: all 1s;*/ /*transition: transform 1s,left 1s;*/}.mao:hover .erduo > div:last-child { right: -10px; transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); border-radius: 80% 4% 60% 0%; /*transition: transform 1s,right 1s;*/}/*眼睛*/.yanjing { height: 60px; width: 300px; position: absolute; top: 200px; z-index: 20; left: 50%; margin-left: -150px; overflow: hidden;}/*左眼*/.yanquan { height: 100px; width: 100px; border: 2px solid #2e2e2e; border-radius: 50% 50% 50% 50%; overflow: hidden; position: absolute;} /*眼珠子左*/ .yanquan > div:first-child { height: 100px; width: 30px; background-color: #2e2e2e; margin-left: 35px; transition:all 1s; /*transition-property: width; transition-duration: 2s;*/ }.mao:hover .yanquan > div:first-child { width:40px; margin-left: 30px; /*transition:all 1s;*/ }.yanquan_hedding { height: 100px; width: 180px; border-top: 2px solid #2e2e2e; border-radius: 50% 50% 50% 50%; background: #F6F7F2; margin-top: 50px; margin-left: -40px; position: absolute; transition: margin-top 1s;}.hong { position: absolute; height: 28px; width: 70px; background: red; top: 34px; /*top: 64px;*/ left: 18px; border-radius: 50% 50% 50% 50%; background-image: -moz-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%); background-image: -webkit-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%); background-image: -ms-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%); opacity: 0.0; /*transition: opacity 0.5s ease-in 0.2s;*/}.yan_right { left: 196px; top: 0px; background: red; position: absolute;}/*眼睛浮动属性*/.mao:hover .yanquan_hedding { margin-top: 30px; /*transition: margin-top 1s;*/}.mao:hover .hong { /*top: 34px;*/ opacity: 0.8; transition: opacity 0.5s ease-in 0.2s;}/*脸部花纹*//*左边花纹*/.face_huawen { height: 80px; width: 380px; position: absolute; top: 190px; z-index: 20; left: 50%; margin-left: -190px;}.face_huawen_huawen > div:first-child { width: 30px; height: 10px; border-top: 6px #E53941 solid; border-radius: 30% 80% 20% 50%; transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); -o-transform: rotate(25deg); margin-left: 20px;}.face_huawen_huawen > div:nth-child(2) { width: 20px; height: 6px; background-color: #E53941; border-radius: 50% 50% 50% 50%; transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); -o-transform: rotate(25deg); margin-left: 20px;}.face_huawen_huawen > div:nth-child(3) { /*margin-top:10px;*/ width: 32px; height: 10px; border-bottom: 4px #E53941 solid; border-radius: 30% 0% 90% 30%; transform: rotate(25deg); -ms-transform: rotate(25deg); -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); -o-transform: rotate(25deg); margin-left: 8px;}.face_huawen_huawen > div:nth-child(4) { margin-top: 20px; width: 26px; height: 20px; border-bottom: 4px #E53941 solid; border-radius: 30% 0% 90% 30%; transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); margin-left: 28px;}.face_huawen_huawen > div:last-child { width: 22px; height: 10px; border-bottom: 3px #E53941 solid; border-radius: 0% 0% 50% 50%; transform: rotate(-15deg); -ms-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg); margin-left: 40px; margin-top: -8px;}/*右边花纹*/.huawen_right { float: right; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); /* Safari 和 Chrome */ -moz-transform: rotateY(180deg); /* Firefox */ margin-top: -85px;}/*鼻子*/.bizi { width: 30px; height: 36px; position: absolute; left: 50%; margin-left: -15px; top: 260px; z-index: 30;} .bizi > div:first-child { width: 30px; height: 10px; border-bottom: 8px solid #2e2e2e; border-radius: 0% 0% 50% 50%; margin-top: -10px; }.zuiba_box { width: 200px; height: 36px; position: absolute; overflow: hidden; left: 50%; margin-left: -100px; top: 260px; z-index: 30;}.zuiba { margin-left: 85px; margin-top: 6px;} .zuiba > div:first-child { width: 4px; height: 8px; background: #2e2e2e; margin-left: 13px; } /*右半边嘴巴*/ .zuiba > div:nth-child(2) { width: 50px; height: 40px; border-bottom: 4px solid #2e2e2e; border-left: 4px solid #2e2e2e; border-radius:40% 0% 20% 50%; margin-left: 13px; margin-top: -26px; position:absolute; transition: border-radius 1s; } /*左半边嘴巴*/ .zuiba > div:nth-child(3) { width: 50px; height: 40px; border-bottom: 4px solid #2e2e2e; border-right: 4px solid #2e2e2e; border-radius:0% 40% 50% 20%; margin-left: -38px; margin-top: -26px; position:absolute; transition: border-radius 1s; }.mao:hover .zuiba > div:nth-child(2) { border-radius: 50% 50% 50% 50%; width: 40px; /*transition: border-radius 1s ;*/}.mao:hover .zuiba > div:nth-child(3) { width: 40px; margin-left: -30px; border-radius: 50% 50% 50% 50%; /*transition: border-radius 1s;*/}.ceshi { width: 26px; height: 26px; -webkit-border-radius: 50% 50% 50% 0; -moz-border-radius: 50% 50% 50% 0; -o-border-radius: 50% 50% 50% 0; border-radius: 50% 50% 50% 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); margin: 1px 4px 7px; border: 2px solid;}</style></head><body><div class="mao_box"> <div class="mao"> <div class="mao_head"> <div class="huawen"> <div></div> </div> </div> <div class="erduo"> <div></div> <div></div> </div> <div class="yanjing"> <div> <div class="yanquan"> <div></div> </div> <div class="yanquan_hedding"> </div> <div class="hong"></div> </div> <div class="yan_right"> <div class="yanquan"> <div></div> </div> <div class="yanquan_hedding"> </div> <div class="hong"></div> </div> <div style="clear:both"></div> </div> <div class="face_huawen"> <div class="face_huawen_huawen huawen_left"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="face_huawen_huawen huawen_right"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div style="clear:both"></div> </div> <div class="bizi"> <div></div> <div></div> <div></div> <div></div> </div> <div class="zuiba_box"> <div class="zuiba"> <div></div> <div></div> <div></div> </div> </div> </div></div></div></body></html>...

CSS3模拟行走中的大象

2019年09月22日

CSS3模拟行走中的大象，一起来看下源码吧。<!doctype html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>纯CSS3实现大象走路动画DEMO演示</title><style> html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;}html { line-height: 1;}ol, ul { list-style: none;}table { border-collapse: collapse; border-spacing: 0;}caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;}q, blockquote { quotes: none;}q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;}a img { border: none;}article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;}/***********VARIABLES***********//*Movement*//*Colors*//***********STYLES***********/body { background-color: #d4e7ba;}/*.ele-container { background: -webkit-linear-gradient(top, rgba(0, 141, 210, 0.63) 0%, transparent 100%); background: linear-gradient(to bottom, rgba(0, 141, 210, 0.63) 0%, transparent 100%); height: 500px; overflow: hidden; position: relative; width: 100%;}*/.ele-wrapper { -webkit-animation: ele-movement 1s infinite linear; animation: ele-movement 1s infinite linear; left: 50%; position: absolute; top: 50%; -webkit-transform: translate3D(-50%, -75%, 0); -ms-transform: translate3D(-50%, -75%, 0); transform: translate3D(-50%, -75%, 0); width: 200px;}.ele-body { -webkit-animation: body-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93); animation: body-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93); background: -webkit-linear-gradient(top, #cfcfcf 0%, #9c9c9c 70%); background: linear-gradient(to bottom, #cfcfcf 0%, #9c9c9c 70%); border: 1px solid #808080; border-radius: 100px 50px 70px 60px; height: 165px; position: relative; width: 100%; z-index: 1;}.ele-tail { -webkit-animation: tail-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93); animation: tail-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93); border-top: 7px solid #808080; border-radius: 50%; height: 50px; position: absolute; -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg); transform: translate3d(-3%, 69%, 0) rotateZ(-20deg); width: 64px;}.ele-tail:before { border-top: 5px solid #C2C2C2; border-radius: 50%; content: ''; height: 50px; position: absolute; width: 64px; top: -6px;}.ele-head { -webkit-animation: head-movement 2s infinite linear; animation: head-movement 2s infinite linear; background: #C2C2C2; border-radius: 50%; border-top: 1px solid #808080; box-shadow: -1px 1px 2px #808080; height: 150px; position: absolute; -webkit-transform: translate3d(80%, -25%, 0); transform: translate3d(80%, -25%, 0); width: 155px;}.ele-eyes:before, .ele-eyes:after { -webkit-animation: eyes-blink 3.5s infinite linear; animation: eyes-blink 3.5s infinite linear; background-color: #FDFDFD; border-radius: 50%; bottom: -48px; content: ''; height: 10px; position: absolute; width: 10px;}.ele-eyebrows { -webkit-animation: eyebrows-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93); animation: eyebrows-movement 1s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93); background: -webkit-linear-gradient(bottom, #C2C2C2 20%, #9c9c9c 100%); background: linear-gradient(to top, #C2C2C2 20%, #9c9c9c 100%); border-radius: 10px; border-top: 1px solid #808080; bottom: 88px; height: 20px; left: 92px; position: absolute; width: 60px;}.ele-eyes { left: 60%; position: absolute; top: 6%;}.ele-eyes:before { left: 41px;}.ele-eyes:after { left: 10px;}.ele-ear { -webkit-animation: ear-movement 1s infinite linear; animation: ear-movement 1s infinite linear; background: -webkit-linear-gradient(right, #C2C2C2 10%, darkgray 100%); background: linear-gradient(to left, #C2C2C2 10%, darkgray 100%); border-bottom: 1px solid #808080; border-left: 1px solid #808080; border-top: 1px solid #808080; border-radius: 60px 0 0 50%; height: 110px; left: -22px; position: absolute; top: 25px; -webkit-transform: rotateZ(-10deg); transform: rotateZ(-10deg); width: 60px;}.ele-mouth { -webkit-animation: mouth-movement 1s infinite linear; animation: mouth-movement 1s infinite linear; background: -webkit-linear-gradient(top, #C2C2C2 50%, darkgray 100%); background: linear-gradient(to bottom, #C2C2C2 50%, darkgray 100%); border-radius: 0px 100% 0px 0px; border-top: 2px solid #808080; height: 160px; left: 83%; position: absolute; top: 35%; width: 30px;}.ele-mouth:before { -webkit-animation: mouth-after-movement 1s infinite linear; animation: mouth-after-movement 1s infinite linear; background-color: darkgray; border-bottom: 1px solid #808080; border-left: 1px solid #808080; border-radius: 8px; bottom: 0; content: ''; height: 15px; left: -5px; position: absolute; width: 40px;}.ele-fang-front, .ele-fang-back { border-bottom: 12px solid #FFF; border-radius: 50%; height: 40px; position: absolute; -webkit-transform: rotateZ(20deg); transform: rotateZ(20deg); width: 50px;}.ele-fang-front { box-shadow: 0px 1px 0px #808080; left: 100px; top: 100px;}.ele-fang-front:before { background-color: #C2C2C2; bottom: -10px; content: ''; height: 45px; left: -5px; position: absolute; width: 15px;}.ele-fang-front:after { background-color: #C2C2C2; border-radius: 0 50% 50% 0; bottom: -14px; box-shadow: 1px 1px 0px #808080; content: ''; height: 21px; left: 6px; position: absolute; -webkit-transform: rotateZ(20deg); transform: rotateZ(20deg); width: 15px;}.ele-fang-back { border-bottom-color: #e6e6e6; left: 115px; top: 95px; z-index: -1;}.ele-fang-back:before { background-color: #C2C2C2; bottom: -10px; content: ''; height: 25px; position: absolute; width: 30px;}div[class^="ele-leg-"] { border-left: 1px solid #808080; height: 88px; position: absolute; width: 50px;}div[class^="ele-leg-"]:before { background-color: rgba(74, 74, 74, 0.53); border-radius: 50%; bottom: -30px; box-shadow: 0 0 2px rgba(74, 74, 74, 0.53); content: ''; height: 10px; left: 50%; position: absolute; -webkit-transform: translateX(-50%) rotateZ(0deg); transform: translateX(-50%) rotateZ(0deg); width: 50px;}.ele-leg-front { background-color: #9c9c9c; top: 100%; z-index: 1;}.ele-leg-front .ele-foot { background-color: #9c9c9c;}.ele-leg-back { background-color: #828282; top: 95%;}.ele-leg-back .ele-foot { background-color: #828282;}.ele-leg-back .ele-foot:before, .ele-leg-back .ele-foot:after { background-color: #bababa;}.ele-leg-1 { -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s; animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s; right: 57.5%;}.ele-leg-1:before { -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s; animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;}.ele-leg-1 .ele-foot { -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s; animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;}.ele-leg-2 { -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s; animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s; right: 67.5%;}.ele-leg-2:before { -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s; animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;}.ele-leg-2 .ele-foot { -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s; animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;}.ele-leg-3 { -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s; animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s; right: 5%;}.ele-leg-3:before { -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s; animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;}.ele-leg-3 .ele-foot { -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s; animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) -1s;}.ele-leg-4 { -webkit-animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s; animation: leg-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s; right: 15%;}.ele-leg-4:before { -webkit-animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s; animation: foot-shadow-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;}.ele-leg-4 .ele-foot { -webkit-animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s; animation: foot-animation 2s infinite cubic-bezier(0.63, 0.15, 0.49, 0.93) 0s;}.ele-foot:before, .ele-foot:after { background-color: #E0E0E0; border-radius: 10px 10px 0 0; bottom: 0; content: ''; height: 15px; position: absolute; width: 11px;}.ele-foot { border-radius: 25px 25px 35% 40%; bottom: -17.5px; box-shadow: -1px 1px 0px #808080; height: 35px; left: 50%; overflow: hidden; position: absolute; -webkit-transform: translateX(-49%) rotateZ(0deg); transform: translateX(-49%) rotateZ(0deg); width: 55px;}.ele-foot:before { right: -7.5px;}.ele-foot:after { bottom: -3px; right: 5px;}@-webkit-keyframes leg-animation { 0% { height: 65px; -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0); transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0); } 25% { height: 40px; } 50% { height: 65px; -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0); transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0); } 75% { height: 65px; } 100% { height: 65px; -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0); transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0); }}@keyframes leg-animation { 0% { height: 65px; -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0); transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0); } 25% { height: 40px; } 50% { height: 65px; -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0); transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, -15deg) translate3d(0, 30%, 0); } 75% { height: 65px; } 100% { height: 65px; -webkit-transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0); transform: translate3d(0, -90%, 0) rotate3d(0, 0, 1, 10deg) translate3d(0, 30%, 0); }}@-webkit-keyframes foot-animation { 0% { -webkit-transform: translateX(-49%) rotateZ(-10deg); transform: translateX(-49%) rotateZ(-10deg); } 15% { -webkit-transform: translateX(-49%) rotateZ(5deg); transform: translateX(-49%) rotateZ(5deg); } 40% { -webkit-transform: translateX(-49%) rotateZ(0deg); transform: translateX(-49%) rotateZ(0deg); } 50% { -webkit-transform: translateX(-49%) rotateZ(15deg); transform: translateX(-49%) rotateZ(15deg); } 100% { -webkit-transform: translateX(-49%) rotateZ(-10deg); transform: translateX(-49%) rotateZ(-10deg); }}@keyframes foot-animation { 0% { -webkit-transform: translateX(-49%) rotateZ(-10deg); transform: translateX(-49%) rotateZ(-10deg); } 15% { -webkit-transform: translateX(-49%) rotateZ(5deg); transform: translateX(-49%) rotateZ(5deg); } 40% { -webkit-transform: translateX(-49%) rotateZ(0deg); transform: translateX(-49%) rotateZ(0deg); } 50% { -webkit-transform: translateX(-49%) rotateZ(15deg); transform: translateX(-49%) rotateZ(15deg); } 100% { -webkit-transform: translateX(-49%) rotateZ(-10deg); transform: translateX(-49%) rotateZ(-10deg); }}@-webkit-keyframes foot-shadow-animation { 0% { -webkit-transform: translateX(-50%) rotateZ(-8deg); transform: translateX(-50%) rotateZ(-8deg); bottom: -20px; width: 50px; } 25% { bottom: -30px; width: 40px; } 50% { -webkit-transform: translateX(-50%) rotateZ(13deg); transform: translateX(-50%) rotateZ(13deg); bottom: -20px; width: 50px; } 100% { -webkit-transform: translateX(-50%) rotateZ(-8deg); transform: translateX(-50%) rotateZ(-8deg); bottom: -20px; width: 50px; }}@keyframes foot-shadow-animation { 0% { -webkit-transform: translateX(-50%) rotateZ(-8deg); transform: translateX(-50%) rotateZ(-8deg); bottom: -20px; width: 50px; } 25% { bottom: -30px; width: 40px; } 50% { -webkit-transform: translateX(-50%) rotateZ(13deg); transform: translateX(-50%) rotateZ(13deg); bottom: -20px; width: 50px; } 100% { -webkit-transform: translateX(-50%) rotateZ(-8deg); transform: translateX(-50%) rotateZ(-8deg); bottom: -20px; width: 50px; }}@-webkit-keyframes eyes-blink { 0% { height: 10px; } 3% { height: 1px; } 5% { height: 10px; } 100% { height: 10px; }}@keyframes eyes-blink { 0% { height: 10px; } 3% { height: 1px; } 5% { height: 10px; } 100% { height: 10px; }}@-webkit-keyframes ele-movement { 0% { -webkit-transform: translate3D(-50%, -54%, 0); transform: translate3D(-50%, -54%, 0); } 50% { -webkit-transform: translate3D(-50%, -57%, 0); transform: translate3D(-50%, -57%, 0); } 100% { -webkit-transform: translate3D(-50%, -54%, 0); transform: translate3D(-50%, -54%, 0); }}@keyframes ele-movement { 0% { -webkit-transform: translate3D(-50%, -54%, 0); transform: translate3D(-50%, -54%, 0); } 50% { -webkit-transform: translate3D(-50%, -57%, 0); transform: translate3D(-50%, -57%, 0); } 100% { -webkit-transform: translate3D(-50%, -54%, 0); transform: translate3D(-50%, -54%, 0); }}@-webkit-keyframes mouth-movement { 0% { height: 160px; width: 28px; } 50% { height: 150px; width: 30px; } 100% { height: 160px; width: 28px; }}@keyframes mouth-movement { 0% { height: 160px; width: 28px; } 50% { height: 150px; width: 30px; } 100% { height: 160px; width: 28px; }}@-webkit-keyframes mouth-after-movement { 0% { width: 37px; } 50% { width: 40px; } 100% { width: 37px; }}@keyframes mouth-after-movement { 0% { width: 37px; } 50% { width: 40px; } 100% { width: 37px; }}@-webkit-keyframes tail-movement { 0% { -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg); transform: translate3d(-3%, 69%, 0) rotateZ(-20deg); } 50% { -webkit-transform: translate3d(-5%, 65%, 0) rotateZ(-18deg); transform: translate3d(-5%, 65%, 0) rotateZ(-18deg); } 100% { -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg); transform: translate3d(-3%, 69%, 0) rotateZ(-20deg); }}@keyframes tail-movement { 0% { -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg); transform: translate3d(-3%, 69%, 0) rotateZ(-20deg); } 50% { -webkit-transform: translate3d(-5%, 65%, 0) rotateZ(-18deg); transform: translate3d(-5%, 65%, 0) rotateZ(-18deg); } 100% { -webkit-transform: translate3d(-3%, 69%, 0) rotateZ(-20deg); transform: translate3d(-3%, 69%, 0) rotateZ(-20deg); }}@-webkit-keyframes head-movement { 0% { -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg); transform: translate3d(80%, -22%, 0) rotateZ(3deg); } 25% { -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg); transform: translate3d(80%, -22.5%, 0) rotateZ(0deg); } 50% { -webkit-transform: translate3d(80%, -23%, 0) rotateZ(-3deg); transform: translate3d(80%, -23%, 0) rotateZ(-3deg); } 75% { -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg); transform: translate3d(80%, -22.5%, 0) rotateZ(0deg); } 100% { -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg); transform: translate3d(80%, -22%, 0) rotateZ(3deg); }}@keyframes head-movement { 0% { -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg); transform: translate3d(80%, -22%, 0) rotateZ(3deg); } 25% { -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg); transform: translate3d(80%, -22.5%, 0) rotateZ(0deg); } 50% { -webkit-transform: translate3d(80%, -23%, 0) rotateZ(-3deg); transform: translate3d(80%, -23%, 0) rotateZ(-3deg); } 75% { -webkit-transform: translate3d(80%, -22.5%, 0) rotateZ(0deg); transform: translate3d(80%, -22.5%, 0) rotateZ(0deg); } 100% { -webkit-transform: translate3d(80%, -22%, 0) rotateZ(3deg); transform: translate3d(80%, -22%, 0) rotateZ(3deg); }}@-webkit-keyframes body-movement { 0% { height: 160px; margin-top: 5px; } 50% { height: 162.5px; margin-top: 2.5px; } 100% { height: 160px; margin-top: 5px; }}@keyframes body-movement { 0% { height: 160px; margin-top: 5px; } 50% { height: 162.5px; margin-top: 2.5px; } 100% { height: 160px; margin-top: 5px; }}@-webkit-keyframes ear-movement { 0% { height: 115px; } 50% { height: 110px; } 100% { height: 115px; }}@keyframes ear-movement { 0% { height: 115px; } 50% { height: 110px; } 100% { height: 115px; }}@-webkit-keyframes eyebrows-movement { 0% { height: 18px; } 50% { height: 20px; } 100% { height: 18px; }}@keyframes eyebrows-movement { 0% { height: 18px; } 50% { height: 20px; } 100% { height: 18px; }}</style></head><body><div class="ele-container"> <div class="ele-wrapper"> <div class="ele-tail"></div> <div class="ele-body"> <div class="ele-head"> <div class="ele-eyebrows"></div> <div class="ele-eyes"></div> <div class="ele-mouth"></div> <div class="ele-fang-front"></div> <div class="ele-fang-back"></div> <div class="ele-ear"></div> </div> </div> <div class="ele-leg-1 ele-leg-back"> <div class="ele-foot"></div> </div> <div class="ele-leg-2 ele-leg-front"> <div class="ele-foot"></div> </div> <div class="ele-leg-3 ele-leg-back"> <div class="ele-foot"></div> </div> <div class="ele-leg-4 ele-leg-front"> <div class="ele-foot"></div> </div> </div></div></body></html>大家预览下效果吧。...

用CSS3&JS做一个网站预览统计图的效果

2019年04月04日

CSS3&JS做一个网站预览统计图的效果，默认是简单的数字，滑动上去出现详细数据列表。默认效果：滑动上去【4个滑动都可以】：来看下DEMO代码：<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>统计DEMO</title><style>html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;box-sizing: border-box;font-family: Microsoft Yahei,sans-serif;}.container{width: 1200px;margin: 0 auto;padding: 40px 0px;}.box {padding: 40px;}.iwrap {position: relative;width: 220px;height: 166px;margin: 0 auto;border: 1px solid #e2e2e2;overflow: hidden;}.iwrap .view {padding: 23px;height: 100%;}.iwrap .view span {display: block;}.iwrap .view span.t {height: 36px;line-height: 36px;font-size: 20px;color: #ababab;}.iwrap .view span.num {height: 48px;line-height: 48px;font-size: 48px;color: #6bc30d;font-family: arial;}.iwrap .float {position: absolute;width: 100%;height: 100%;background-color: #6bc30d;padding: 15px;top: -100%;left: -100%;}.iwrap .float .chart {position: relative;display: inline-block;width: 60px;height: 60px;border-left: 2px solid #ffffff;border-bottom: 2px solid #ffffff;vertical-align: middle;}.iwrap .float .chart:before {position: absolute;display: block;content: " ";height: 55px;width: 10px;background-color: #ffffff;left: 4px;bottom: 3px;border-top-left-radius: 2px;border-top-right-radius: 2px;}.iwrap .float .chart:after {position: absolute;display: block;content: " ";height: 35px;width: 10px;background-color: #ffffff;left: 19px;bottom: 3px;border-top-left-radius: 2px;border-top-right-radius: 2px;}.iwrap .float .chart i {position: absolute;display: block;height: 20px;width: 10px;background-color: #ffffff;left: 33px;bottom: 3px;border-top-left-radius: 2px;border-top-right-radius: 2px;}.iwrap .float .chart i:before {position: absolute;display: block;content: " ";height: 6px;width: 10px;background-color: #ffffff;left: 14px;bottom: 0px;border-top-left-radius: 2px;border-top-right-radius: 2px;}.iwrap .float > span {color: #ffffff;font-size: 24px;}.iwrap .float > ul {list-style: none;overflow: hidden;margin-top: 20px;}.iwrap .float > ul li {float: left;width: 50%;height: 30px;line-height: 30px;}.iwrap .float > ul li b {color: #ffffff;font-weight: normal;}.iwrap .float > ul li span {color: #ffffff;}</style></head><body><div class="container"><div class="box"><div class="iwrap"><div class="view"><span class="t">浏览</span><span class="num">235</span></div><div class="float"><i class="chart"><i></i></i><span>笔记人气</span><ul><li><b>浏览：</b><span>235</span></li><li><b>点赞：</b><span>10</span></li><li><b>收藏：</b><span>5</span></li><li><b>评论：</b><span>6</span></li></ul></div></div></div></div></body></html><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script>$(function (){var iwrap = $(".iwrap");var float = $(".float");iwrap.hover(function(e){//mouse infloat.css(moveForward(iwrap, e)).stop(true, true).animate({"left":0, "top":0}, 200);},function(e){//mouse outfloat.animate(moveForward(iwrap, e), 200);});});var moveForward = function(elem, e){var w = elem.width(), h = elem.height(), direction=0, cssprop={};var x = (e.pageX - elem.offset().left - (w / 2)) * (w > h ? (h / w) : 1);var y = (e.pageY - elem.offset().top - (h / 2)) * (h > w ? (w / h) : 1);direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;switch(direction){case 0://from topcssprop.left = 0;cssprop.top = "-100%";break;case 1://from rightcssprop.left = "100%";cssprop.top = 0;break;case 2://from bottomcssprop.left = 0;cssprop.top = "100%";break;case 3://from leftcssprop.left = "-100%";cssprop.top = 0;break;}return cssprop;}</script>O了，就这样咯。...

CSS3：给文字来点特效吧

2019年04月04日

CSS3给文字来点特效，这个会经常用到，收藏了一些效果，分享给大家，来学习吧！如图：DEMO代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css文字效果</title><style type="text/css">* { padding: 0; margin: 0; text-align: center;}body { padding-bottom: 200px;}div { font-size: 36px;}.header-item { line-height: 4;}.box1 { color: rgba(0, 0, 0, .3);}.box2 { text-shadow: 0 0 5px red; -webkit-text-fill-color : transparent;}.box3 { -webkit-text-stroke: 1px red; -webkit-text-fill-color : transparent;}.box4 { background: linear-gradient( to bottom, white, black); -webkit-text-fill-color : transparent; -webkit-background-clip : text;}.box5 { height: 300px; width: 1280px; margin: 0 auto; font-size: 70px; font-weight: 700; background: url(http://www.cnhubei.com/xwzt/2015/2015snjlx/snjfj/201509/W020150930775925767248.jpg) no-repeat center; /*文字样式*/ text-align: center; /*图片文字样式*/ -webkit-text-fill-color: transparent; -webkit-background-clip: text;}.box6 { color:#fefefe; text-shadow: 0px 1px 0px #c0c0c0, 0px 2px 0px #b0b0b0, 0px 3px 0px #a0a0a0, 0px 4px 0px #909090, 0px 5px 10px rgba(0, 0, 0, .9); }.box7 { color:#fefefe; text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd; }.box8 { background-color: #333; background-image: -webkit-linear-gradient(bottom left, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0%); background-image: -o-linear-gradient(bottom left, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0%); background-image: linear-gradient(to top right, transparent 45%, hsla(48,20%,90%,1) 45%, hsla(48,20%,90%,1) 55%, transparent 0%);; background-size: .05em .05em; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px #111; }</style></head><body><p class="header-item">1.透明文字</p><div class="box1">Web前端之家</div><p class="header-item">2.模糊文字</p><div class="box2">Web前端之家</div><p class="header-item">3.镂空文字</p><div class="box3">Web前端之家</div><p class="header-item">4.渐变文字</p><div class="box4">Web前端之家</div><p class="header-item">5.图片背景文字</p><div class="box5">Web前端之家</div><p class="header-item">6.立体文字</p><div class="box6">Web前端之家</div><p class="header-item">7.长阴影文字</p><div class="box7">Web前端之家</div></body></html>...

CSS3之3D魔方酷炫效果：鼠标随意拖拽

2019年04月02日

CSS3之3D魔方酷炫效果，鼠标随意拖拽，也可以点击。主要用的CSS3特效和JS来处理，废话不多说，先看下效果图：直接上DEMO代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CSS3之3D魔方酷炫效果 - Web前端之家</title><style type="text/css">* {margin: 0 auto;padding: 0;}html {background: linear-gradient(135deg, #000 0%, #333 80%);/*渐变色*/cursor: pointer;height: 100%;}.content {margin-top: 200px;perspective: 1000px; /* 视距 */}.box {width: 200px;height: 200px;position: relative;color: #fffdf5;font-size: 36px;font-weight: bold;text-align: center;line-height: 200px;transform-style: preserve-3d; /* 默认 2D */transition: transform 1s; /*transform动画效果*//*不让鼠标选中文字*/-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.box > div {width: 200px;height: 200px;border: 1px solid #8d28ff;position: absolute;background-color: #333;opacity: 0.5;transition: transform 0.4s; /*transform动画效果*/}.box .out-front {transform: translateZ(100px);}.box .out-back {transform: translateZ(-100px) rotateY(180deg);}.box .out-left {transform: translateX(-100px) rotateY(-90deg);}.box .out-right {transform: translateX(100px) rotateY(90deg);}.box .out-top {transform: translateY(-100px) rotateX(90deg);}.box .out-bottom {transform: translateY(100px) rotateX(-90deg);}.box > span {display: block;width: 100px;height: 100px;border: 1px solid black;background-color: #8d28ff;position: absolute;top: 50px;left: 50px;border-radius: 8px;}.box .in-front {transform: translateZ(50px);}.box .in-back {transform: translateZ(-50px) rotateY(180deg);}.box .in-left {transform: translateX(-50px) rotateY(-90deg);}.box .in-right {transform: translateX(50px) rotateY(90deg);}.box .in-top {transform: translateY(-50px) rotateX(90deg);}.box .in-bottom {transform: translateY(50px) rotateX(-90deg);}</style><script src="/demo/js/jq.js" type="text/javascript"></script><script>$(function () {var clickNum = 1; //点击次数$('.box').children().click(function () {if (clickNum % 2 == 0) {console.log(clickNum);//闭合$('.out-front').css({transform: 'translateZ(100px)'});$('.out-back').css({transform: 'translateZ(-100px) rotateY(180deg)'});$('.out-left').css({transform: 'translateX(-100px) rotateY(-90deg)'});$('.out-right').css({transform: 'translateX(100px) rotateY(90deg)'});$('.out-top').css({transform: 'translateY(-100px) rotateX(90deg)'});$('.out-bottom').css({transform: 'translateY(100px) rotateX(-90deg)'});} else {console.log(clickNum);//展开$('.out-front').css({transform: 'translateZ(200px)'});$('.out-back').css({transform: 'translateZ(-200px) rotateY(180deg)'});$('.out-left').css({transform: 'translateX(-200px) rotateY(-90deg)'});$('.out-right').css({transform: 'translateX(200px) rotateY(90deg)'});$('.out-top').css({transform: 'translateY(-200px) rotateX(90deg)'});$('.out-bottom').css({transform: 'translateY(200px) rotateX(-90deg)'});}clickNum++;});//角度初始化var RotateY = 0;var RotateX = 0;$('.box').children().mouseenter(function () { //box 的所有子元素$(this).css({cursor: 'pointer'});});var flag = false;var old_x = 0;var old_y = 0;document.onmousedown = function (e) {flag = true;old_x = e.pageX;old_y = e.pageY;//console.log(old_x, old_y);/*原本所处的位置*/}document.onmouseup = function () {flag = false;//鼠标抬起时结束};document.onmousemove = function (e) {if (flag) {var _x = e.pageX - old_x;var _y = e.pageY - old_y;/*新位置减去老位置*/console.log(_x, _y);RotateY += _x / 70;RotateX += -(_y / 70);$('.box').css({transition: 'linear',transform: 'rotateX(' + RotateX + 'deg) rotateY(' + RotateY + 'deg)'});}};})</script></head><body><div class="content"><div class="box"><div class="out-front">前</div><div class="out-back">后</div><div class="out-left">左</div><div class="out-right">右</div><div class="out-top">上</div><div class="out-bottom">下</div><span class="in-front"></span><span class="in-back"></span><span class="in-left"></span><span class="in-right"></span><span class="in-top"></span><span class="in-bottom"></span></div></div></body></html>可以在console.log下面看到我们记录的坐标，大家可以去看下。...

CSS3实现加载中(loading)等待按钮状态

2019年03月06日

CSS3实现加载中(loading)等待按钮状态，一起来看下源码，学习哦。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> button { opacity: 0.5; cursor: default; pointer-events: none; } button:before { content: ''; display: inline-block; width: 1em; height: 1em; margin-right: 0.5em; color: red; border: 1px solid red; border-radius: 50%; vertical-align: -10%; clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%); animation: rotate 1s linear infinite; } @keyframes rotate { from { transform: rotatez(0deg); } to { transform: rotatez(360deg); } } </style></head><body> <button>css-loading</button></body></html>...

如何用CSS3给文字添加渐变

2019年02月11日

CSS3给文字添加渐变呢，可能有些童鞋就蒙了，用图？当然不是，如果是，那就没分享的必要了，一起来学习下。我们从零开始学习，一共分三步：第一步:绘制文本.text {text-decoration: none;display: inline-block;font-size: 32px;line-height: 1;border-radius: 4px;padding: 16px 32px;background: #50935D;color: #FFF;}<a href="#" class="text">Web前端之家</a>看下效果：第二步:使用渐变渐变属性分线性渐变、径向渐变、重复性线性/径向渐变线性渐变background: linear-gradient(to right,#79F296 40%, #27AE60 60%);这个很熟悉吧，如下图：背景产生了渐变效果toright表示渐变方向从右边开始'#79F296'颜色占据40%,'#27AE60'颜色占据60%径向渐变background: radial-gradient(circle, #79F296, #27AE60);效果如下图：第三步:通过背景剪裁属性可以使文字达到渐变效果实现方式:.text {text-decoration: none;display: inline-block;font-size: 32px;line-height: 1;border-radius: 4px;padding: 16px 32px;background: radial-gradient(circle, #79F296, #27AE60);color: #FFF;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}当然方法不止一种呢，一起来看下另外一种方法：.text {text-decoration: none;display: inline-block;font-size: 32px;line-height: 1;border-radius: 4px;padding: 16px 32px;background: radial-gradient(circle, #79F296, #27AE60);color: transparent;-webkit-background-clip: text;}最后还是帖下完整的DEMO代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>如何用CSS3给文字添加渐变 - Web前端之家</title><style>.text {text-decoration: none;display: inline-block;font-size: 32px;line-height: 1;border-radius: 4px;padding: 16px 32px;background: radial-gradient(circle, #79F296, #27AE60);color: transparent;-webkit-background-clip: text;}</style></head><body><a href="#" class="text">Web前端之家</a></body></html>最终效果如下图：关于文字渐变的效果，用的CSS3，难免有兼容性问题。目前在谷歌OK，IE低版本浏览器不支持。大家可以去尝试下，用在移动端还是不错滴总结其实还有其他方法的，比如用JS，记得先前分享过一篇文章：实现基于jQuery立体文字渐变特效当然，如果大家有更好的方法，也可以分享出来，也可以加QQ群。...

用CSS3&JS实现在三维空间里图片3D旋转效果

2019年01月21日

CSS3&JS实现在三维空间里图片3D旋转效果，效果太酷，所以有些浏览器不支持（只支持webkit内核的浏览器，火狐不支持倒影）的，只是给大家欣赏，学习下，说不定能用上呢。看下效果图：再来看下DEMO代码：<!doctype html><html><head> <meta charset="UTF-8"> <title>用CSS3&JS实现在三维空间里图片3D旋转效果 - Web前端之家</title> <style type="text/css"> body{background-color:#000;} *{padding:0px;margin:0px;} #perspective{perspective: 1000px; /*设置视角距舞台的距离还可已设置是否透视，默认为否*/} #wrap{width:133px; /*外包装*/height:200px;position:relative;top:0;left:0;margin:50px auto;transform-style:preserve-3D;transform:rotateX(-10deg);} #wrap img{width:100%;height:100%;position:absolute;top:0px;left:0px;border-radius:6px;box-shadow:0px 0px 15px #00FA9A;cursor:pointer; /*手型*/ box-reflect:below 6px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));/*倒影*/ -webkit-box-reflect:below 6px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); /*倒影*/ -moz-box-reflect:below 6px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); /*很遗憾，火狐不支持*/ } </style></head><body><div id="perspective">  <div id="wrap">  <img src="/zb_users/upload/2018/12/201812061544087495199196.jpg"/> <img src="/zb_users/upload/2018/12/201812061544087495199196.jpg"/> <img src="/zb_users/upload/2018/12/201812061544087495199196.jpg"/> <img src="/zb_users/upload/2018/12/201812061544087495199196.jpg"/> <img src="/zb_users/upload/2018/12/201812061544087495199196.jpg"/> <img src="/zb_users/upload/2018/12/201812061544087495199196.jpg"/> <img src="/zb_users/upload/2018/12/201812061544087495199196.jpg"/> <img src="/zb_users/upload/2018/12/201812061544087495199196.jpg"/> <img src="/zb_users/upload/2018/12/201812061544087495199196.jpg"/> <img src="/zb_users/upload/2018/12/201812061544087495199196.jpg"/> <img src="/zb_users/upload/2018/12/201812061544087495199196.jpg"/> </div></div><script type="text/javascript"> /* 总结：首先将每个图片赋值一个不同的角度和一个偏移位置然后在拖放时实时更新这个角度和偏移量在拖放结束时逐渐减小这个角度和偏移量也可以做成只在平面转动的，只要不改变rotateX就行 */ window.onload =function(){ var wrapDom = document.querySelector("#wrap"); //获取wrap var imgDom = document.getElementsByTagName("img");//获取wrapimg var wrap = document.getElementById('wrap'); var len = imgDom.length;//获取img的长度 var imgDeg = 360/len; //平分360度 for(var i=0;i<len;i++){ //分别赋值每个img一个rotateY(沿Y轴转动)和translateZ(偏移位置) imgDom[i].style.transform= "rotateY("+i*imgDeg+"deg) translateZ(350px)"; imgDom[i].style.transition ="transform 1s "+(len-1-i)*0.2+"s"; } var lastx,lasty,nowx,nowy,changeX,changeY,roX=-10;roY=0; //初始化新旧鼠标坐标每次改变坐标大小和rotateX和rotateY初始值 center(); //执行函数 window.onresize =center;//当缩放窗口时调用函数 function center(){ // 垂直居中啊 var mt = window.innerHeight/2-wrapDom.offsetHeight; //获取窗口高度除以二再减去容器高度=容器顶距窗口顶的距离 wrapDom.style.cssText = "margin-top:"+mt+"px"; } setTimeout(function(){ wrap.style.backgroundImage = "url(img/12.jpg)"; },2000) document.onmousedown = function(e){ clearInterval(timer) var timer = null; var ev = e||window.event;//兼容事件 lastx = ev.clientX; //当前鼠标位置 lasty = ev.clientY; this.onmousemove = function(e){ clearInterval(timer) var ev = e||window.event; var nowx = ev.clientX; //现在鼠标位置 var nowy = ev.clientY; changeX=nowx-lastx; //x轴变化了多少 changeY=nowy-lasty; //y轴变化了多少 roY+=changeX*0.1; //调节转的速度 roX-=changeY*0.1; //调节转的速度 wrapDom.style.transform="rotateX("+roX+"deg) rotateY("+roY+"deg)"; //赋值新的rotateX和rotateY lastx=nowx; //将旧的数据更新 lasty=nowy; //将旧的数据更新 } this.onmouseup = function(){ this.onmousemove = null; //取消移动事件 timer=setInterval(function(){ //设定时器逐渐减小rotateX和rotateY changeX*=0.95; //每30毫秒rotateX减少5% changeY*=0.95; //每30毫秒rotateY减少5% roY+=changeX*0.2; //调节转的速度 roX-=changeY*0.2; //调节转的速度 wrapDom.style.transform="rotateX("+roX+"deg) rotateY("+roY+"deg)";//赋值新的rotateX和rotateY },30) } return false; //取消默认事件 } }</script></body></html>...

用CSS3画几件漂亮的裙子

2019年01月14日

CSS3画几件漂亮你的裙子，一起来学下咯。先看下效果图：一共三种模式，一起来看下源码吧。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用CSS3画几件漂亮你的裙子</title><style type="text/css">.container{width: 100%;height: 300px;border: 1px solid #000;display: flex;justify-content: center;align-items: center;}.size1{width: 50px;height: 0;border-bottom: 150px solid #c32aff;border-left: 80px solid transparent; /*裙摆两边的角度*/border-right: 80px solid transparent; /*裙摆两边的角度*/border-radius: 0 0 50% 50%; /*裙摆下脚的角度*/}.size2{width: 100px;height: 0;border-bottom: 150px solid #02e60e;border-left: 50px solid transparent;border-right: 50px solid transparent;border-radius: 0 0 30% 30%;}.size3{width: 150px;height: 0;border-bottom: 150px solid #ff2a2a;border-left: 50px solid transparent;border-right: 50px solid transparent;border-radius: 0 0 50% 50%;}</style></head><body> <div class="container"> <div class="size1"></div> <div class="size2"></div> <div class="size3"></div> </div></body></html>...

一起来学习如何用CSS3实现菱形图形

2019年01月10日

一起来学习如何用CSS实现菱形图形，先看效果：直接上代码咯。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>菱形的图形</title><style>img{vertical-align: top;}.picture{width: 300px;margin: 5em;border: 1px solid #000;transform: rotate(45deg);overflow: hidden;}.picture > img {max-width: 100%;transform: rotate(-45deg) scale(1.42);}.picture2 img {clip-path: polygon(50% 0, 100% 50%,50% 100%, 0 50%);transition: 1s clip-path;}.picture2 img:hover {clip-path: polygon(0 0, 100% 0,100% 100%, 0 100%);}</style></head><body><div class="picture"><img src="/demo/cat.jpg" alt="..."></div><div class="picture2"><img src="/demo/cat.jpg" alt="..."></div></body></html>...

CSS3：实现三维空间的叠加效果

2018年12月28日

CSS3实现三维空间的叠加效果，分享出来给大家，一起学习下。先看下效果图：接下来，直接贴上代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3实现3D叠层效果</title> <style> body{ margin: 0; padding: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .container{ position: relative; width: 360px; height: 640px; background: rgba(0,0,0,.1); transform: rotate(-30deg) skew(25deg) scale(.7); transition:.3s; } .container img{ position: absolute; width: 100%; transition: .5s; } .container:hover img:nth-child(4){ transform: translate(160px,-160px); opacity: 1; } .container:hover img:nth-child(3){ transform: translate(120px,-120px); opacity: .8; } .container:hover img:nth-child(2){ transform: translate(80px,-80px); opacity: .5; } .container:hover img:nth-child(1){ opacity: .4; transform: translate(40px,-40px); } </style></head><body> <div class="container"> <img src="https://123p1.sogoucdn.com/imgu/2018/12/20181211151344_369.jpg" > <img src="https://123p1.sogoucdn.com/imgu/2018/12/20181211151344_369.jpg" > <img src="https://123p1.sogoucdn.com/imgu/2018/12/20181211151344_369.jpg" > <img src="https://123p1.sogoucdn.com/imgu/2018/12/20181211151344_369.jpg" > </div></body></html>OK，大家去看下代码吧，是不是很牛逼，学到了吧。...

CSS3转动的三围正方体

2018年11月26日

CSS3转动的三围正方体。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { height: 250px; width:250px; border:brown solid 1px; margin:100px auto; position: relative; /* 将平面的变的有立体感 */ transform-style: preserve-3d; /* 过渡效果 */ transition: all 1s; /* 使用动画*/ animation: move 5s infinite; } .box div { height: 100%; width:100%; position: absolute; top:0px; left:0px; } .top { transform:rotateX(90deg) translateZ(125px); background: url(./1.jpg); } .before { transform: rotateX(180deg) translateZ(125px); background: url(./2.jpg); } .bottom { transform: rotateX(270deg) translateZ(125px); background: url(./3.jpg); } .left { transform: rotateY(90deg) translateZ(125px); background: url(./4.jpg); } .right { transform: rotateY(270deg) translateZ(125px); background: url(./5.jpg); } .after { transform:translateZ(125px); background: url(./6.jpg); } /* 设置动画 --此处相当于定义动画*/ @keyframes move { 0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 20% { transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg); } 40% { transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg); } 60% { transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg); } 80% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100% { transform: rotateX(-90deg) rotateY(-90deg) rotateZ(-90deg); } } </style></head><body> <div class="box">  <div class="top"> </div>  <div class="bottom"></div>  <div class="after"></div>  <div class="before"></div>  <div class="left"></div>  <div class="right"> </div> </div></body></html>...

尝试用CSS3实现无限循环的无缝滚动

2018年10月25日

CSS3来实现若要用CSS3的属性实现的话，非animation莫属，因为transition是需要手动的触发，而且不能无限次执行下去，而animation恰好能解决这个问题。假如数据是在写死的情况下时，我们完全可以手动复制一份数据放在后面，然后把原数据的高度写到css中，实现的思路与上面的一样：css样式:@keyframes rowup { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -240px, 0); transform: translate3d(0, -240px, 0); }}.list{ width: 300px; border: 1px solid #999; margin: 20px auto; position: relative; height: 200px; overflow: hidden; font-size: 15px; font-family: 'Microsoft Yahei';}.list .rowup{ -webkit-animation: 10s rowup linear infinite normal; animation: 10s rowup linear infinite normal; position: relative;}html格式:<div class="list"> <div class="cc rowup"> <div class="s"> <div class="item">1- 121233fffffr国家认可更健康进口价格困扰</div> <div class="item">2- 3123233</div> <div class="item">3- 个人口结构俄跨入国际科技馆客人感觉</div> <div class="item">4- ggrgerg</div> <div class="item">5- fvdgdv</div> <div class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷支持者：她死了法官要负责！</div> <div class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</div> <div class="item">8- 德国网红致信默克尔</div> <div class="item">9- 国资委原</div> </div> <div class="s"> <div class="item">1- 121233fffffr国家认可更健康进口价格困扰</div> <div class="item">2- 3123233</div> <div class="item">3- 个人口结构俄跨入国际科技馆客人感觉</div> <div class="item">4- ggrgerg</div> <div class="item">5- fvdgdv</div> <div class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷支持者：她死了法官要负责！</div> <div class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</div> <div class="item">8- 德国网红致信默克尔</div> <div class="item">9- 国资委原</div> </div> </div></div>2.数据不确定时在上面的小节中，数据是死的，高度也是写死到了CSS3中。可是如果从接口获取到的数据个数不定呢，每条数据的长度也不确定，怎么办呢？这里就需要根据数据来重新计算高度，并写到CSS里，可是keyframes修改起来还比较麻烦，那么我们就用覆盖的方式来重新keyframes中的数据：// 设置keyframes属性function addKeyFrames(y){ var style = document.createElement('style'); style.type = 'text/css'; var keyFrames = '\ @-webkit-keyframes rowup {\ 0% {\ -webkit-transform: translate3d(0, 0, 0);\ transform: translate3d(0, 0, 0);\ }\ 100% {\ -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\ transform: translate3d(0, A_DYNAMIC_VALUE, 0);\ }\ }\ @keyframes rowup {\ 0% {\ -webkit-transform: translate3d(0, 0, 0);\ transform: translate3d(0, 0, 0);\ }\ 100% {\ -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\ transform: translate3d(0, A_DYNAMIC_VALUE, 0);\ }\ }'; style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y); document.getElementsByTagName('head')[0].appendChild(style);}计算出原始数据A的高度后，执行 addKeyFrames 方法，往head中添加css属性，那么这里的rowup就会覆盖掉之前设置的，每次滚动的距离就是数据A的高度：function init(){ var data = '塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。羌管悠悠霜满地，人不寐，将军白发征夫泪。', //样例数据 data_len = data.length, len = parseInt(Math.random()*6)+6, // 数据的长度 html = '<div class="ss">'; for(var i=0; i<len; i++){ var start = parseInt( Math.random()*(data_len-20) ), s = parseInt( Math.random()*data_len ); html += '<div class="item"v>'+i+'- '+data.substr(start, s)+'</div>'; } html += '</div>'; document.querySelector('.list .cc').innerHTML = html+html; // 复制一份数据 var height = document.querySelector('.list .ss').offsetHeight; // 一份数据的高度 addKeyFrames( '-'+height+'px' ); // 设置keyframes document.querySelector('.list .cc').className += ' rowup'; // 添加 rowup}init();这样在CSS3与js的结合下，更完美的呈现无缝滚动。3.横向滚动上面讲解的都是向上滚动，那么向左，向右，向下也比较容易理解了，把transform中的值更改为对应的数值即可。4.总结使用CSS来进行动画的展示，会让页面显得更加流畅。如果能用CSS实现，可以尝试尽量用CSS实现下。...

分享一个用CSS3做的雨天雷电动画特效

2018年10月08日

CSS3雨天雷电动画效果，还是“热”的，请拿走，不谢。思维每次做动画之前，我们都必须了解动画的帧数，脑子里有自己的思路，然后跟设计师沟通，提取一些动画元素。比如这次我需要做2个元素的雷电动画，并且是交叉进行，模拟现实中的效果。我们先来处理第一个，后面一个就很简单了。实现思路：1、第一帧：雷电图的高度为0，设置50%透明度2、然后就是显示出图，即高度变成图片的高度3、第三步很关键，现实中的雷电效果就是劈下来，会闪动几下，所以我们需要设置几帧来实现闪动效果，我这里设置了几个断点。比如在8%、12%,16%处设置为50%透明度，在10%，14%处设置透明度为1。这块挺折腾的，大家可以根据情况去调节闪动速度，我提供的仅供参考。4、雷电逐渐消失，于是我在50%处设置透明图为0，100%处设置高度为图片的高度，透明度也为0，即雷电停止逐渐消失。5、有人问了，闪动的区间那么小？因为雷电的速度是很快的，所以设置的时间段很短的。演示了解完实现思路，就简单了，接下来我们就考验你的技术了，实战开始，这里就不啰嗦，直接上代码，相信大家根据上面讲的，然后对照下很容易理解的哟。HTML代码：<div class="banner"> <div class="lightning"> <div class="lightning1"><img src="https://jiangweishan.com/demo/lightning1.png"></div> <div class="lightning2"><img src="https://jiangweishan.com/demo/lightning2.png"></div> </div> </div>核心CSS代码：@keyframes flash_light { 0% { height: 0px; opacity: 0.5; } 7.5% { height: 320px; } 8%, 12%, 16% { opacity: 0.5; } 10%, 14% { opacity: 1; } 50% { opacity: 0; } 100% { height: 320px; opacity: 0; }}.lightning div img { display: block; margin: auto; width: 100%;}.lightning .lightning1 { position: absolute; right: 70%; animation: flash_light 5.7s infinite;}.lightning .lightning2 { position: absolute; left: 70%; animation: flash_light 5.1s infinite; animation-delay: -2.33s;}因为有两道闪电，实现了第一道闪电，第二道闪电调用同一个动画方法，只要做一个延时特效就可以了，我设置延时2.33s播放。其实你还可以实现更多的闪电效果，核心方法已经分享给大家了，自己去扩展吧。最后还是要把整个DEMO的代码贴出来。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>雷电效果-Web前端之家</title> <style type="text/css"> body{background:#000;} .lightning { position: absolute; z-index: 1; top: 0; width: 100%; } .lightning div { position: absolute; overflow: hidden; } @keyframes flash_light { 0% { height: 0px; opacity: 0.5; } 7.5% { height: 320px; } 8%, 12%, 16% { opacity: 0.5; } 10%, 14% { opacity: 1; } 50% { opacity: 0; } 100% { height: 320px; opacity: 0; } } .lightning div img { display: block; margin: auto; width: 100%; } .lightning .lightning1 { position: absolute; right: 70%; animation: flash_light 5.7s infinite; } .lightning .lightning2 { position: absolute; left: 70%; animation: flash_light 5.1s infinite; animation-delay: -2.33s; } </style></head><body><div class="banner"> <div class="lightning"> <div class="lightning1"><img src="https://jiangweishan.com/demo/lightning1.png"></div> <div class="lightning2"><img src="https://jiangweishan.com/demo/lightning2.png"></div> </div> </div></body></html>大家可以预览下，是不是很吊呢。总结只有想不到，没有做不到；有些效果实现起来，并没有我们想象的那么复杂，如果你能静下心来认真去分析，肯定能实现，难道不是吗?...

了解下CSS3中的pointer-events属性

2018年09月13日

最近发现了一个叫pointer-events的css属性，是一个与javascript有关的属性，pointer-events直译为指针事件，当把值设置为none后，他有如下相关特性。阻止用户的点击动作产生任何效果阻止缺省鼠标指针的显示阻止Css里的Hover和Active状态的变化触发事件阻止Javascript点击动作触发的事件一条CSS可以做许多事情是不是很神奇，我们在看一下兼容性情况如何。IE　11+Firefox　3.6＋Chrome　4.0+Safari　　6.0Opera　15.0iOSSafari6.0AndroidBrowser　2.1+AndroidChrome　18.0+<!DOCTYPE html><html> <head> <style> <style> a.noLink{ pointer-events: none; } .bottom { background: yellow; width: 100px; height: 100px; } .top { width: 100px; height: 100px; position: absolute; top: 0; left: 0;background:rgba(0,0,0,.2);} .top span{margin-top:50px;display:inline-block} </style> </style> </head> <body> <div>  <div class="bottom"> <a href="www.baidu.com">bottom-百度</a> </div>  <div class="top"><span>我是上层top</span></div> <button id="btnP"> 添加pointer-events </button> </div> </body> <script type="text/javascript" class="library" src="/demo/js/jq.js"></script><script> $('#btnP').click(function(){ $('.top').css('pointer-events', 'none') })</script></html>...

学习如何用CSS3画不规则图形

2018年07月24日

CSS3画不规则图形，比如平行四边形导航条、梯形导航条等。一、平行四边导航条效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>平行四边导航条</title> <style> .keith li { list-style: none; position: relative; display: inline-block; padding: 10px 15px; color: #fff; cursor: pointer; } .keith li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; border-radius: 5px; z-index: -1; background: #2175BC; transform: skewX(-25deg); } .keith li:hover::after { background: #39a3f5; } </style></head><body> <ul class='keith'> <li>首页</li> <li>笔记</li> <li>问问</li> <li>学习</li> <li>设置</li> </ul></body></html>实现思路:使用CSS3的2D变形中的skew()倾斜属性，让伪元素倾斜而不是li倾斜，是为了让li的文本正常显示。二、梯形导航条效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>梯形导航条</title> <style> .keith li { list-style: none; position: relative; display: inline-block; padding: 20px 15px 5px 15px; margin-left: -10px; color: #fff; cursor: pointer; } .keith li::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; background: #2175BC; border: 1px solid #fff; border-top-right-radius: 8px; border-top-left-radius: 8px; transform: perspective(0.5em) rotateX(5deg); transform-origin: bottom; } .keith li:hover::after { background: #39a3f5; } </style></head><body> <ul class='keith'> <li>首页</li> <li>笔记</li> <li>问问</li> <li>学习</li> <li>设置</li> </ul></body></html>实现思路:使用CSS33D变形中的perspective()、rotateX()、transform-origin。perspective():用于设置用户和元素3D空间Z平面之间的距离，值越小，用户与3D空间Z平面距离越近，视觉效果会明显；反之，值越大，用户与3D空间Z平面距离越远，视觉效果越小。rotateX():3D空间上X轴的旋转tansform-origin:指定元素的旋转中心点位置，可以控制梯形倾斜。值为bottom，不倾斜；值为left，左倾斜；值为right，右倾斜。...

2018世界杯，用HTML5+CSS3来画个足球场

2018年06月28日

CSS3来画个足球场。<!DOCTYPE html><html><head> <style> body, html { position: relative; margin: 0; padding: 0; background: -webkit-gradient(radial, 50%, 0, 50%, 100, color-stop(0%, #c26649), color-stop(100%, #6b220b)); background: -webkit-radial-gradient(center, ellipse cover, #c26649 0%, #6b220b 100%); background: -moz-radial-gradient(center, ellipse cover, #c26649 0%, #6b220b 100%); background: radial-gradient(center, ellipse cover, #c26649 0%, #6b220b 100%); text-align: center; vertical-align: middle; height: 100%; } .centrar { margin: 0; padding: 0; display: inline-block; height: 100%; width: 0; margin: 0; padding: 0; vertical-align: middle; } .campo { position: relative; display: inline-block; vertical-align: middle; width: 90%; height: 0; margin: 10px auto; padding: 0 0 60% 0; background: green; } .interior, .divisoria, .semi1, .semi2, .corner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 94%; height: 90%; margin: auto; border: 2px solid #eee; } .divisoria:after, .divisoria:before { content: ""; position: absolute; left: 50%; display: block; width: 0; height: 100%; margin-left: .5px; border: 1px solid #eee; } .divisoria:before { top: 50%; width: 16%; height: 0; margin: -8% 0 0 -8%; margin-top: calc(-8% - 4px); margin-left: calc(-8% - .5px); padding-bottom: 16%; border-radius: 50%; border: 2px solid #eee; } .campo:before, .campo:after { content: ""; position: absolute; top: 50%; left: 3%; margin: -8% 0 0 -2px; display: block; width: 6%; height: 24%; border: 2px solid #eee; z-index: 2; } .campo:after { left: auto; right: 3%; margin-right: -2px; } .interior:before, .interior:after { content: ""; position: absolute; top: 50%; left: 0; margin: -16% 0 0 -2px; display: block; width: 16%; height: 50%; background: green; border: 2px solid #eee; } .interior:after { left: auto; right: 0; margin: -16% -2px 0 0; } .semi1:before, .semi2:before { content: ""; position: absolute; top: 50%; left: 12%; display: block; width: 1%; height: 1.5%; margin: -.75% 0 0 0; background: #eee; border-radius: 50%; z-index: 2; } .semi2:before { left: auto; right: 12%; } .semi1:after, .semi2:after { content: ""; position: absolute; top: 50%; left: 5%; width: 16%; height: 0; margin: -8% 0 0 0; padding-bottom: 16%; border: 2px solid #eee; border-radius: 50%; } .semi2:after { left: auto; right: 5%; } .corner { overflow: hidden; } .corner1:before, .corner2:before, .corner1:after, .corner2:after { content: ""; position: absolute; top: -6%; left: -4%; width: 6%; height: 0; margin: 0 0 0 0; padding-bottom: 6%; border: 2px solid #eee; border-radius: 50%; } .corner1:after { left: auto; right: -4%; } .corner2:before { top: auto; bottom: -6%; } .corner2:after { top: auto; bottom: -6%; left: auto; right: -4%; }</style> </head> <body> <div class="centrar"></div> <div class="campo"> <div class="corner"> <div class="corner1"></div> <div class="corner2"></div> </div> <div class="semi1"></div> <div class="semi2"></div> <div class="divisoria"></div> <div class="interior"></div> <div class="penalty"></div> </div> </body></html>...

CSS3：行驶中的自行车，浪起来吧！

2018年06月04日

CSS3：行驶中的自行车，浪起来吧！<!DOCTYPE html><html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <style> .canvas{ width: 80%; height:80%; background:#ccc; position:absolute; left:0; right:0; bottom:0; top:0; margin:auto; overflow: hidden; } .road{ width: 100%; height:100px; position:absolute; left:0; right:0; bottom:0; margin:auto; background:#333; transform: rotateX(30deg); display: -webkit-flex; display: flex; justify-content: space-between; flex-direction: column; } .road>span{ width: 100%; height:5px; border-width:5px; border-style:solid; border-color:#999 transparent #666; background:#fff; } .road>div{ width: 100%; height:5px; display: -webkit-flex; display: flex; align-items: center; animation: road .1s linear infinite; } .road>div>i{ width: 15px; height:2px; margin-right:3px; background:#fff; } .bicycle{ width:80%; height:60%; position:absolute; left:0; right:0; bottom:0; margin:auto; } .chain{ width: 500px; height:250px; position:absolute; left:-185px; right:0; bottom:18px; margin: auto; transform: rotate(5deg); z-index: 1; } .top-chain{ width: 200px; height:3px; transform: rotate(-7deg); margin-top:84px; margin-left:80px; overflow: hidden; } .bottom-chain{ width: 179px; height:3px; transform: rotate(6deg); margin-top:58px; margin-left:88px; overflow: hidden; } .top-chain>div{ width: 300px; display: -webkit-flex; display: flex; align-items: center; animation: topChain .1s linear infinite; } .bottom-chain>div{ width: 300px; display: -webkit-flex; display: flex; align-items: center; animation: road .1s linear infinite; } .top-chain>div>i{ margin-right:3px; width: 15px; height:5px; background:#b7b6b6; } .bottom-chain>div>i{ margin-right:3px; width: 15px; height:5px; background:#b7b6b6; } .right-axis{ width: 80px; height:80px; border-radius:50%; display: -webkit-flex; display: flex; justify-content: center; align-items: center; background:#ccc; border:3px dashed #999; position:absolute; right:180px; top:73px; animation: axis .8s linear infinite; z-index:1; } .right-axis>i{ width: 30px; height:30px; border-radius:50%; background:#999; border:2px dashed #666; display: -webkit-flex; display: flex; justify-content: center; align-items: center; } .left-axis{ width: 37px; height:37px; border-radius:50%; border:3px dashed #999; position:absolute; left:70px; top:95px; animation: axis .8s linear infinite; z-index:0; } .left-tread{ width:100px; height:100px; border-radius:50%; position: absolute; right:173px; top:66px; animation: axis .8s linear infinite; } .right-tread{ width:100px; height:100px; border-radius:50%; position: absolute; right:173px; top:66px; z-index:2; animation: axis .8s linear infinite; display: -webkit-flex; display: flex; justify-content: center; align-items: center; } .right-tread .top, .left-tread .top{ width: 20px; height:20px; border-radius:50%; background:#fff; display: block; position:absolute; left:0; right:0; bottom:0; top:0; margin:auto; } .right-tread .top>i{ width: 10px; height:10px; background:#333; display: block; } .right-tread .top::before, .left-tread .top::before{ content:''; width: 2px; height:80px; background:#fff; display: block; transform: rotate(-3deg); margin-top:10px; margin-left:2px; } .left-tread .top::before{ transform: rotate(3deg); margin-top:-70px; } .right-tread .top::after, .left-tread .top::after{ content:''; width: 2px; height:80px; background:#fff; display: block; transform: rotate(3deg); margin-top:10px; position: absolute; right:2px; top:0; } .left-tread .top::after{ transform: rotate(-3deg); top:-78px; } .right-tread .bottom, .left-tread .bottom{ width: 12px; height:12px; background:#fff; border-radius: 50%; position: absolute; bottom:-36px; left:0; right:0; margin:auto; } .left-tread .bottom{ bottom:123px; } .right-tread .left, .left-tread .left{ width: 50px; height:30px; background:#fff; position:absolute; bottom:-52px; left:0; right:0; margin:auto; transform: rotateX(65deg) rotateY(0deg) rotateZ(90deg); transform-style: preserve-3d; box-shadow: 10px 0px 8px #949494; } .left-tread .left{ bottom:122px; box-shadow: -10px 0px 8px #949494; } .right-axis>span{ width: 100%; height:10px; border:2px solid #f8f8f8; position:absolute; left:0; right:0; bottom:0; top:0; margin:auto; box-sizing: border-box; z-index:-1; border-width: 2px 0px; } .right-axis>span:nth-child(3){ transform: rotate(45deg); } .right-axis>span:nth-child(4){ transform: rotate(90deg); } .right-axis>span:nth-child(5){ transform: rotate(135deg); } .back-wheel,.before-wheel{ width: 200px; height:200px; border-radius:50%; border:15px solid #222; position:absolute; bottom:0; left:-318px; right:0; top:-18px; margin:auto; animation: axis .5s linear infinite; display: -webkit-flex; display: flex; justify-content: center; align-items: center; } .before-wheel{ left:444px; top:-98px; } .back-wheel:before, .before-wheel:before{ content:''; width: 230px; height:230px; display: block; border-radius:50%; position: absolute; left:-15px; top:-15px; border:2px dashed #fff; box-shadow: inset 0 0 15px #fff; z-index:1; box-sizing: border-box; } .back-wheel:after, .before-wheel:after{ content:''; width: 204px; height:204px; display: block; border-radius:50%; position: absolute; left:-3px; top:-3px; border:1px solid #f2f2f2; z-index:1; } .back-wheel>i, .before-wheel>i{ width: 100%; height:10px; border:2px solid #f2f2f2; border-width: 2px 0 ; position: absolute; left:0; right:0; margin:auto; } .back-wheel>i:nth-child(2), .before-wheel>i:nth-child(2){ transform: rotate(30deg); } .back-wheel>i:nth-child(3), .before-wheel>i:nth-child(3){ transform: rotate(60deg); } .back-wheel>i:nth-child(4), .before-wheel>i:nth-child(4){ transform: rotate(90deg); } .back-wheel>i:nth-child(5), .before-wheel>i:nth-child(5){ transform: rotate(120deg); } .back-wheel>i:nth-child(6), .before-wheel>i:nth-child(6){ transform: rotate(150deg); } .back-wheel>div, .before-wheel>div{ width: 20px; height:20px; /* background:radial-gradient(#fff 5%,#000 95%); */ border-radius:50%; display: flex; justify-content: center; align-items: center; background:#bfbfbf; z-index:1; } .back-wheel>div:before, .before-wheel>div:before{ content:''; background:radial-gradient(#fff,#000); width: 10px; height:10px; display: block; border-radius:50%; } .before-stand{ width: 120px; height:18px; box-shadow: inset 0px -6px 15px #afafaf; position: absolute; bottom:218px; right:-94px; background:#f2f2f2; transform: rotate(65deg); } .top-stand{ width: 120px; height:18px; box-shadow: inset 0px -6px 15px #afafaf; position: absolute; bottom:344px; right:-35px; background:#f2f2f2; transform: rotate(65deg); z-index: 2; } .center-top-stand{ width: 267px; height:18px; box-shadow: inset 0px 6px 15px #afafaf; position: absolute; bottom:315px; right:30px; background:#f2f2f2; transform: rotate(-15deg); z-index:-1; } .center-stand{ width: 264px; height:18px; box-shadow: inset 0px -6px 15px #afafaf; position: absolute; bottom:240px; right:145px; background:#f2f2f2; transform: rotate(65deg); } .center-bottom-stand{ width: 296px; height:18px; box-shadow: inset 0px -6px 15px #afafaf; position: absolute; bottom:236px; right:-28px; background:#f2f2f2; transform: rotate(-47deg); } .left-bottom-stand{ width: 200px; height:9px; box-shadow: inset 0px -4px 8px #afafaf; position: absolute; bottom:126px; right:200px; background:#f2f2f2; transform: rotate(1deg); } .left-top-stand{ width: 180px; height:9px; box-shadow: inset 0px 4px 8px #afafaf; position: absolute; bottom:210px; right:263px; background:#f2f2f2; transform: rotate(-55deg); z-index:0; } .before-stand>div{ width: 20px; height:20px; border-radius:50%; display: flex; justify-content: center; align-items: center; background:#bfbfbf; z-index:1; position:absolute; top:-1px; right:-9px; display: flex; justify-content: center; align-items: center; } .before-stand>div:before{ content:''; background:radial-gradient(#fff,#000); width: 10px; height:10px; display: block; border-radius:50%; } .plug{ width: 22px; height:22px; background:#333; position:absolute; top:-50px; right:-16px; transform: rotate(-25deg); border-radius:2px; box-shadow: inset 0 0 15px #ccc; transform-style: preserve-3d; } .plug .top{ width: 22px; height: calc(22px / 2); border-radius:50%; background:#fff; transform: rotateX(70deg) translateY(-18px); } .plug .bottom{ width: 22px; height: calc(22px / 2); border-radius:50%; background:#fff; transform: rotateX(70deg) translateY(13px); } .plug-top{ width: 22px; height:22px; background:#333; position:absolute; top:-176px; right:43px; transform: rotate(-25deg); border-radius:2px; box-shadow: inset 0 0 15px #ccc; transform-style: preserve-3d; } .plug-top .top{ width: 22px; height: calc(22px / 2); border-radius:50%; background:#fff; transform: rotateX(70deg) translateY(-18px); } .plug-top .bottom{ width: 22px; height: calc(22px / 2); border-radius:50%; background:#fff; transform: rotateX(70deg) translateY(13px); } .handgrip{ width: 48px; height:50px; border-left: 10px solid #a09f9f; border-top: 5px solid #a09f9f; border-bottom: 5px solid #a09f9f; border-top-left-radius: 45px; border-bottom-left-radius: 45px; position:absolute; top:-256px; right:30px; transform: rotate(-30deg); } .handgrip::before, .handgrip::after{ content:''; width: 30px; height: 12px; display: block; background:#333; border-radius:10px; margin-left:25px; margin-top:-10px; } .handgrip::after{ margin-top:43px; } .hand{ width: 22px; height:50px; position: absolute; right:54px; top:-214px; transform: rotate(-28deg); display: -webkit-flex; display: flex; justify-content: flex-end; align-items: center; flex-direction: column; } .hand:before{ content:''; width:8px; height:50px; box-shadow: inset -2px 0 10px #4a4a4a; display: block; } .hand:after{ content:''; width: 22px; height: calc(22px / 2); border-radius: 50%; background: #ccc; transform: rotateX(70deg) translateY(-18px); display: block; } .seat{ width: 150px; height:50px; position:absolute; top:-148px; left:115px; transform: rotateZ(-5deg) rotateX(30deg); transform-style: preserve-3d; } .seat:before{ content:''; position: absolute; left:10px; top:-8px; border-color:transparent transparent transparent #fff; border-width: 22px 0 22px 110px; border-style:solid; width: 10px; height:10px; } .seat .top{ width: 100px; height:1px; background:#fff; display: block; transform: rotate(10deg); margin-left:15px; } .seat .right{ width: 20px; height:20px; position:absolute; right:27px; top:9px; border-radius:50%; background:#fff; } .seat .bottom{ width: 100px; height:1px; background:#fff; transform: rotate(-10deg); position: absolute; right:35px; bottom:12px; } .seat .left{ width: 34px; height:54px; position:absolute; left:-4px; top:-8px; border-radius:50%; background:#fff; } .seat>div{ width: 10px; height:30px; background:#333; position:absolute; left:40px; bottom:-18px; z-index:-1; transform: rotate(-20deg); } .seat>div:before{ content:''; width: 10px; height:30px; background:#333; position:absolute; left:0; top:0; z-index:-1; } .seat>div:after{ content:''; width: 5px; background:#666; height:30px; position:absolute; bottom:-26px; right:0; z-index:-2; } .seat>div>i{ width: 100%; height:2px; display: block; margin-top:5px; background:#f2f2f2; } @keyframes road{ form{ transform: translate3d(0 ,0 ,0 ); } to{ transform: translate3d(-18px ,0 ,0 ); } } @keyframes topChain{ form{ transform: translate3d(0 ,0 ,0 ); } to{ transform: translate3d(18px ,0 ,0 ); } } @keyframes axis{ form{ transform:rotate(0deg) } to{ transform:rotate(360deg) } } @keyframes wheel{ form{ transform:rotate(0deg) } to{ transform:rotate(-360deg) } } </style> <div class="canvas">  <div class="road"> <span></span> <div class="line"> <i></i> </div> <span></span> </div>   <div class="bicycle"> <div class="chain">  <div class="left-tread"> <i class="top"></i> <i class="right"></i> <i class="bottom"></i> <i class="left"></i> </div>  <div class="back-wheel"> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <div> </div> </div>  <div class="top-chain"> <div> <i></i> </div> </div>  <div class="bottom-chain"> <div> <i></i> </div> </div>  <div class="left-axis"></div>  <div class="before-wheel"> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <div> </div> </div>  <div class="stand"> <div class="plug"> <div class="top"></div> <div class="bottom"></div> </div> <div class="plug-top"> <div class="top"></div> <div class="bottom"></div> </div>  <div class="before-stand"> <div> </div> </div> <div class="top-stand"> <div> </div> </div>  <div class="center-top-stand"> </div>  <div class="left-top-stand"> </div>  <div class="center-stand"> </div>  <div class="center-bottom-stand"> </div>  <div class="left-bottom-stand"> </div> <div class="hand"> </div>  <div class="handgrip"> </div> <div class="handgrip"> </div> </div>  <div class="right-axis"> <i></i> <span></span> <span></span> <span></span> <span></span> </div>  <div class="right-tread"> <i class="top"> <i></i> </i> <i class="right"></i> <i class="bottom"></i> <i class="left"></i> </div> <div class="seat"> <i class="top"></i> <i class="right"></i> <i class="bottom"></i> <i class="left"></i> <div> <i></i> <i></i> <i></i> <i></i> </div> </div> </div> </div> </div> <script> window.onload = function(){ var w = (document.querySelector(".canvas").offsetWidth / 18).toFixed(0) , cW = (document.querySelector(".top-chain").offsetWidth / 18).toFixed(0) var i = document.createElement("i") for(let o = 0;o<w;o++){ document.querySelector(".line").appendChild(i.cloneNode(true)); } for(let o = 0;o<cW;o++){ document.querySelector(".top-chain>div").appendChild(i.cloneNode(true)); } for(let o = 0;o<cW;o++){ document.querySelector(".bottom-chain>div").appendChild(i.cloneNode(true)); } } </script> </body></html>...

CSS3：动起来的自行车

2018年05月22日

CSS3描绘出动起来的自行车，大家可以学习下。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>纯CSS3实现自行车动画DEMO演示</title> <style> * { padding: 0; margin: 0;}html , body { width: 100%; height: 100%; position: fixed; top: 50%; left: 0%;}html { background-color:#000; }#animation { width:450px; margin:auto;}.bike { position:relative;}.front.wheel { margin-left: 140px;}.back.wheel { margin-left: -120px;}.wheel { width: 144px; height: 144px; margin-top: 50px; border-radius: 150px; position: absolute; top: calc(50% - 75px); left: calc(50% - 75px); border: 3px solid #ff6f6a; overflow: hidden; border-radius: 150px; animation: wheelSpin 1.6s linear 0s infinite reverse none; -webkit-animation: wheelSpin 1.6s linear 0s infinite reverse none;}.wheel .hub { background-color: rgba(115,118,121,1); border: 2px dotted rgba(235,238,241,0.5); width: 10px; height: 10px; border-radius: 150px; position: absolute; top: calc(50% - 7px); left: calc(50% - 7px); z-index: 12;}.wheel .gear { background-color: rgba(75,78,81,1); border: 3px dotted rgba(255,250,250,1); border-radius: 150px; position: absolute; top: calc(50% - 13px); left: calc(50% - 13px); width: 20px; height: 20px; z-index: -1;}.wheel .rim { position: absolute; width: calc( 100% - 4px ); height: calc( 100% - 4px ); border: 2px solid rgba(255,111,106,0.9); border-radius: 150px; z-index: 12;}.wheel .rim .air { position: absolute; background-color: rgba(18,22,26,1); left: 50%; width: 2px; height: 6px; border-radius: 5px; z-index: 14; margin-left: -8px;}.back.wheel .rim .air { bottom: 0;}.wheel .spokes div { position: absolute; width: 0px; height: 144px; border-left: 1px solid rgba(255,111,106,0.5); margin-left: calc( 50% - 1px );}.wheel .spokes div:nth-of-type(1){ -webkit-transform: rotate(22.5deg); transform: rotate(22.5deg);}.wheel .spokes div:nth-of-type(2){ -webkit-transform: rotate(45deg); transform: rotate(45deg);}.wheel .spokes div:nth-of-type(3){ -webkit-transform: rotate(67.5deg); transform: rotate(67.5deg);}.wheel .spokes div:nth-of-type(4){ -webkit-transform: rotate(90deg); transform: rotate(90deg);}.wheel .spokes div:nth-of-type(5){ -webkit-transform: rotate(112.5deg); transform: rotate(112.5deg);}.wheel .spokes div:nth-of-type(6){ -webkit-transform: rotate(135deg); transform: rotate(135deg);}.wheel .spokes div:nth-of-type(7){ -webkit-transform: rotate(157.5deg); transform: rotate(157.5deg);}.wheel .spokes div:nth-of-type(8){ -webkit-transform: rotate(180deg); transform: rotate(180deg);}@keyframes wheelSpin { 100% { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg);} 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);} }@-webkit-keyframes wheelSpin { 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);} 0% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);} }@keyframes audioLines { 100% { width: 0px;} 81% { width: 0px;} 78% { width: 15px;} 75% { width: 0;} 72% { width: 15px;} 69% { width: 0px;} 0% { width: 0px;} }@-webkit-keyframes audioLines { 100% { width: 0px;} 81% { width: 0px;} 78% { width: 15px;} 75% { width: 0;} 72% { width: 15px;} 69% { width: 0px;} 0% { width: 0px;} }@keyframes audioMove { 100% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 81% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 78% { -webkit-transform: translate(2px , 0px); -moz-transform: translate(2px , 0px); -ms-transform: translate(2px , 0px); -o-transform: translate(2px , 0px); transform: translate(2px , 0px);} 75% { -webkit-transform: translate(-2px , 0px) rotate( -10deg ); -moz-transform: translate(-2px , 0px) rotate( -10deg ); -ms-transform: translate(-2px , 0px) rotate( -10deg ); -o-transform: translate(-2px , 0px) rotate( -10deg ); transform: translate(-2px , 0px) rotate( -10deg );} 72% { -webkit-transform: translate(2px , 0px) rotate( 10deg ); -moz-transform: translate(2px , 0px) rotate( 10deg ); -ms-transform: translate(2px , 0px) rotate( 10deg ); -o-transform: translate(2px , 0px) rotate( 10deg ); transform: translate(2px , 0px) rotate( 10deg );} 69% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 0% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} }@-webkit-keyframes audioMove { 100% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 81% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 78% { -webkit-transform: translate(2px , 0px); -moz-transform: translate(2px , 0px); -ms-transform: translate(2px , 0px); -o-transform: translate(2px , 0px); transform: translate(2px , 0px);} 75% { -webkit-transform: translate(-2px , 0px) rotate( -10deg ); -moz-transform: translate(-2px , 0px) rotate( -10deg ); -ms-transform: translate(-2px , 0px) rotate( -10deg ); -o-transform: translate(-2px , 0px) rotate( -10deg ); transform: translate(-2px , 0px) rotate( -10deg );} 72% { -webkit-transform: translate(2px , 0px) rotate( 10deg ); -moz-transform: translate(2px , 0px) rotate( 10deg ); -ms-transform: translate(2px , 0px) rotate( 10deg ); -o-transform: translate(2px , 0px) rotate( 10deg ); transform: translate(2px , 0px) rotate( 10deg );} 69% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} 0% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);} }.frame div { position: absolute; background-color: rgba(255,111,106,1); border-radius: 8px; top: 50%; right: 50%; width: 4px; margin-right: 4px;}.frame div.small { width: 4px; margin-right: 2px;}.frame div:nth-of-type(1){ height: 148px; margin-top: -85px; margin-right: 30px; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); transform: rotate(-20deg);}.frame div:nth-of-type(2){ height: 118px; margin-top: -4px; margin-right: 62px; -webkit-transform: rotate(-86deg); -moz-transform: rotate(-86deg); -ms-transform: rotate(-86deg); -o-transform: rotate(-86deg); transform: rotate(-86deg);}.frame div:nth-of-type(3){ height: 146px; margin-top: -64px; margin-right: -46px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}.frame div:nth-of-type(4){ height: 120px; margin-top: -55px; margin-right: 80px; -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); -o-transform: rotate(40deg); transform: rotate(40deg);}.frame div:nth-of-type(5){ height: 135px; margin-top: -113px; margin-right: -28px; -webkit-transform: rotate(-94deg); -moz-transform: rotate(-94deg); -ms-transform: rotate(-94deg); -o-transform: rotate(-94deg); transform: rotate(-94deg);}.frame div:nth-of-type(6){ height:168px; margin-top: -108px; margin-right: -107px; -webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -o-transform: rotate(-25deg); transform: rotate(-25deg);}.seat { position:relative; display:block; top:10px;}.seat .support { position: absolute; top: 50%; left:125px; margin-left: 31px; margin-top: -133px; width: 5px; height: 84px; border-radius:32px; background-color: rgba(255,111,106,1); -webkit-transform: rotate(90deg); -moz-transform: rotate(14deg); -ms-transform: rotate(14deg); -o-transform: rotate(14deg); transform: rotate(14deg);}.seat .saddle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 30px solid transparent; border-top: 18px solid rgba(255,111,106,1); border-top-right-radius: 32px; border-bottom-right-radius: 32px; border-top-left-radius: 32px; position: absolute; top: 50%; left: 125px; margin-left: -5px; margin-top: -92px;}.seat .saddle:before { content:"."; position: absolute; color: rgba(0,0,0,0); width: 18px; height: 18px; margin-left:-25px; border-top-left-radius: 45px; border-bottom-left-radius: 25px; border-bottom-right-radius: 45px; border-bottom: 2px solid rgba(255,111,106,1); border-left: 2px solid rgba(255,111,106,1); margin-top: -15px; -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); transform: rotate(15deg);}.pedals { position: absolute; z-index: 101; top: 50%; right: 50%; margin-top: 60px; margin-right: 6px; animation: wheelSpin 2.2s linear 0s infinite reverse none; -webkit-animation: wheelSpin 2.2s linear 0s infinite reverse none;}.pedals .gear { border: 3px solid rgba(255,111,106,1); border-radius: 150px; position: absolute; top: calc(50% - 22px); left: calc(50% - 22px); width: 38px; height: 38px; z-index: 1; overflow: hidden;}.pedals .gear .hub { background-color: rgba(255,111,106,1); width: 16px; height: 16px; border-radius: 20px; position: absolute; top: calc(50% - 8px); left: calc(50% - 8px); z-index:2;}.pedals .gear .struts { position: absolute; width: 100%; height: 100%; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg);}.pedals .pedal { background-color: rgba(255,111,106,1); border-radius: 10px; position: absolute; top: calc(50% - 3px); left: calc(50% - 3px); width: 3px; height: 35px; z-index: 5;}.pedals .pedal .footpad { width: 16px; height: 5px; border-radius: 4px; position: absolute; z-index: 200; margin-left: -6px; margin-top: 31px; background-color: rgba(255,111,106,1); animation: wheelSpin 2.2s linear 0s infinite normal none; -webkit-animation: wheelSpin 2.2s linear 0s infinite normal none;}.pedals .pedal.back { z-index: -1; margin-top: -35px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);}.handlebars { z-index: 10; position:relative; display:block; top:10px;}.handlebars .handle { position: absolute; border-left: 5px solid rgba(255,111,106,1); border-top: 5px solid rgba(255,111,106,1); border-bottom: 5px solid rgba(255,111,106,1); border-top-left-radius: 45px; border-bottom-left-radius: 45px; right: 50%; width: 50px; height: 20px; margin-right: -121px; margin-top: -121px; -webkit-transform: rotate(-15deg);}.handlebars .handle:after { content:""; position: absolute; width: 7px; height: 0; display:block; margin-left:36px; border: 5px solid rgba(255,111,106,1); margin-top: -6px; border-radius: 35%;}.handlebars .handle:before { content:" "; position: absolute; background-color: rgba(58,62,67,1); width: 35px; height: 10px; display:block; margin-left:30px; margin-top: 19px;}.handle-hub { position: relative; width: 7px; height: 0; left:-6px; top:29px; display:block; margin-left:30px; border: 5px solid rgba(255,111,106,1); margin-top: -12px; border-radius: 35%;}.chain { border:2px solid rgba(255,111,106,1); border-right:0; border-top:0; border-top-left-radius:40px; border-bottom-left-radius:40px; width:125px; height:25px; position:relative; display:block; top:58px; left:90px; -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -ms-transform: rotate(8deg); -o-transform: rotate(8deg); transform: rotate(8deg);}.chain:before { width:120px; border-top:2px solid rgba(255,111,106,1); content:" "; dispaly:block; position:absolute; z-index:9999; top:-8px; left:6px; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -ms-transform: rotate(-8deg); -o-transform: rotate(-8deg); transform: rotate(-8deg);}.basket { border: 2px solid rgba(255,111,106,1); width:55px; height:60px; display:block; position:absolute; top:-82px; right:53px; z-index:99999; border-top-right-radius:20px; border-top-left-radius:20px;}.basket:before { border-left: 2px solid rgba(255,111,106,1); width:55px; height:62px; content:" "; display:block; position:absolute; top:-0px; right:6px; z-index:99999; border-top-left-radius:22px; -webkit-transform: rotate(4deg); -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg);}.basket:after { border-left: 2px solid rgba(255,111,106,1); width:70px; height:9px; content:" "; display:block; position:absolute; top:87px; left:-55px; z-index:99999; -webkit-transform: rotate(113deg); -moz-transform: rotate(113deg); -ms-transform: rotate(113deg); -o-transform: rotate(113deg); transform: rotate(113deg);}.basket-wire { border-top:1px solid rgba(255,111,106,1); width:105px; height:105px; display:block; position:absolute; -webkit-transform: rotate(118deg); -moz-transform: rotate(118deg); -ms-transform: rotate(118deg); -o-transform: rotate(118deg); transform: rotate(118deg); right:60px; top:-55px; border-top-left-radius:22px;}.basket-wire:after{ content:" "; border-top:1px solid rgba(255,111,106,1); width:115px; height:105px; display:block; position:absolute; right:0px; top:-5px; border-top-left-radius:30px; z-index:9999;}.basket-screw { border-left: 2px solid rgba(255,111,106,1); width:4px; height:4px; display:block; position:absolute; top:56px; left:-16px; z-index:99999; -webkit-transform: rotate(-113deg); -moz-transform: rotate(113deg); -ms-transform: rotate(113deg); -o-transform: rotate(113deg); transform: rotate(113deg);}.basket-screw:before { border-left: 2px solid rgba(255,111,106,1); width:10px; height:13px; content:" "; display:block; position:absolute; top:0; left:-8px; z-index:99999;} </style></head><body> <div id="animation"> <div class="bike"> <div class="basket"><div class="basket-screw"></div></div> <div class="basket-wire"></div> <div class="front wheel"> <div class="rim"> <div class="air"></div> </div> <div class="hub"></div> <div class="spokes"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="frame"> <div></div> <div></div> <div></div> <div class="small"></div> <div></div> <div class="small"></div> </div> <div class="seat"> <div class="saddle"></div> </div> <div class="handlebars"> <div class="handle"><div class="handle-hub"></div></div> </div> <div class="pedals"> <div class="gear"> <div class="hub"></div> <div class="struts"> </div> </div> <div class="front pedal"> <div class="footpad"></div> </div> <div class="back pedal"> <div class="footpad"></div> </div> </div> <div class="back wheel"> <div class="rim"> <div class="air"></div> </div> <div class="hub"></div> <div class="gear"></div> <div class="spokes"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <div class="chain"></div> </div></div></body></html>...

学习CSS3中的技巧之:not(:last-of-type)

2018年05月21日

CSS3中的技巧之:not(:last-of-type)</title> </head> <style> /*正常写法 .posts { list-style: none; width:400px; margin: 0; padding: 20px; margin: 4rem auto; background: #f8f8f8; } .posts li{ border-bottom: 1px solid #000; margin-bottom: .5rem; padding-bottom: .5rem; } .posts li:last-of-type{ border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } */ .posts { list-style: none; width:400px; margin: 0; padding: 20px; margin: 4rem auto; background: #f00; } .posts li:not(:last-of-type){ border-bottom: 1px solid #000; margin-bottom: .5rem; padding-bottom: .5rem; } </style> <body> <ul class="posts"> <li>Web前端之家</li> <li>前端之家</li> <li>前端之家</li> <li>前端之家</li> <li>前端之家</li> </ul> </body></html>...

本站推荐

前端必备工具

2022年10月28日

作者:Terry | 分类:Html5 | 浏览:823 | 评论:0

2021年12月24日

作者:Terry | 分类:Html5 | 浏览:3089 | 评论:0

2021年10月20日

作者:Terry | 分类:Html5 | 浏览:2890 | 评论:0

2021年08月19日

作者:Terry | 分类:Html5 | 浏览:3492 | 评论:0

2021年08月19日

作者:Terry | 分类:HTML/CSS | 浏览:3216 | 评论:0

2021年08月10日

作者:Terry | 分类:Html5 | 浏览:3934 | 评论:0

2021年07月29日

作者:Terry | 分类:Html5 | 浏览:2860 | 评论:0

2021年07月26日

作者:Terry | 分类:Html5 | 浏览:4953 | 评论:0

2021年07月12日

作者:Terry | 分类:Html5 | 浏览:2915 | 评论:0

2021年04月30日

作者:Terry | 分类:Html5 | 浏览:4660 | 评论:0

2021年04月19日

作者:Terry | 分类:开发工具 | 浏览:5476 | 评论:1

2021年02月08日

作者:Terry | 分类:Html5 | 浏览:4806 | 评论:0

2021年02月07日

作者:Terry | 分类:Html5 | 浏览:4294 | 评论:0

2021年02月06日

作者:Terry | 分类:Html5 | 浏览:2959 | 评论:0

2021年02月05日

作者:Terry | 分类:Html5 | 浏览:3253 | 评论:0

2020年11月13日

作者:Terry | 分类:HTML/CSS | 浏览:6913 | 评论:0

2020年11月02日

作者:andy001 | 分类:HTML/CSS | 浏览:5473 | 评论:0

2020年10月28日

作者:Terry | 分类:HTML/CSS | 浏览:13222 | 评论:0

2020年09月01日

作者:andy001 | 分类:Html5 | 浏览:5995 | 评论:0

2020年07月20日

作者:天空 | 分类:Js&JQuery | 浏览:5603 | 评论:0

2020年06月01日

作者:Terry | 分类:移动开发 | 浏览:18539 | 评论:0

2020年05月21日

作者:Terry | 分类:Html5 | 浏览:5016 | 评论:0

2020年05月09日

作者:andy001 | 分类:HTML/CSS | 浏览:8770 | 评论:0

2020年05月08日

作者:Terry | 分类:HTML | 浏览:7249 | 评论:0

2020年04月21日

作者:andy001 | 分类:Js&JQuery | 浏览:5138 | 评论:0

2020年02月09日

作者:andy001 | 分类:移动开发 | 浏览:8640 | 评论:0

2019年12月25日

作者:Terry | 分类:开发工具 | 浏览:8699 | 评论:0

2019年12月19日

作者:andy001 | 分类:Js&JQuery | 浏览:5171 | 评论:0

2019年11月12日

作者:andy001 | 分类:HTML/CSS | 浏览:10613 | 评论:0

2019年09月25日

作者:andy001 | 分类:HTML/CSS | 浏览:11887 | 评论:0

2019年09月22日

作者:andy001 | 分类:HTML/CSS | 浏览:7660 | 评论:0

2019年09月22日

作者:andy001 | 分类:HTML/CSS | 浏览:6236 | 评论:0

2019年04月04日

作者:andy001 | 分类:Js&JQuery | 浏览:8944 | 评论:0

2019年04月04日

作者:andy001 | 分类:HTML/CSS | 浏览:8851 | 评论:0

2019年04月02日

作者:yinqiong | 分类:Html5 | 浏览:17626 | 评论:0

2019年03月06日

作者:jiang | 分类:HTML/CSS | 浏览:29193 | 评论:0

2019年02月11日