"Animated Pancil css, css3 or 3d Pancil in css, css3 And How to make pancil in HTML and css"
Bootstrap 4.1.1 Snippet by RAJKUMAR123

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <div class="center"> <div class="pen"> <p>ADMEC Multimedia Institute In DELHI</p> <div class="top"></div> </div> <div class="content">ADMEC</div> </div> </body>
body{ margin:0; padding: 0; font-family:sans-serif; } .center{ position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); } .pen{ width: 400px; background-color: #ffc334; border-top: 13px solid #ffd265; border-bottom: 13px solid #e2af38; transform: rotate(-45deg); animation: write 4s 10 alternate; } .pen p{ margin: 0; padding: 0; font-size: 12px; line-height: 20px; font-weight: bold; text-align: center; } .pen:before{ content: ""; position: absolute; left: -119px; top: -13px; border-style: solid; border-color: transparent #e29663 transparent transparent; border-width: 23px 60px 23px; } .pen:after{ content: ""; position: absolute; left: -119px; top: -13px; border-style: solid; border-color: transparent #262626 transparent transparent; border-width: 23px 60px 23px; transform: scale(0.3); } .top{ position: absolute; top: -13px; right: -84px; height: 20px; width: 85px; background-color: #151414; border-top: 13px solid #2b2b2b; border-bottom: 13px solid #313131; border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .top:before{ content: ""; position: absolute; top: -13px; left: 0; width: 25px; height: 100%; background-color: #ccc; border-top: 13px solid #b7afaf; border-bottom: 13px solid #b7afaf; } .content{ position: absolute; top: 408%; left: -22%; transform: skewX(55deg); font-size: 43px; font-weight: bold; padding: 10px; box-shadow: -6px 5px 4px 5px #000000f2; animation:textw 4s 1; } @keyframes write{ 0%{transform: rotate(-45deg) translateY(0) translateX(0); margin-left: -90px; } 100%{transform: rotate(-45deg) translateY(8%) translateX(7%);margin-left: -0px; margin-top:-2%;} /*20%{transform: rotate(-45deg) translateY(14%) translateX(-2%);margin-left: -72.1px;} 30%{transform: rotate(-45deg) translateY(21%) translateX(-3%);margin-left: -64.1px;} 40%{transform: rotate(-45deg) translateY(28%) translateX(-4%);margin-left: -56.1px;} 50%{transform: rotate(-45deg) translateY(35%) translateX(-5%);margin-left: -48.1px;} 60%{transform: rotate(-45deg) translateY(42%) translateX(-8%);margin-left: -40.1px;} 70%{transform: rotate(-45deg) translateY(49%) translateX(-9%);margin-left: -32.1px;} 80%{transform: rotate(-45deg) translateY(56%) translateX(-10%);margin-left: -24.1px;} 90%{transform: rotate(-45deg) translateY(63%) translateX(-11%);margin-left: -16.1px;} 100%{transform: rotate(-45deg) translateY(70%) translateX(-12%);margin-left: -8.1px;}*/ } @keyframes textw{ 0%{color: #fff;} 100%{color:#000;} }

Related: See More


Questions / Comments: