Implementation of hexagon in css3

Recent projects have encountered responsive projects that require hexagon. The traditional way makes me think of cutting pictures, but the pictures are not conducive to mouse interaction; css3 makes me think of a new way, let's share the development experience below Specific effect: Implementation principle: The main css st ...

Posted on Thu, 26 Mar 2020 09:31:18 -0700 by mikeatrpi

A kind of Canvas realizes drawing, zooming, moving and saving historical state on the picture, which is pure dry goods (with css3 conversion formula attached)

Hahaha, I'm here again. This time, I'll bring you some articles about canvas functions. I hope you like them! This css3 change formula can be applied to the transform attribute we usually use or the map zooming on the mobile terminal! Preface Because I am a junior, I am looking for an internship recently. Before that, I had a small projec ...

Posted on Mon, 23 Mar 2020 09:36:09 -0700 by jack_indigo

Implement a Transition Transition Animation Component Based on React

Transitional animations make the UI more expressive and easy to use.How to quickly implement a Transition transition animation component using React? Basic implementation Implements a basic CSS transition animation component that allows simple animation by switching CSS styles, that is, by adding or removing a class style.Therefore, you need to ...

Posted on Thu, 27 Feb 2020 08:44:14 -0800 by brenda

Summary of knowledge points of css

Preface css is not only the makeup artist of the page, but also the foundation that every front-end must master. In the work, it is often too frequent for business, so it can't be very good to precipitate the technology. This paper is mainly the notes that the author learned from his spare time. It ma ...

Posted on Fri, 07 Feb 2020 01:24:07 -0800 by nawhaley2265

Parallel computing home project

Background system (Vue) 1. The first consideration is whether the layout can meet the needs of the project. Generally, full screen layout is required. At this time, the layout is divided into one column on the left, adaptive screen on the right, or fixed layout on the left and right sides. The middle part is adaptive. Consider ...

Posted on Tue, 31 Dec 2019 17:55:02 -0800 by mikevarela

CSS leak checking - Custom checkbox style

Because the original checkbox style is ugly, we often need to rewrite its style to beautify the checkbox. So today, we summarize the methods of customizing the checkbox style. The code is as follows: html file <label class="checkbox-inline"> <input type="checkbox" class="checkbox" name="hobby"> <span class="hobby">Badm ...

Posted on Sat, 14 Dec 2019 11:38:32 -0800 by successor

Simple use of openhtmltopdf

The main reason for writing this article is that the whole Baidu can't find an article using openhtmltopdf without a demonstration project, and github only has a simple demonstration, which can't see the effect. openhtmltopdf is an open source framework for html fragment to pdf file. The source code is on github, and the addre ...

Posted on Tue, 03 Dec 2019 07:57:54 -0800 by Anxious

jQuery full screen scrolling

1.jQuery.mousewheel plug-in There is no mouse wheel event in jQuery, and the mouse wheel event in native js is not compatible. You can use jQuery's wheel event plug-injQuery.mousewheel.js 2. Function throttling In JavaScript, some events are triggered very frequently, such as the onresize event (jq is resize), onmousemove event (jq is mousemo ...

Posted on Mon, 02 Dec 2019 12:06:35 -0800 by avickers

Bootstrap accordion menu plugin

Bootstrap accordion menu plug-in introduction This is a bootstrap accordion menu beautification effect. Based on the original bootstrap accordion, the bootstrap accordion menu is beautified by simple CSS code to generate a more beautiful bootstrap accordion menu effect. How to use Bootstrap accordion menu plug-in jquery a ...

Posted on Sun, 01 Dec 2019 03:14:11 -0800 by hightechredneck

[original] achieve the effect of SVG painting action

Background: when I saw the svg pictures of others on the Internet, they were line drawings drawn. I felt very good. After studying, write the following demo, which can be used to run directly The animation effect seems to be only effective in the path tag of svg. The key implementation is to use ...

Posted on Fri, 01 Nov 2019 17:27:04 -0700 by breath18