利用css伪元素制作动画

a7635485   ·   发表于 2018-04-27 13:14:46   ·   CTF&WP专版
转自 Nicolas 大佬的 效果↓ (不知道为什么上传不了效果图) 具体源码在附件 仅供参考学习 css源码下 @media screen, projection { html, body, div, h1, h2, ul, li, dl, dt, dd, p, a {padding:0; margin:0;} body {position:relative; display:block; width:960px; padding:40px 0; margin:0 auto; text-align:right; font:16px/1.5 Cambria, Georgia, sans-serif; color:#626668; background:#000;} header {position:relative; z-index:500; display:block;} header h1 {font-size:40px; font-weight:normal; line-height:1; color:#eee5a2; text-transform:uppercase; /* css3 */ text-shadow:2px 2px #32312b;} header h1:after {content:": Scale model";} header h2 {margin:10px 0 10px 250px; font-size:18px; line-height:1.2; font-weight:normal; color:#6a695f;} header h2 a {color:#777;} header h2:after {display:block; margin:10px 0 0; font-size:16px; color:#888; content:"Planet diameters 1px : 1,220 km / Distance from sun 1px : 7,125,000 km / Orbital period 1s : 4d";} header p {font-size:13px; color:#33373d;} abbr {border:none;} /* ============================================================================================================================ == SOLAR SYSTEM ** ============================================================================================================================ */ #solarsystem {position:relative; width:100%; height:640px; list-style:none;} #solarsystem li {display:inline-block; margin:0 -5px 0 0;} /* create the headings for the list this could use the title attribute for more complex headings */ #solarsystem li:before {content:attr(id); display:inline-block; position:relative; z-index:200; padding:20px 5px 25px 15px; text-align:left; text-transform:capitalize; font-size:18px; font-weight:bold; cursor:pointer; color:#386077;} /* the orbital path */ #solarsystem h2 {position:absolute; top:50%; left:-50%; border:1px solid #394057; text-indent:-9999px; text-align:left; /* css3 */ -webkit-border-radius:50%; /* redeclare in px for each planet to get working in Safari 4 */ -moz-border-radius:50%; border-radius:50%; /* redeclare in px for each planet to avoid Opera 10.5 bug 4 */ -webkit-transition:all 0.15s ease-in; -moz-transition:all 0.15s ease-in; -o-transition:all 0.15s ease-in; transition:all 0.15s ease-in;} /* create the planet */ #solarsystem h2:before {content:""; position:absolute; /* css3 */ -webkit-border-radius:50%; /* redeclare in px for each planet to get working in Safari 4 */ -moz-border-radius:50%; border-radius:50%; /* redeclare in px for each planet to avoid Opera 10.5 bug 4 */ -webkit-box-shadow:inset -2px 0 1px rgba(0,0,0,0.5); -moz-box-shadow:inset -2px 0 1px rgba(0,0,0,0.5); box-shadow:inset -2px 0 1px rgba(0,0,0,0.5);} /* highlight the orbit */ #solarsystem li:hover h2 {border-color:#aa4200;} /* control the visibility of the additional information */ #solarsystem li dl {visibility:hidden; position:absolute; z-index:200; top:40px; right:0; width:660px; padding:20px; border:1px solid #1c203c; font-size:13px; line-height:1.5; text-align:left; color:#767892; background:#00f132c; /* css3 */ opacity:0; background:rgba(15,19,44,0.9); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;} #solarsystem dt, #solarsystem dd {display:inline; color:#888;} #solarsystem dt:after {content:": ";} #solarsystem dt:first-child {display:none;} #solarsystem dt:first-child+dd {display:block; margin:0 0 5px; color:#767892;} #solarsystem li:hover dl {visibility:visible; top:60px; /* css3 */ opacity:1; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -o-transition:all 0.3s ease-in; transition:all 0.3s ease-in;} #solarsystem li:hover:before {color:#aa4200; /* css3 */ -webkit-transform:scale(1.08); -moz-transform:scale(1.08); -o-transform:scale(1.08); transform:scale(1.08);} #solarsystem li dd a {color:#777;} /* SUN ------------------------------------------------------------------------------------------------------------------------------- */ #sun h2 {width:570px; height:570px; border:none; margin:-285px 0 0 0px;} #sun h2:before {z-index:100; top:0; left:0; width:570px; height:570px; border:none; background:#fc3; /* css3 */ background-image:-webkit-gradient(linear, center left, center right, color-stop(0.22, rgb(204,153,0)), color-stop(1, rgb(255,219,112))); background-image:-moz-linear-gradient(center left, rgb(204,153,0) 22%, rgb(255,219,112) 100%); -webkit-border-radius:285px; border-radius:285px; -webkit-box-shadow:0 0 50px #c90; -moz-box-shadow:0 0 50px #c90; box-shadow:0 0 50px #c90; -webkit-transition:all 0.2s ease-in; -moz-transition:all 0.2s ease-in; -o-transition:all 0.2s ease-in; transition:all 0.2s ease-in;} #sun dd[itemprop=diameter]:after {content:" (570px)";} /* MERCURY - distance:8px ; diameter:2px ------------------------------------------------------------------------------------------------------------------------------- */ #mercury h2 {z-index:99; width:586px; height:586px; margin:-293px 0 0 -10px; /* css3 */ -webkit-border-radius:293px; border-radius:293px;} #mercury h2:before {top:292px; right:-2px; width:2px; height:2px; background:#fff;} #mercury dd[itemprop=diameter]:after {content:" (2px) / ";} #mercury dd[itemprop=distance]:after {content:" (8px) / ";} #mercury dd[itemprop=orbit]:after {content:" (22s)";} /* VENUS - distance:16px ; diameter:5px ------------------------------------------------------------------------------------------------------------------------------- */ #venus h2 {z-index:98; width:602px; height:602px; margin:-301px 0 0 -18px; /* css3 */ -webkit-border-radius:301px; border-radius:301px;} #venus h2:before {top:299px; right:-3px; width:5px; height:5px; background:#bf8639; /* css3 */ -webkit-border-radius:3px; border-radius:3px;} #venus dd[itemprop=diameter]:after {content:" (5px) / ";} #venus dd[itemprop=distance]:after {content:" (16px) / ";} #venus dd[itemprop=orbit]:after {content:" (56s)";} /* EARTH - distance:22px ; diameter:5px ------------------------------------------------------------------------------------------------------------------------------- */ #earth h2 {z-index:97; width:614px; height:614px; margin:-307px 0 0 -24px; /* css3 */ -webkit-border-radius:307px; border-radius:307px;} #earth h2:before {top:305px; right:-3px; width:5px; height:5px; background:#06c; /* css3 */ -webkit-border-radius:3px; border-radius:3px;} #earth dd[itemprop=diameter]:after {content:" (5px) / ";} #earth dd[itemprop=distance]:after {content:" (22px) / ";} #earth dd[itemprop=orbit]:after {content:" (91s)";} /* MARS - distance:32px ; diameter:3px ------------------------------------------------------------------------------------------------------------------------------- */ #mars h2 {z-index:96; width:634px; height:634px; margin:-317px 0 0 -34px; /* css3 */ -webkit-border-radius:317px; border-radius:317px;} #mars h2:before {top:316px; right:-2px; width:3px; height:3px; background:#aa4200; /* css3 */ -webkit-border-radius:2px; border-radius:2px;} #mars dd[itemprop=diameter]:after {content:" (3px) / ";} #mars dd[itemprop=distance]:after {content:" (32px) / ";} #mars dd[itemprop=orbit]:after {content:" (172s)";} /* ASTEROID BELT ------------------------------------------------------------------------------------------------------------------------------- */ li#asteroids {display:none;} /* JUPITER - distance:110px ; diameter:58px ------------------------------------------------------------------------------------------------------------------------------- */ #jupiter h2 {z-index:95; width:790px; height:790px; margin:-395px 0 0 -112px; /* css3 */ -webkit-border-radius:395px; border-radius:395px;} #jupiter h2:before {top:366px; right:-29px; width:58px; height:58px; background:#e0ae6f; /* css3 */ -webkit-box-shadow:inset -10px 0 10px rgba(0,0,0,0.75); -moz-box-shadow:inset -10px 0 10px rgba(0,0,0,0.75); box-shadow:inset -10px 0 10px rgba(0,0,0,0.75); -webkit-border-radius:29px; border-radius:29px;} #jupiter dd[itemprop=diameter]:after {content:" (58px) / ";} #jupiter dd[itemprop=distance]:after {content:" (110px) / ";} #jupiter dd[itemprop=orbit]:after {content:" (1,083s)";} /* SATURN - distance:202px ; diameter:50px ------------------------------------------------------------------------------------------------------------------------------- */ #saturn h2 {z-index:94; width:974px; height:974px; margin:-487px 0 0 -204px; /* css3 */ -webkit-border-radius:487px; border-radius:487px;} #saturn h2:before {top:462px; right:-25px; width:50px; height:50px; background:#dfd3a9; /* css3 - no Safari 4 support for inset or spread radius - webkit handling of box shadow on a rounded object is dodgy - very strange things happening in Chrome 5 */ -webkit-box-shadow:inset -8px 0 8px rgba(0,0,0,0.75); -moz-box-shadow:inset -8px 0 8px rgba(0,0,0,0.75), 0 0 0 5px #000; box-shadow:inset -8px 0 8px rgba(0,0,0,0.75), 0 0 0 5px #000; -webkit-border-radius:25px; border-radius:25px;} #saturn h2:after {content:""; display:block; position:absolute; z-index:-1; top:437px; right:-50px; width:100px; height:100px; background:#292524; /* css3 */ -webkit-box-shadow:inset -20px 0 20px rgba(0,0,0,0.5); -moz-box-shadow:inset -20px 0 20px rgba(0,0,0,0.5); box-shadow:inset -20px 0 20px rgba(0,0,0,0.5); -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;} #saturn dd[itemprop=diameter]:after {content:" (50px) / ";} #saturn dd[itemprop=distance]:after {content:" (202px) / ";} #saturn dd[itemprop=orbit]:after {content:" (2,690s)";} /* URANUS - distance:404px ; diameter:22px ------------------------------------------------------------------------------------------------------------------------------- */ #uranus h2 {z-index:93; width:1378px; height:1378px; margin:-689px 0 0 -406px; /* css3 */ -webkit-border-radius:689px; border-radius:689px;} #uranus h2:before {top:678px; right:-11px; width:22px; height:22px; background:#82b3d1; /* css3 */ -webkit-box-shadow:inset -5px 0 5px rgba(0,0,0,0.75); -moz-box-shadow:inset -5px 0 5px rgba(0,0,0,0.75); box-shadow:inset -5px 0 5px rgba(0,0,0,0.75); -webkit-border-radius:11px; border-radius:11px;} #uranus dd[itemprop=diameter]:after {content:" (22px) / ";} #uranus dd[itemprop=distance]:after {content:" (404px) / ";} #uranus dd[itemprop=orbit]:after {content:" (7,671s)";} /* NEPTUNE - distance:632px ; diameter:20px ------------------------------------------------------------------------------------------------------------------------------- */ #neptune h2 {z-index:92; width:1834px; height:1834px; margin:-917px 0 0 -634px; /* css3 */ -webkit-border-radius:917px; border-radius:917px;} #neptune h2:before {top:907px; right:-10px; width:20px; height:20px; background:#77c2ec; /* css3 */ -webkit-box-shadow:inset -5px 0 5px rgba(0,0,0,0.75); -moz-box-shadow:inset -5px 0 5px rgba(0,0,0,0.75); box-shadow:inset -5px 0 5px rgba(0,0,0,0.75); -webkit-border-radius:10px; border-radius:10px;} #neptune dd[itemprop=diameter]:after {content:" (20px) / ";} #neptune dd[itemprop=distance]:after {content:" (632px) / ";} #neptune dd[itemprop=orbit]:after {content:" (15,048s)";} /* PLUTO - distance:872px ; diameter:1px ------------------------------------------------------------------------------------------------------------------------------- */ #pluto h2 {z-index:91; width:2314px; height:2314px; margin:-1157px 0 0 -874px; /* css3 */ -webkit-border-radius:1157px; border-radius:1157px;} #pluto h2:before {top:1157px; right:-1px; width:1px; height:1px; background:#fff;} #pluto dd[itemprop=diameter]:after {content:" (1px) / ";} #pluto dd[itemprop=distance]:after {content:" (872px) / ";} #pluto dd[itemprop=orbit]:after {content:" (22,616s)";} /* CSS3 ANIMATIONS ------------------------------------------------------------------------------------------------------------------------------- */ #solarsystem li h2 {-webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -webkit-animation-name:orbit;} #mercury h2 {-webkit-animation-duration:22s;} #venus h2 {-webkit-animation-duration:56s;} #earth h2 {-webkit-animation-duration:91s;} #mars h2 {-webkit-animation-duration:172s;} #jupiter h2 {-webkit-animation-duration:1083s;} #saturn h2 {-webkit-animation-duration:2690s;} #uranus h2 {-webkit-animation-duration:7671s;} #neptune h2 {-webkit-animation-duration:15048s;} #pluto h2 {-webkit-animation-duration:22616s;} @-webkit-keyframes orbit { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } } HTML源码↓ Advanced demo: CSS pseudo-element Solar System – Nicolas Gallagher (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; e=o.createElement(i);r=o.getElementsByTagName(i)[0]; e.src='//www.google-analytics.com/analytics.js'; r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); ga('create','UA-7489188-1');ga('send','pageview');

CSS pseudo-element Solar System

Using semantic HTML5, CSS2.1 pseudo-elements, and various bits of CSS3.
Based on Alex Giron's “Our Solar System in CSS3”. Read the article.

Animation properties currently only work on -webkit browsers (Chrome or Safari).

  • Sun

    Description
    The Sun is a star, a hot ball of glowing gases at the heart of our solar system. Its influence extends far beyond the orbits of distant Neptune and Pluto. Without the Sun's intense energy and heat, there would be no life on Earth. And though it is special to us, there are billions of stars like our Sun scattered across the Milky Way galaxy. Source: NASA
    Diameter
    1,392,000 km
  • Mercury

    Description
    Sun-scorched Mercury is only slightly larger than Earth's Moon. Like the Moon, Mercury has very little atmosphere to stop impacts and it is covered with craters. Mercury's dayside is super heated by the Sun, but at night temperatures drop hundreds of degrees below freezing. Ice may even exist in craters. Mercury's egg-shaped orbit takes it around the Sun every 88 days. Source: NASA
    Diameter
    4,876 km
    Distance from sun
    57×106 km
    Orbital period
    88d
  • Venus

    Description
    Venus is a dim world of intense heat and volcanic activity. Similar in structure and size to Earth, Venus' thick, toxic atmosphere traps heat in a runaway 'greenhouse effect.' The scorched world has temperatures hot enough to melt lead. Glimpses below the clouds reveal volcanoes and deformed mountains. Venus spins slowly in the opposite direction of most planets. Source: NASA
    Diameter
    12,107 km
    Distance from sun
    107×106 km
    Orbital period
    224d
  • Earth

    Description
    Earth is an ocean planet. Our home world's abundance of water - and life - makes it unique in our solar system. Other planets, plus a few moons, have ice, atmospheres, seasons and even weather, but only on Earth does the whole complicated mix come together in a way that encourages life - and lots of it. Source: NASA
    Diameter
    12,755 km
    Distance from sun
    150×106 km
    Orbital period
    365d
  • Mars

    Description
    Though details of Mars' surface are difficult to see from Earth, telescope observations show seasonally changing features and white patches at the poles. For decades, people speculated that bright and dark areas on Mars were patches of vegetation, that Mars could be a likely place for life-forms, and that water might exist in the polar caps. When the Mariner 4 spacecraft flew by Mars in 1965, many were shocked to see photographs of a bleak, cratered surface. Mars seemed to be a dead planet. Later missions, however, have shown that Mars is a complex member of the solar system and holds many mysteries yet to be solved. Source: NASA
    Diameter
    6,794 km
    Distance from sun
    229×106 km
    Orbital period
    687d
  • Asteroids & Meteorids

  • Jupiter

    Description
    The most massive planet in our solar system, with four large moons and many smaller moons, Jupiter forms a kind of miniature solar system. Jupiter resembles a star in composition. In fact, if it had been about 80 times more massive, it would have become a star rather than a planet. Source: NASA
    Diameter
    142,983 km
    Distance from sun
    777×106 km
    Orbital period
    4,333d
  • Saturn

    Description
    Saturn was the most distant of the five planets known to the ancients. Like Jupiter, Saturn is made mostly of hydrogen and helium. Its volume is 755 times greater than that of Earth. Winds in the upper atmosphere reach 500 meters (1,600 feet) per second in the equatorial region. These super-fast winds, combined with heat rising from within the planet's interior, cause the yellow and gold bands visible in the atmosphere. Source: NASA
    Diameter
    120,536 km
    Distance from sun
    1,429×106 km
    Orbital period
    10,759d
  • Uranus

    Description
    The first planet found with the aid of a telescope, Uranus was discovered in 1781 by astronomer William Herschel. The seventh planet from the Sun is so distant that it takes 84 years to complete one orbit. Source: NASA
    Diameter
    51,117 km
    Distance from sun
    2,871×106 km
    Orbital period
    30,684d
  • Neptune

    Description
    Nearly 4.5 billion kilometers (2.8 billion miles) from the Sun, Neptune orbits the Sun once every 165 years. It is invisible to the naked eye because of its extreme distance from Earth. Interestingly, the unusual elliptical orbit of the dwarf planet Pluto brings Pluto inside Neptune's orbit for a 20-year period out of every 248 Earth years. Source: NASA
    Diameter
    49,527 km
    Distance from sun
    4,496 ×106 km
    Orbital period
    60,190d
  • Pluto

    Description
    Tiny, cold and incredibly distant, Pluto was discovered in 1930 and long considered to be the ninth planet. But after the discoveries of similar intriguing worlds even farther out, Pluto was reclassified as a dwarf planet. This new class of worlds may offer some of the best evidence of the origins of our solar system. Source: NASA
    Diameter
    2,390 km
    Distance from sun
    5,869 ×106 km
    Orbital period
    90,465d

打赏我,让我更有动力~

Attachment List

HTML+CSS伪元素太阳系动态效果源码.zip   File Size:0.007M (Download Count:11)

3 Reply   |  Until 2018-4-28 | 1185 View

a7635485
发表于 2018-4-27

部分粘贴不上,具体看附件

评论列表

  • 加载数据中...

编写评论内容

admin
发表于 2018-4-27

图片上传不了提示什么?

帖子编辑可以用代码语言插入哦

评论列表

  • 加载数据中...

编写评论内容

a7635485
发表于 2018-4-28

 

@admin

 上传图片 没有任何显示与提示 图片也不出来只有这次是这样,上会没事。之后试了试别的也没事。;至于源码 黏贴部分方便理解,附件上传完整的源码可直接使用方便大家学习使用,浏览器黏贴源代码 格式有些乱。

评论列表

  • 加载数据中...

编写评论内容
LoginCan Publish Content
返回顶部 投诉反馈

© 2016 - 2022 掌控者 All Rights Reserved.