CN110990013A - Method, system, equipment and medium for realizing three-dimensional dynamic page based on CSS - Google Patents
Method, system, equipment and medium for realizing three-dimensional dynamic page based on CSS Download PDFInfo
- Publication number
- CN110990013A CN110990013A CN201911267222.9A CN201911267222A CN110990013A CN 110990013 A CN110990013 A CN 110990013A CN 201911267222 A CN201911267222 A CN 201911267222A CN 110990013 A CN110990013 A CN 110990013A
- Authority
- CN
- China
- Prior art keywords
- css
- attribute
- setting
- rotation
- module
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a method, a system, equipment and a medium for realizing a three-dimensional dynamic page based on CSS, wherein the method comprises the following steps: creating at least one element; setting the view property of the element as a view preset value based on the CSS; modifying the presentation style attribute of the element into a three-dimensional style; setting the rotation attribute of the element as a rotation preset value; establishing an HTML document; referencing an element on the content of the HTML document; the HTML document is parsed. The method of the invention can not only make the webpage show three-dimensional sense and depth sense, but also make the webpage realize three-dimensional dynamic effect by setting the animation attribute of the element and the moving key frame. The method has the advantages that not only is a complex function not required to be set, but also a large number of numerical values are not required to be filled, the attributes in the CSS are extended in a simple mode, the three-dimensional dynamic effect and the depth sense of the appearance of the three-dimensional webpage are achieved, good impression is further provided for a user, and on the other hand, the flexibility of the 3D display mode is improved, and the loading speed of the webpage is accelerated.
Description
Technical Field
The invention relates to the technical field of webpage processing, in particular to a method, a system, equipment and a medium for realizing a three-dimensional dynamic page based on a CSS (cascading style sheet).
Background
The 3D (three-dimensional) stereoscopic vision is obviously used for displaying stereoscopic images, the basic principle is to output two pictures, so that two eyes can see different pictures, and due to the difference between the pictures, people can generate stereoscopic impression, so that the 3D visual measurement not only has richer and stronger functions, but also is more convenient and faster to operate.
The pursuit of the existing webpage is not only data display, but also the improvement of user experience is needed, so that the user can generate aesthetic feeling, the 3D webpage gradually becomes the trend of webpage display, a plurality of computer official nets or company official nets eliminate plane webpages, and the 3D webpage is used for meeting the requirements of the user
In the prior art, two general ways are available for making a webpage into a 3D effect, one way is to directly convert through a webpage platform, and the 3D effect achieved by this way is limited, and the flexibility is not high, and the other way is to achieve through canvas (canvas for drawing graphics on a webpage) which is made on the webpage, and the specific implementation way is that firstly creating canvas elements, then adding canvas elements to HTML5 (hypertext markup language) pages, because canvas elements have no drawing capability, it is necessary to fill in each numerical value inside JavaScript (a programming language), for example, when drawing a three-dimensional rectangle, 8 vertices of the rectangle need to be drawn, each vertex needs to be set with coordinates of x, y and z axes respectively, and then needs to connect each point, and it is necessary to write the drawn functions by itself to connect one by one. This approach requires self-defined functions, much data, and a large amount of computation.
Disclosure of Invention
The technical problem to be solved by the invention is to overcome the defects of complexity and large calculation amount of a method for realizing a three-dimensional page in the prior art, and provide a method, a system, equipment and a medium for realizing a three-dimensional dynamic page based on CSS, which are simple, convenient, small in calculation amount and convenient to realize.
The invention solves the technical problems through the following technical scheme:
the invention provides a method for realizing a three-dimensional dynamic page based on CSS, which comprises the following steps:
creating at least one element;
setting the view property of the element to a view preset value based on the CSS;
modifying the presentation style attribute of the element to a three-dimensional style based on the CSS;
setting the rotation attribute of the element to a preset rotation value based on the CSS;
setting the animation attribute of the element to be an animation preset value based on the CSS;
setting a key frame of the element motion based on the CSS;
establishing an HTML document, wherein the HTML document comprises a plurality of contents;
referencing the element on the content of the HTML document;
and analyzing the HTML document.
Wherein, the value of the z-axis can be set at the same time when the preset value of the view field is set, for example, the length of the z-axis can be set to 0.
Wherein the presentation style attribute defaults to a flat style.
The CSS style can be directly quoted in an element in a label of the established html document, the related CSS style can be quoted by putting a style in the html header, the style file can be independently written into a document, and the external file can be quoted by an @ import (a quote method) method and the like.
The 3D Web page in the present invention may be placed on a website of the World Wide Web (World Web).
According to the method for realizing the three-dimensional page, by setting the animation attributes of the elements and the moving key frames, the analyzed webpage can show three-dimensional sense and depth sense, and the webpage can show a three-dimensional dynamic effect. The method for realizing the three-dimensional page does not need to set a complex function and fill a large number of numerical values, can realize the appearance of the three-dimensional dynamic effect and depth sense three-dimensional webpage by simply expanding the attributes in the CSS, further gives good impression to a user, and on the other hand, improves the flexibility of a 3D display mode and also accelerates the loading speed of the webpage.
Preferably, the rotation attribute includes a turning direction attribute and a rotation angle attribute
And/or the animation attribute comprises at least one of animation name, movement time, movement speed, movement cycle number, movement mode and movement delay;
and/or, the key frames include at least an initial key frame and an end key frame.
Wherein, the rotation direction attribute includes: left, center, right, length, percentage of x-axis, top, center, bottom, length, percentage of y-axis, length of z-axis, which represents changing the position of the transformed element.
The numbers in the attribute of the rotation angle are clockwise rotation when the numbers are positive numbers, and are counterclockwise rotation when the numbers are negative numbers, and the numbers can be rotated along the x-axis direction, the y-axis direction or the z-axis direction.
According to the invention, different three-dimensional effects of the webpage can be realized according to the matching of the rotation direction attribute and the rotation angle attribute.
Preferably, the step of creating at least one element comprises:
creating a parent element;
creating at least one child element in the parent element;
the step of setting the view property of the element to a view preset value based on the CSS comprises: setting the view property of the parent element to a view preset value based on the CSS;
the step of modifying the presentation style property of the element into a three-dimensional style based on the CSS includes: modifying the presentation style attribute of the parent element into a three-dimensional style based on the CSS;
the step of setting the rotation attribute of the element to a preset rotation value based on the CSS includes: and setting the rotation attribute of the sub-element to a rotation preset value based on the CSS.
According to the invention, by setting the view field attribute in the parent element and setting the three-dimensional style attribute of the parent element, a three-dimensional effect can be presented in each child element, and a multi-dimensional webpage can be set.
Preferably, the step of creating at least one child element in the parent element comprises:
creating six child elements in the parent element;
the step of setting the rotation attribute of the element to a preset rotation value based on the CSS includes: respectively setting the rotation attribute of each sub-element;
the HTML document comprises six blocks of contents, and each block of contents corresponds to each sub-element one by one.
According to the invention, the webpage can present a cubic effect by setting six sub-elements, so that the hierarchy and depth level of the webpage are further deepened, and the user experience is further enhanced.
The invention also provides a system for realizing the three-dimensional dynamic page based on the CSS, which comprises: the system comprises an element creating module, a visual field setting module, a style modifying module, a rotation setting module, a document creating module, a quoting module and an analyzing module;
the element creating module is used for creating at least one element;
the view setting module is used for setting the view attribute of the element as a preset view value based on the CSS;
the style modification module is used for modifying the presentation style attribute of the element into a three-dimensional style based on the CSS;
the rotation setting module is used for setting the rotation attribute of the element as a rotation preset value based on the CSS;
the document establishing module is used for establishing an HTML document, and the HTML document comprises a plurality of contents;
the reference module is used for referencing the element on the content of the HTML document;
the analysis module is used for analyzing the HTML document.
Wherein, the value of the z-axis can be set at the same time when the preset value of the view field is set, for example, the length of the z-axis can be set to 0.
Wherein the presentation style attribute defaults to a flat style.
The CSS style can be directly quoted in elements in a label of the established html document, the related CSS style can be quoted by putting a style in the html header, the style file can be independently written into a document, and the external file is quoted by the @ import method and the like.
Wherein, the 3D webpage in the invention can be placed on a certain website of the world wide web.
According to the system for realizing the three-dimensional page, the 2D positioning attribute in the CSS for controlling the appearance of the browser is expanded into the 3D positioning attribute, and the analyzed webpage can present stereoscopic impression and depth feeling by changing the rotating attribute value.
Preferably, the rotation attribute includes a rotation direction attribute and a rotation angle attribute.
And/or the animation attribute comprises at least one of animation name, movement time, movement speed, movement cycle number, movement mode and movement delay;
and/or, the key frames include at least an initial key frame and an end key frame.
Wherein, the rotation direction attribute includes: left, center, right, length, percentage of x-axis, top, center, bottom, length, percentage of y-axis, length of z-axis, which represents changing the position of the transformed element.
The numbers in the attribute of the rotation angle are clockwise rotation when the numbers are positive numbers, and are counterclockwise rotation when the numbers are negative numbers, and the numbers can be rotated along the x-axis direction, the y-axis direction or the z-axis direction.
According to the invention, different three-dimensional effects of the webpage can be realized according to the matching of the rotation direction attribute and the rotation angle attribute.
Preferably, the element creation module comprises a parent element creation unit and a child element creation unit;
the parent element creating unit is used for creating a parent element;
the child element creating unit is used for creating at least one child element in the parent element;
the view setting module is further configured to set the view attribute of the parent element to a view preset value based on the CSS;
the style modification module is further used for modifying the presentation style attribute of the parent element into a three-dimensional style based on the CSS;
the rotation setting module is further configured to set the rotation attribute of the sub-element to a preset rotation value based on the CSS.
The element can present a three-dimensional effect in each child element by setting a view field attribute in the parent element and setting a three-dimensional style attribute of the parent element, and can set a multi-dimensional webpage.
Preferably, the child element creating unit is configured to create six child elements in the parent element;
the rotation setting module is further used for respectively setting the rotation attribute of each sub-element;
the HTML document comprises six blocks of contents, and each block of contents corresponds to each sub-element one by one.
According to the invention, the webpage can present a cubic effect by setting six sub-elements, so that the hierarchy and depth level of the webpage are further deepened, and the user experience is further enhanced.
The invention also provides electronic equipment which comprises a memory, a processor and a computer program which is stored on the memory and can run on the processor, wherein when the processor executes the computer program, the method for realizing the three-dimensional dynamic page based on the CSS is realized.
The present invention also provides a computer readable storage medium having stored thereon a computer program which, when being executed by a processor, carries out the steps of the above method for realizing a three-dimensional dynamic page based on CSS.
The positive progress effects of the invention are as follows: according to the method for realizing the three-dimensional page, by setting the animation attributes of the elements and the moving key frames, the analyzed webpage can show three-dimensional sense and depth sense, and the webpage can show a three-dimensional dynamic effect. The method for realizing the three-dimensional page does not need to set a complex function and fill a large number of numerical values, can realize the appearance of the three-dimensional dynamic effect and depth sense three-dimensional webpage by simply expanding the attributes in the CSS, further gives good impression to a user, and on the other hand, improves the flexibility of a 3D display mode and also accelerates the loading speed of the webpage.
Drawings
Fig. 1 is a flowchart of a method for implementing a three-dimensional dynamic page based on CSS in embodiment 1 of the present invention.
Fig. 2 is an effect diagram of a web page to which the method of embodiment 1 of the present invention is not applied.
Fig. 3 is an effect diagram of a web page to which the method of embodiment 1 of the present invention is applied.
FIG. 4 is a diagram illustrating the effect of a webpage to which the method of embodiment 1 of the present invention is applied
Fig. 5 is a flowchart of a method for implementing a three-dimensional dynamic page based on CSS in embodiment 2 of the present invention.
Fig. 6 is an effect diagram of a web page to which the method of embodiment 2 of the present invention is not applied.
Fig. 7 is an effect diagram of a web page to which the method of embodiment 2 of the present invention is applied.
Fig. 8 is an effect diagram of a web page to which the method of embodiment 2 of the present invention is applied.
Fig. 9 is a schematic block diagram of a system for implementing a three-dimensional dynamic page based on CSS in embodiment 3 of the present invention.
Fig. 10 is a schematic diagram of a hardware structure of an electronic device according to embodiment 5 of the present invention.
Detailed Description
The invention is further illustrated by the following examples, which are not intended to limit the scope of the invention.
Example 1
The embodiment provides a method for realizing a three-dimensional dynamic page based on a CSS, as shown in FIG. 1, the method includes:
And 102, setting the view property of the element as a view preset value based on the CSS.
And 103, modifying the presentation style attribute of the element into a three-dimensional style based on the CSS.
And 104, setting the rotation attribute of the element as a rotation preset value based on the CSS.
And 105, setting the animation attribute of the element as an animation preset value based on the CSS.
And 106, setting key frames of element motion based on the CSS.
Wherein, the value of the z-axis can be set at the same time when the preset value of the view field is set, for example, the length of the z-axis can be set to 0.
Wherein the presentation style attribute defaults to a flat style.
The CSS style can be directly quoted in elements in a label of the established html document, the related CSS style can be quoted by putting a style in the html header, the style file can be independently written into a document, and the external file is quoted by the @ import method and the like.
Wherein, the 3D webpage in the invention can be placed on a certain website of the world wide web.
The HTML document comprises a plurality of contents.
For better understanding of the present embodiment, the following description of the present embodiment is made by way of a specific example:
first, an element is created, then the view attribute of the element is set to 500px, then the presentation style attribute of the element is modified to preserve-3d (three-dimensional style), then the rotation attribute of the element is set to 45 ° rotation around the positive direction of the y-axis, and then the animation attribute of the element is set to: the motion time is 8 seconds, the motion mode is uniform motion, the motion times are infinite cyclic motion, and then the key frame is set as the initial key frame: rotateZ (0deg), end key frame is: rotateZ (90deg), then creating an html web page (it should be understood that it is also possible to create an html web page from the beginning, and create elements directly in the web page), where the web page includes content "B" on which the set element content is referred, fig. 2 shows the display effect of the web page without the element, fig. 3 and 4 show the display effect of the web page with the element, where the web page gradually rotates from the effect of fig. 3 to the effect of fig. 4 within 8 seconds, and after 8 seconds, the web page continues to rotate circularly around the Z axis.
In the method for realizing the three-dimensional dynamic page based on the CSS in this embodiment, by setting the animation attributes of the elements and the moving key frames, not only can the analyzed webpage present a stereoscopic impression and a depth impression, but also the webpage can present a three-dimensional dynamic effect. The method for realizing the three-dimensional page does not need to set a complex function and fill a large number of numerical values, can realize the appearance of the three-dimensional dynamic effect and depth sense three-dimensional webpage by simply expanding the attributes in the CSS, further gives good impression to a user, and on the other hand, improves the flexibility of a 3D display mode and also accelerates the loading speed of the webpage.
Example 2
The embodiment provides a method for realizing a three-dimensional dynamic page based on a CSS, as shown in fig. 5, the method includes:
And step 203, setting the view property of the parent element as a view preset value, and modifying the presentation style property of the parent element into a three-dimensional style.
Wherein, the rotation direction attribute includes: left, center, right, length, percentage of x-axis, top, center, bottom, length, percentage of y-axis, length of z-axis, which represents changing the position of the transformed element.
Wherein the animation attributes comprise animation name, movement time, movement speed, movement cycle number, movement mode, movement delay and the like.
Wherein the key frames include at least an initial key frame and an end key frame.
The numbers in the attribute of the rotation angle are clockwise rotation when the numbers are positive numbers, and are counterclockwise rotation when the numbers are negative numbers, and the numbers can be rotated along the x-axis direction, the y-axis direction or the z-axis direction.
In the default state, the X-axis is horizontal, the left side is positive, the y-axis is vertical, the downward direction is positive, the z-axis is perpendicular to the plane formed by the X-axis and the y-axis, and the direction facing the screen is positive.
For better understanding of the present embodiment, the following description will be given with reference to a specific example:
firstly, establishing an Html document, then establishing a parent element in the document, and establishing 6 child elements under the parent element, wherein the specific implementation mode can be as follows:
wherein wrap is the parent element in this embodiment, p1, p2, p3, p4, p5, and p6, and is the child element in this embodiment.
The view attribute of the parent element needs to be set as a view preset value, and the presentation style attribute of the parent element is a three-dimensional style.
Then, animation properties are set, as set by the following code:
transform-animation:am 3s linear infinite；
wherein am is the name of the motion, the motion time of the animation is set to be 3 seconds, linear represents uniform motion from beginning to end, and infinite represents that the motion is infinite loop motion.
Then, the rotation direction attribute and the rotation angle attribute of each sub-element are respectively set. For example, the second sub-element is configured to rotate 90 degrees counterclockwise around the Y-axis, the first sub-element is configured to rotate 90 degrees clockwise around the Y-axis, the third sub-element is configured to rotate 90 degrees counterclockwise around the X-axis, the fourth sub-element is configured to rotate 90 degrees clockwise around the X-axis, the fifth sub-element is configured to be adjusted by a certain angle around the z-axis, and the sixth sub-element is unchanged.
The specific setting mode is as follows:
the code indicates that the direction of rotation in the sub-element p2 is right and the angle of rotation is 90 degrees in the negative direction along the y-axis.
After the attributes of the six sub-elements are set respectively, the six sub-elements can be quoted on the related content of the html webpage.
The key frame may then be set, e.g., by:
the code indicates that the animation effect named am gradually changes from 0 degrees on x and y axes to 360 degrees on x and y axes, and the motion time is set to be 3 seconds, so this embodiment is the animation effect completed in 3 seconds, it should be understood that a plurality of key frames may be set, and if a key frame rotating 50 degrees on z axis for 1 second may be set in the middle, the key frame gradually changes from the initial webpage to the effect set for 1 second in 1 second, and then gradually changes to the final effect.
For example, the content included in the web page is a number "123456", 6 sub-elements created in this embodiment are respectively used on the numbers 1, 2, 3, 4, 5 and 6, fig. 6 is an effect diagram of a web page of html that is not directly parsed by the system in this embodiment, fig. 7 and 8 are effect diagrams of a web page of html that is parsed after the system in this embodiment is used, fig. 7 is an effect diagram of an initial web page in this embodiment, and fig. 8 is an effect diagram of a web page in a change process, it should be understood that the diagram simply demonstrates how to change the web page by rotating around the z-axis, such as rotating around the x-axis and the y-axis, changing a color, changing a transparency, moving back and forth, or zooming in and zooming out, and how to move each sub-element specifically, may be set by itself according to requirements.
In this embodiment, by setting the view attribute in the parent element and setting the three-dimensional style attribute of the parent element, a three-dimensional effect can be presented in each child element, and a multi-dimensional webpage can be set.
In this embodiment, by setting six child elements, the webpage can be made to present a cubic effect, so that the layering sense and the depth sense of the webpage are further deepened, the webpage is further beautified, the user experience is enhanced, how many child elements are set in a specific case, how to set the child elements, or the set child elements need to be taken as parent elements, and the effect that the child elements are further set under the parent elements (child elements) can be set by themselves according to the webpage needs.
Example 3
The embodiment provides a system for implementing a three-dimensional dynamic page based on CSS, as shown in fig. 9, the system includes: an element creation module 301, a view setting module 302, a style modification module 303, a rotation setting module 304, an animation setting module 305, a key frame setting module 306, a document creation module 307, a reference module 308, and a parsing module 309.
The element creating module 301 is used for creating at least one element;
the view setting module 302 is configured to set the view property of the element to a view preset value based on the CSS.
The style modification module 303 is configured to modify the presentation style property of the element into a three-dimensional style based on the CSS.
The rotation setting module 304 is configured to set the rotation attribute of the element to a rotation preset value based on the CSS.
The animation setting module 305 is configured to set an animation property of the element to an animation preset value based on the CSS.
The key frame setting module 306 is configured to set key frames of the element motion based on the CSS.
The document creation module 307 is configured to create an HTML document, where the HTML document includes a plurality of contents.
The reference module 308 is used to reference the element on the content of the HTML document.
The parsing module 309 is configured to parse the HTML document.
Wherein, the value of the z-axis can be set while the view setting module 302 sets the view preset value, such as the length of the z-axis can be set to 0.
Wherein the presentation style attribute defaults to a flat style.
The reference module 306 may directly reference the CSS style in an element in a tag of the created html document, may reference a related CSS style by putting a style in an html header, may write a style file separately into a document, and may reference an external file by an @ import method, for example.
The 3D web page in this embodiment may be placed on a website of the world wide web.
The HTML document comprises a plurality of contents.
For better understanding of the present embodiment, the following description of the present embodiment is made by way of a specific example:
first, an element is created, then the view attribute of the element is set to 500px, then the presentation style attribute of the element is modified to preserve-3d (three-dimensional style), then the rotation attribute of the element is set to 45 ° rotation around the positive direction of the y-axis, and then the animation attribute of the element is set to: the motion time is 8 seconds, the motion mode is uniform motion, the motion times are infinite cyclic motion, and then the key frame is set as the initial key frame: rotateZ (0deg), end key frame is: rotateZ (90deg), then creating an html web page (it should be understood that it is also possible to create an html web page from the beginning, and create elements directly in the web page), where the web page includes content "B" on which the set element content is referred, fig. 2 shows the display effect of the web page without the element, fig. 3 and 4 show the display effect of the web page with the element, where the web page gradually rotates from the effect of fig. 3 to the effect of fig. 4 within 8 seconds, and after 8 seconds, the web page continues to rotate circularly around the Z axis.
In the system for realizing the three-dimensional dynamic page based on the CSS in this embodiment, by setting the animation attributes of the elements and the moving key frames, not only can the analyzed web page present a stereoscopic impression and a depth impression, but also the web page can present a three-dimensional dynamic effect. The system for realizing the three-dimensional page in the embodiment does not need to set a complex function and fill a large number of numerical values, can realize the appearance of the three-dimensional webpage with a three-dimensional dynamic effect and a depth sense by simply expanding the attributes in the CSS, further gives a good impression to a user, and on the other hand, improves the flexibility of a 3D display mode and accelerates the loading speed of the webpage.
Example 4
The embodiment provides a system for realizing three-dimensional dynamic pages based on CSS, which is an improvement on the embodiment 3,
the rotation attribute of the present embodiment includes a rotation direction attribute and a rotation angle attribute.
Wherein the element creation module 301 includes a parent element creation unit and a child element creation unit.
The parent element creation unit 3011 is used to create a parent element.
The child element creation unit 3012 is configured to create six child elements in the parent element.
The view setting module 302 is configured to set a view attribute of the parent element to a view preset value.
The style modification module 303 is configured to modify the presentation style property of the parent element into a three-dimensional style.
The rotation setting module 304 is configured to set a rotation attribute of each sub-element respectively.
The HTML document in this embodiment includes six pieces of content, and each piece of content corresponds to each sub-element one to one.
Wherein, the rotation direction attribute includes: left, center, right, length, percentage of x-axis, top, center, bottom, length, percentage of y-axis, length of z-axis, which represents changing the position of the transformed element.
The numbers in the attribute of the rotation angle are clockwise rotation when the numbers are positive numbers, and are counterclockwise rotation when the numbers are negative numbers, and the numbers can be rotated along the x-axis direction, the y-axis direction or the z-axis direction.
In the default state, the X-axis is horizontal, the left side is positive, the y-axis is vertical, the downward direction is positive, the z-axis is perpendicular to the plane formed by the X-axis and the y-axis, and the direction facing the screen is positive.
For better understanding of the present embodiment, the following description will be given with reference to a specific example:
firstly, establishing an Html document, then establishing a parent element in the document, and establishing 6 child elements under the parent element, wherein the specific implementation mode can be as follows:
wherein wrap is the parent element in this embodiment, p1, p2, p3, p4, p5, and p6, and is the child element in this embodiment.
The view attribute of the parent element needs to be set as a view preset value, and the presentation style attribute of the parent element is a three-dimensional style.
Then, animation properties are set, as set by the following code:
transform-animation:am 3s linear infinite；
wherein am is the name of the motion, the motion time of the animation is set to be 3 seconds, linear represents uniform motion from beginning to end, and infinite represents that the motion is infinite loop motion.
Then, the rotation direction attribute and the rotation angle attribute of each sub-element are respectively set. For example, the second sub-element is configured to rotate 90 degrees counterclockwise around the Y-axis, the first sub-element is configured to rotate 90 degrees clockwise around the Y-axis, the third sub-element is configured to rotate 90 degrees counterclockwise around the X-axis, the fourth sub-element is configured to rotate 90 degrees clockwise around the X-axis, the fifth sub-element is configured to be adjusted by a certain angle around the z-axis, and the sixth sub-element is unchanged.
The specific setting mode is as follows:
the code indicates that the direction of rotation in the sub-element p2 is right and the angle of rotation is 90 degrees in the negative direction along the y-axis.
After the attributes of the six sub-elements are set respectively, the six sub-elements can be quoted on the related content of the html webpage.
The key frame may then be set, e.g., by:
the code indicates that the animation effect named am gradually changes from 0 degrees on x and y axes to 360 degrees on x and y axes, and the motion time is set to be 3 seconds, so this embodiment is the animation effect completed in 3 seconds, it should be understood that a plurality of key frames may be set, and if a key frame rotating 50 degrees on z axis for 1 second may be set in the middle, the key frame gradually changes from the initial webpage to the effect set for 1 second in 1 second, and then gradually changes to the final effect.
For example, the content included in the web page is a number "123456", 6 sub-elements created in this embodiment are respectively used on the numbers 1, 2, 3, 4, 5, and 6, fig. 6 is an effect diagram of a web page of html directly parsed without applying the method in this embodiment, fig. 7 and 8 are effect diagrams of a web page of html parsed after using the method in this embodiment, fig. 7 is an effect diagram of an initial web page in this embodiment, and fig. 8 is an effect diagram of a web page in a change process, it should be understood that the diagram simply demonstrates how to change around the z-axis, such as rotation around the x-axis and the y-axis, or left-right movement, or zooming in and how to move each sub-element specifically, and can be set according to needs.
In this embodiment, by setting the view attribute in the parent element and setting the three-dimensional style attribute of the parent element, a three-dimensional effect can be presented in each child element, and a multi-dimensional webpage can be set.
In this embodiment, by setting six child elements, the webpage can be made to present a cubic effect, so that the layering sense and the depth sense of the webpage are further deepened, the webpage is further beautified, the user experience is enhanced, how many child elements are set in a specific case, how to set the child elements, or the set child elements need to be taken as parent elements, and the effect that the child elements are further set under the parent elements (child elements) can be set by themselves according to the webpage needs.
Example 5
The present embodiment provides an electronic device, which may be represented in the form of a computing device (for example, may be a server device), and includes a memory, a processor, and a computer program stored in the memory and executable on the processor, where the processor may implement any one of the methods in embodiment 1 to embodiment 2 for implementing a three-dimensional dynamic page based on a CSS when executing the computer program.
Fig. 10 shows a schematic diagram of a hardware structure of the present embodiment, and as shown in fig. 10, the electronic device 9 specifically includes:
at least one processor 91, at least one memory 92, and a bus 93 for connecting the various system components (including the processor 91 and the memory 92), wherein:
the bus 93 includes a data bus, an address bus, and a control bus.
The processor 91 executes various functional applications and data processing by running a computer program stored in the memory 92, for example, any one of the method of embodiment 1 to embodiment 2 of the present invention for realizing a three-dimensional dynamic page based on a CSS.
The electronic device 9 may further communicate with one or more external devices 94 (e.g., a keyboard, a pointing device, etc.). Such communication may be through an input/output (I/O) interface 95. Also, the electronic device 9 may communicate with one or more networks (e.g., a Local Area Network (LAN), a Wide Area Network (WAN), and/or a public network, such as the Internet) via the network adapter 96. The network adapter 96 communicates with the other modules of the electronic device 9 via the bus 93. It should be understood that although not shown in the figures, other hardware and/or software modules may be used in conjunction with the electronic device 9, including but not limited to: microcode, device drivers, redundant processors, external disk drive arrays, RAID (disk array) systems, tape drives, and data backup storage systems, etc.
It should be noted that although in the above detailed description several units/modules or sub-units/modules of the electronic device are mentioned, such a division is merely exemplary and not mandatory. Indeed, the features and functionality of two or more of the units/modules described above may be embodied in one unit/module, according to embodiments of the application. Conversely, the features and functions of one unit/module described above may be further divided into embodiments by a plurality of units/modules.
Example 6
The present embodiment provides a computer-readable storage medium on which a computer program is stored, where the computer program, when executed by a processor, implements the steps of any one of the methods of embodiments 1 to 2, where the method implements a three-dimensional dynamic page based on CSS.
More specific examples, among others, that the readable storage medium may employ may include, but are not limited to: a portable disk, a hard disk, random access memory, read only memory, erasable programmable read only memory, optical storage device, magnetic storage device, or any suitable combination of the foregoing.
In a possible implementation manner, the present invention may also be implemented in the form of a program product, which includes program code for causing a terminal device to perform the steps of implementing the method for implementing a three-dimensional dynamic page based on CSS according to any one of embodiments 1-2 when the program product is run on the terminal device.
Where program code for carrying out the invention is written in any combination of one or more programming languages, the program code may be executed entirely on the user device, partly on the user device, as a stand-alone software package, partly on the user device and partly on a remote device or entirely on the remote device.
While specific embodiments of the invention have been described above, it will be appreciated by those skilled in the art that this is by way of example only, and that the scope of the invention is defined by the appended claims. Various changes and modifications to these embodiments may be made by those skilled in the art without departing from the spirit and scope of the invention, and these changes and modifications are within the scope of the invention.
Claims (10)
1. A method for realizing a three-dimensional dynamic page based on CSS is characterized in that the method comprises the following steps:
creating at least one element;
setting the view property of the element to a view preset value based on the CSS;
modifying the presentation style attribute of the element to a three-dimensional style based on the CSS;
setting the rotation attribute of the element to a preset rotation value based on the CSS;
setting the animation attribute of the element to be an animation preset value based on the CSS;
setting a key frame of the element motion based on the CSS;
establishing an HTML document, wherein the HTML document comprises a plurality of contents;
referencing the element on the content of the HTML document;
and analyzing the HTML document.
2. The CSS-based implementation three-dimensional dynamic page of claim 1, wherein the rotation attributes comprise a direction of rotation attribute and an angle of rotation attribute;
and/or the animation attribute comprises at least one of animation name, movement time, movement speed, movement cycle number, movement mode and movement delay;
and/or, the key frames include at least an initial key frame and an end key frame.
3. The CSS based method for three-dimensional dynamic pages according to claim 1,
the step of creating at least one element comprises:
creating a parent element;
creating at least one child element in the parent element;
the step of setting the view property of the element to a view preset value based on the CSS comprises: setting the view property of the parent element to a view preset value based on the CSS;
the step of modifying the presentation style property of the element into a three-dimensional style based on the CSS includes: modifying the presentation style attribute of the parent element into a three-dimensional style based on the CSS;
the step of setting the rotation attribute of the element to a preset rotation value based on the CSS includes: and setting the rotation attribute of the sub-element to a rotation preset value based on the CSS.
4. The method for implementing a three-dimensional dynamic page based on CSS of claim 3, wherein the step of creating at least one child element in said parent element comprises:
creating six child elements in the parent element;
the step of setting the rotation attribute of the element to a preset rotation value based on the CSS includes: respectively setting the rotation attribute of each sub-element;
the HTML document comprises six blocks of contents, and each block of contents corresponds to each sub-element one by one.
5. A system for implementing a three-dimensional dynamic page based on CSS, the system comprising: the device comprises an element creating module, a visual field setting module, a style modifying module, a rotation setting module, an animation setting module, a key frame setting module, a document establishing module, a reference module and an analyzing module;
the element creating module is used for creating at least one element;
the view setting module is used for setting the view attribute of the element as a preset view value based on the CSS;
the style modification module is used for modifying the presentation style attribute of the element into a three-dimensional style based on the CSS;
the rotation setting module is used for setting the rotation attribute of the element as a rotation preset value based on the CSS;
the animation setting module is used for setting the animation attribute of the element as an animation preset value based on the CSS;
the key frame setting module is used for setting the key frame of the element motion based on the CSS;
the document establishing module is used for establishing an HTML document, and the HTML document comprises a plurality of contents;
the reference module is used for referencing the element on the content of the HTML document;
the analysis module is used for analyzing the HTML document.
6. The CSS based system of claim 5, wherein the rotation attributes comprise a direction of rotation attribute and an angle of rotation attribute;
and/or the animation attribute comprises at least one of animation name, movement time, movement speed, movement cycle number, movement mode and movement delay;
and/or, the key frames include at least an initial key frame and an end key frame.
7. The CSS based system for implementing three-dimensional dynamic pages according to claim 5,
the element creating module comprises a parent element creating unit and a child element creating unit;
the parent element creating unit is used for creating a parent element;
the child element creating unit is used for creating at least one child element in the parent element;
the view setting module is further configured to set the view attribute of the parent element to a view preset value based on the CSS;
the style modification module is further used for modifying the presentation style attribute of the parent element into a three-dimensional style based on the CSS;
the rotation setting module is further configured to set the rotation attribute of the sub-element to a preset rotation value based on the CSS.
8. The CSS-based system for implementing a three-dimensional dynamic page of claim 7, wherein the child element creation unit is configured to create six child elements in the parent element;
the rotation setting module is further used for respectively setting the rotation attribute of each sub-element;
the HTML document comprises six blocks of contents, and each block of contents corresponds to each sub-element one by one.
9. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the method of implementing a three-dimensional dynamic page based on CSS of any of claims 1 to 4 when executing the computer program.
10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the steps of the method for implementing a three-dimensional dynamic page based on CSS of any of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911267222.9A CN110990013A (en) | 2019-12-11 | 2019-12-11 | Method, system, equipment and medium for realizing three-dimensional dynamic page based on CSS |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911267222.9A CN110990013A (en) | 2019-12-11 | 2019-12-11 | Method, system, equipment and medium for realizing three-dimensional dynamic page based on CSS |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110990013A true CN110990013A (en) | 2020-04-10 |
Family
ID=70092480
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911267222.9A Pending CN110990013A (en) | 2019-12-11 | 2019-12-11 | Method, system, equipment and medium for realizing three-dimensional dynamic page based on CSS |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110990013A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117311708A (en) * | 2023-09-18 | 2023-12-29 | 中教畅享(北京)科技有限公司 | Dynamic modification method and device for resource display page in 3D scene of webpage end |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090228784A1 (en) * | 2008-03-04 | 2009-09-10 | Gilles Drieu | Transforms and animations of web-based content |
| CN103412874A (en) * | 2013-07-11 | 2013-11-27 | 北京大学深圳研究生院 | Method and system for achieving three-dimensional page |
| CN105096368A (en) * | 2015-04-30 | 2015-11-25 | 华为技术有限公司 | Three-dimensional object processing method and related apparatus |
| CN105094804A (en) * | 2015-06-18 | 2015-11-25 | 北京奇虎科技有限公司 | Method and apparatus for adding animation to page |
| CN108228181A (en) * | 2017-12-29 | 2018-06-29 | 北京奇虎科技有限公司 | The method and device of embedded html page in html page |
-
2019
- 2019-12-11 CN CN201911267222.9A patent/CN110990013A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090228784A1 (en) * | 2008-03-04 | 2009-09-10 | Gilles Drieu | Transforms and animations of web-based content |
| CN103412874A (en) * | 2013-07-11 | 2013-11-27 | 北京大学深圳研究生院 | Method and system for achieving three-dimensional page |
| CN105096368A (en) * | 2015-04-30 | 2015-11-25 | 华为技术有限公司 | Three-dimensional object processing method and related apparatus |
| CN105094804A (en) * | 2015-06-18 | 2015-11-25 | 北京奇虎科技有限公司 | Method and apparatus for adding animation to page |
| CN108228181A (en) * | 2017-12-29 | 2018-06-29 | 北京奇虎科技有限公司 | The method and device of embedded html page in html page |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117311708A (en) * | 2023-09-18 | 2023-12-29 | 中教畅享(北京)科技有限公司 | Dynamic modification method and device for resource display page in 3D scene of webpage end |
| CN117311708B (en) * | 2023-09-18 | 2024-04-05 | 中教畅享科技股份有限公司 | Dynamic modification method and device for resource display page in 3D scene of webpage end |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| Carrozzino et al. | Lowering the development time of multimodal interactive application: the real-life experience of the XVR project | |
| Ferguson | Practical algorithms for 3D computer graphics | |
| CN105096368B (en) | Three dimensional object processing method and relevant apparatus | |
| van Der Zwan et al. | Illustrative molecular visualization with continuous abstraction | |
| US20190056854A1 (en) | Developing a non-rectangular user interface | |
| KR101911906B1 (en) | Apparatus for 3D object creation and thereof Method | |
| US9886465B2 (en) | System and method for rendering of hierarchical data structures | |
| CN103543998A (en) | WEB3D image engine generating method based on HTML5 | |
| Kuan | Learning highcharts 4 | |
| CN110990013A (en) | Method, system, equipment and medium for realizing three-dimensional dynamic page based on CSS | |
| CN111104115A (en) | Method, system, equipment and storage medium for realizing three-dimensional page based on CSS | |
| CN111625234A (en) | Page skeleton screen generation method, device and equipment and readable storage medium | |
| Wang et al. | Large scale network topology visualization system based on Three. JS | |
| Cunningham et al. | Lessons from scene graphs: using scene graphs to teach hierarchical modeling | |
| Hibbard | Confessions of a visualization skeptic | |
| US20220237847A1 (en) | Method and system for client-device transformation of static image delivered over distributed computer network | |
| Bateman et al. | The Essential Guide to 3D in Flash | |
| Fang | Innovative design of visual art based on VR technology | |
| CN112464126B (en) | Method for generating panoramic chart based on Threejs, terminal equipment and storage medium | |
| Majewski et al. | Using MuPAD and JavaView to visualize mathematics on the internet | |
| Hananto et al. | Rapid World Development Method to Increase Web3D Implementation | |
| KR101911904B1 (en) | Apparatus for 3D object creation and thereof Method | |
| Chen | Evaluation of VRML for modeling virtual worlds | |
| Warner | Design applications of the MIDAS graphics system | |
| Sampaio et al. | Applying Multimedia and Virtual Reality for Learning Environments |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |