剑轩

应无所住,而生其心

博主信息

排名

文章

860

粉丝

112

163

文章类别

CSS 16篇

微服务 41篇

Git 15篇

.NET 106篇

移动开发 33篇

软件架构 26篇

.NET Core 120篇

.NET MVC 11篇

英语 3篇

随笔 106篇

Bootstrap 3篇

Redis 21篇

编辑器 10篇

Js相关 15篇

虚拟化 8篇

css3印章效果

11471人阅读 2020/8/14 10:05 总访问：5194584 评论：0 收藏：1 手机

分类: CSS

配合bootstrap4来写的，效果图

直接贴代码吧:
直接复制运行即可看到效果：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>写样式中......</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <style type="text/css">
        .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);
        }
    </style>

    <style>
        @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 {
            /* box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box; */
            border: 1px solid #cbd1d6;
            /* Safari */
        }


        .professional_item {
            /* height: 115px; */
            /* margin: 0px 0px 16px 0px; */
            /* padding-top: 10px;
            padding-bottom: 6px; */
            cursor: pointer;
            margin: 15px 15px 0px 15px;
            height: 260px;
        }
    </style>

    <style type="text/css" name="文字盖章">
        .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>
        <header>

        </header>

        <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">
                            学院是西南地区较早开展IT互联网人才培养的教育品牌。通过十余年的发展与积淀，学院形成以大数据软件开发、手机应用、人工智能、游戏开发、无人机、VR、3D打印、室内装潢、电子商务等为主的多方向专业培养体系，并通过足下校园、足下课堂等线上平台提供就业创业、学习进修、转行猎头、人才外派等专业人才服务。如今，学院已形成了集互联网应用教育、课程体系与教材研发、教学管理、人才培养和人才服务、实习实训、招生就业服务、产业孵化、软件研发、服务外包、信息化建设等“产、学、研”一体化协同发展的生态系统，研发的134本教材被15个省市的50多所院校采用。学院秉承“培养五百万行业精英”的集团目标，通过“技术-健康-思维”三个维度。“技术型、管理型、创业型”高端软件人才。学院与加拿大荷兰学院、新加坡立腾学院等国际院校的合作，更是开创了国际办学和人才交流的新模式。
                        </span>
                        <div style="position: absolute;top: 0px;right: 0px;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 style="color:#444;padding: 30px">
                        <span style="font-size: 15px;margin-top: 6px;clear: both;line-height: 1.8">
                            模块一：JAVA开发工程师-讲师资格认证
                        </span>
                        <div class="seal-result seal-result-fail">不通过</div>
                    </div>
                </div>
                <div class="row border" style="margin-top: 20px;background: #fff;margin-left: 0px;margin-right: 0px">
                    <div style="color:#444;padding: 30px">
                        <span style="font-size: 15px;margin-top: 6px;clear: both;line-height: 1.8">
                            模块一：JAVA开发工程师-讲师资格认证
                        </span>
                        <div>通过</div>
                    </div>
                </div>
                <div class="row border" style="margin-top: 20px;background: #fff;margin-left: 0px;margin-right: 0px">
                    <div style="color:#444;padding: 30px">
                        <span style="font-size: 15px;margin-top: 6px;clear: both;line-height: 1.8">
                            模块一：JAVA开发工程师-讲师资格认证
                        </span>
                        <div>通过</div>
                    </div>
                </div>
                <div class="row border" style="margin-top: 20px;background: #fff;margin-left: 0px;margin-right: 0px">
                    <div style="color:#444;padding: 30px">
                        <span style="font-size: 15px;margin-top: 6px;clear: both;line-height: 1.8">
                            模块一：JAVA开发工程师-讲师资格认证
                        </span>
                        <div class="seal-result seal-result-fail">不通过</div>
                    </div>
                </div>
            </div>
        </div>

        </div>


        <div class="jumbotron text-center" style="margin-bottom:0;margin-top: 30px">
            <p>tnblog版权所有2018-2020</p>
        </div>

        <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
        <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
        <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
        <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

        <script>

        </script>

        <script name="自定义印章">

            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');

            var text = "TNBLOG";
            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>

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

👈css 如何让边框不影响宽度

👉bootstrap表格样式

评价

css3样式学习代码

上代码！上代码！不说了<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UT...

HTML+css3+js 实现生日快乐代码，动态生成效果

<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>生日快乐</...

css3过渡渐变

code:<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <title>菜鸟教程...

css3 background-size

语法：div { background:url(img_flwr.gif); background-size:80px60px; background-repeat:no-repeat; }可以设置成10...

css3实现边框旋转但内容不动

其实思路就是把文字旋转的角度反向旋转抵消掉div旋转的角度即可 <!DOCTYPE html> <html> <head> ...

css3 中的 nth-child

:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以...

css3伪类选择器 nth-child ，循环变色，循环颜色。css最后一个元素

选中第一个元素：.container>div:first-child{ background:#abcdff; }选中最后一个可以使用last-child.container>d...

css3 伪类选择器 before和after。实现简单的标题。清楚浮动。红黄蓝效果。实现下方横线((下划线，下横线))，Tab菜单效果

[TOC]伪类选择器before和after，实现一个简单的标题效果代码如下 <!DOCTYPE html> <html lang="en"...

css3 实现ps文字外发光效果实现一串文字背后灯光高亮效果。实现文字发光。css实现实现文字背景高亮

CSS3 并没有直接设置发光效果的属性，但是利用text-shadow属性实现此效果text-shadow: h-shadow v-shadow blur color; 参...

使用css3实现一个不规则div的布局

要实现不规则的div布局，可以使用CSS3的clip-path属性。该属性可以剪切元素的形状，从而实现不规则的布局。以下是一个示例...

css3 渐变两边浅中间深。由中间向两边。 div边框渐变色

设计图是这样的可以使用线性渐变语法：background: linear-gradient(direction, color-stop1, color-stop2, …)例如从...