HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<article style="max-width: 500px; margin: 0 auto">
<h1>The Polar Bear</h1>
<p>
The polar bear (Ursus maritimus) is a hypercarnivorous species of bear. Its native range lies largely within
the Arctic Circle, encompassing the Arctic Ocean and its surrounding seas and landmasses, which includes the
northernmost regions of North America and Eurasia. It is the largest extant bear species, as well as the
largest extant land carnivore. A boar (adult male) weighs around 350–700 kg (770–1,540 lb), while a sow
(adult female) is about half that size. Although it is the sister species of the brown bear, it has evolved
to occupy a narrower ecological niche, with many body characteristics adapted for cold temperatures, for
moving across snow, ice and open water, and for hunting seals, which make up most of its diet. Although most
polar bears are born on land, they spend most of their time on the sea ice. Their scientific name means
"maritime bear" and derives from this fact. Polar bears hunt their preferred food of seals from the edge of
sea ice, often living off fat reserves when no sea ice is present. Because of their dependence on the sea
ice, polar bears are classified as marine mammals. Because of expected habitat loss caused by climate
change, the polar bear is classified as a vulnerable species. For decades, large-scale hunting raised
international concern for the future of the species, but populations rebounded after controls and quotas
began to take effect. For thousands of years, the polar bear has been a key figure in the material,
spiritual, and cultural life of circumpolar peoples, and polar bears remain important in their cultures.
Historically, the polar bear has also been known as the "white bear". It is sometimes referred to as the
"nanook", based on the Inuit term nanuq.
</p>
<div class="revealing-image">
<img style="max-width: 100%" src="https://scroll-driven-animations.style/shared/img/photo-1610570426407-efa770f9d31a.jpeg" />
</div>
<h2>Naming and etymology</h2>
<p>
Constantine John Phipps was the first to describe the polar bear as a distinct species in 1774 in his report
about his 1773 expedition towards the North Pole. He chose the scientific name Ursus maritimus, the Latin
for "maritime bear", due to the animal's native habitat. The Inuit refer to the animal as nanook
(transliterated as nanuq in the Inupiat language). The Yupik also refer to the bear as nanuuk in Siberian
Yupik. In the Chukotko-Kamchatkan languages of Alyutor and Koryak, the name of the polar bear is umqa, while
in the related Chukchi, it is umqə. In Russian, it is usually called бе́лый медве́дь (bélyj medvédj, 'white
bear'), though an older word still in use is ошку́й (Oshkúj, which comes from the Komi oski, "bear"). In
Quebec, the polar bear is referred to by the french terms ours blanc ('white bear') or ours polaire ('polar
bear'). In Norwegian, one of the primary languages of the Svalbard archipelago, the polar bear is referred
to as isbjørn ('ice bear') or kvitbjørn ('white bear'). The polar bear was previously considered to be in
its own genus, Thalarctos. However, evidence of hybrids between polar bears and brown bears, and of the
recent evolutionary divergence of the two species, does not support the establishment of this separate
genus, and the accepted scientific name is now therefore Ursus maritimus, as Phipps originally proposed.
</p>
<div class="revealing-image">
<img style="max-width: 100%" src="https://scroll-driven-animations.style/shared/img/photo-1610570311113-79ba0e69768d.jpeg" />
</div>
<h2>Taxonomy and evolution</h2>
<p>
The bear family, Ursidae, is thought to have split from other carnivorans about 38 million years ago. The
subfamily Ursinae originated approximately 4.2 million years ago. The oldest known polar bear fossil is a
130,000 to 110,000-year-old jaw bone, found on Prince Charles Foreland in 2004. Fossils show that between
10,000 and 20,000 years ago, the polar bear's molar teeth changed significantly from those of the brown
bear. Polar bears are thought to have diverged from a population of brown bears that became isolated during
a period of glaciation in the Pleistocenefrom the eastern part of Siberia (from Kamchatka and the Kolym
Peninsula). The evidence from DNA analysis is more complex. The mitochondrial DNA (mtDNA) of the polar bear
diverged from the brown bear, Ursus arctos, roughly 150,000 years ago. Further, some clades of brown bear,
as assessed by their mtDNA, were thought to be more closely related to polar bears than to other brown
bears, meaning that the brown bear might not be considered a species under some species concepts, but
paraphyletic. The mtDNA of extinct Irish brown bears is particularly close to polar bears. A comparison of
the nuclear genome of polar bears with that of brown bears revealed a different pattern, the two forming
genetically distinct clades that diverged approximately 603,000 years ago, although the latest research is
based on analysis of the complete genomes (rather than just the mitochondria or partial nuclear genomes) of
polar and brown bears, and establishes the divergence of polar and brown bears at 400,000 years ago.
However, the two species have mated intermittently for all that time, most likely coming into contact with
each other during warming periods, when polar bears were driven onto land and brown bears migrated
northward. Most brown bears have about 2 percent genetic material from polar bears, but one population, the
ABC Islands bears, has between 5 percent and 10 percent polar bear genes, indicating more frequent and
recent mating. Polar bears can breed with brown bears to produce fertile grizzly–polar bear hybrids; rather
than indicating that they have only recently diverged, the new evidence suggests more frequent mating has
continued over a longer period of time, and thus the two bears remain genetically similar. However, because
neither species can survive long in the other's ecological niche, and because they have different
morphology, metabolism, social and feeding behaviours, and other phenotypic characteristics, the two bears
are generally classified as separate species. When the polar bear was originally documented, two subspecies
were identified: the American polar bear (Ursus maritimus maritimus) by Constantine J. Phipps in 1774, and
the Siberian polar bear (Ursus maritimus marinus) by Peter Simon Pallas in 1776. This distinction has since
been invalidated. One alleged fossil subspecies has been identified: Ursus maritimus tyrannus, which became
extinct during the Pleistocene. U.m. tyrannus was significantly larger than the living subspecies. However,
recent reanalysis of the fossil suggests that it was actually a brown bear.
</p>
</article>
@keyframes reveal {
from {
opacity: 0;
clip-path: inset(60% 50% 0% 50%);
}
to {
opacity: 1;
clip-path: inset(0% 0% 0% 0%);
}
}
.revealing-image {
view-timeline-name: --revealing-image;
view-timeline-axis: block;
animation: auto linear reveal both;
animation-timeline: --revealing-image;
animation-range: entry 25% cover 50%;
}
/* 效果相同 */
/* .revealing-image {
animation: auto linear reveal both;
animation-timeline: view();
animation-range: entry 25% cover 50%;
} */
Also see: Tab Triggers