html_css js印章效果.可以生成印章和审核时加盖通过或者不通过样式效果,非常炫酷
效果图：
上代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>前端哥——html_css js印章效果</title> <style type="text/css"> * { box-sizing: border-box;} HTML,body { width: 100%;height: 100%;margin: 0px 0px;padding: 0px 0px;} .box { position: relative; overflow: hidden; height: 260px; } .box img { width: 100%; height: 260px; } .box .box-content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; color: #fff; text-align: center; padding: 20% 20px; background: rgba(0, 0, 0, 0.6); transform: rotate(-90deg); transform-origin: left top 0; transition: all 0.50s ease 0s; } .box .title { display: inline-block; font-size: 22px; color: #fff; margin: 0 0 15px 0; position: relative; transform: rotate(180deg); transform-origin: right top 0; transition: all .3s ease-in-out 0.2s; } .box .post { display: block; font-size: 18px; margin-bottom: 15px; transform: rotate(180deg); transform-origin: right top 0; transition: all .3s ease-in-out 0.4s; } .box .description { font-size: 15px; margin-bottom: 20px; padding: 0 20px; transform: rotate(180deg); transform-origin: right top 0; transition: all .3s ease-in-out 0.6s; } .box .read { font-size: 16px; font-weight: bold; color: #fff; display: block; letter-spacing: 2px; text-transform: uppercase; transform: rotate(180deg); transform-origin: right top 0; transition: all 0.3s ease-in-out 0.8s; } .box .read:hover { color: #e8802e; text-decoration: none; } .box:hover .box-content, .box:hover .title, .box:hover .post, .box:hover .description, .box:hover .read { transform: rotate(0deg); } @media (min-width: 1200px) { .container { max-width: 1200px; } } @media (min-width: 1440px) { .container { max-width: 1260px; } } @media (min-width: 1600px) { .container { max-width: 1350px; } } .professional_container .myborder { border: 1px solid #cbd1d6; } .professional_item { cursor: pointer; margin: 15px 15px 0px 15px; height: 260px; } /*印章文字样式*/ .seal-content { position: relative;} .seal-content { width: 300px; min-height: 60px; vertical-align: bottom; word-wrap: break-word; position: relative; } .seal-result { width: 60px; height: 60px; transform: rotate(20deg); border: solid 2px green; border-radius: 100%; text-align: center; color: green; font-size: 16px; font-weight: bold; line-height: 60px; right: 5px; bottom: 12px; position: absolute; background-color: rgba(255, 255, 255, 0.8) } .seal-result-fail { border-color: red; color: red; } </style> <body> <div> <div style="margin-top:36px"> <div style="font-weight: 600;font-size: 20px">前端哥个人技术博客</div> <div class="row border" style="margin-top: 20px;background: #fff;margin-left: 0px;margin-right: 0px"> <div style="color:#444;padding: 20px"> <span style="font-size: 15px;margin-top: 6px;clear: both;line-height: 1.8"> 前端技术分享交流博客-前端哥个人技术博客—html,javaScrtip.css,源码下载,模板下载,前端技术交流 </span> <div style="position: absolute;top: 0px;left: 25%;background-color: rgba(255, 255, 255, 0.8)"> <canvas id="canvas" width="163" height="163"></canvas> </div> </div> </div> </div> <div style="margin-top:32px"> <div style="font-weight: 600;font-size: 20px">审核是否通过：</div> <div class="row border" style="margin-top: 20px;background: #fff;margin-left: 0px;margin-right: 0px"> <div class="seal-content" style="color:#444;padding: 30px"> <span style="font-size: 15px;margin-top: 6px;clear: both;line-height: 1.8"> 此模块可以免费个人使用 </span> <div class="seal-result">通过</div> </div> </div> <div class="row border" style="margin-top: 20px;background: #fff;margin-left: 0px;margin-right: 0px"> <div class="seal-content" style="color:#444;padding: 30px"> <span style="font-size: 15px;margin-top: 6px;clear: both;line-height: 1.8"> 此模块可以免费商业使用 </span> <div class="seal-result seal-result-fail">不通过</div> </div> </div> </div> </div> <script name="自定义印章"> var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); var text = "qianduange"; var companyName = "前端哥开发专用"; // 绘制印章边框 var width = canvas.width / 2; var height = canvas.height / 2; context.lineWidth = 4; context.strokeStyle = "#f00"; context.beginPath(); context.arc(width, height, 72, 0, Math.PI * 2);//宽、高、半径(半径用来跳转外圈的大小) context.stroke(); //画五角星 create5star(context, width, height, 25, "#f00", 0); // 绘制印章名称 context.font = '16px 宋体'; context.textBaseline = 'middle';//设置文本的垂直对齐方式 context.textAlign = 'center'; //设置文本的水平对对齐方式 context.lineWidth = 1; context.strokeStyle = '#f00'; context.strokeText(text, width, height 50); // 绘制印章单位 context.translate(width, height);// 平移到此位置, context.font = '20px 宋体'; var count = companyName.length;// 字数 var angle = 4 * Math.PI / (3 * (count - 1));// 字间角度 var chars = companyName.split(""); var c; for (var i = 0; i < count; i ) { c = chars[i];// 需要绘制的字符 if (i == 0) { context.rotate(5 * Math.PI / 6); } else { context.rotate(angle); } context.save(); context.translate(56, 0);// 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离 context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴 context.strokeText(c, 0, 0);// 此点为字的中心点 context.restore(); } //绘制五角星 function create5star(context, sx, sy, radius, color, rotato) { context.save(); context.fillStyle = color; context.translate(sx, sy);//移动坐标原点 context.rotate(Math.PI rotato);//旋转 context.beginPath();//创建路径 var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 5 * 4; for (var i = 0; i < 5; i ) {//画五角星的五条边 var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.lineTo(x * radius, y * radius); } context.closePath(); context.stroke(); context.fill(); context.restore(); } </script> </body> </html>