网页版时钟动画效果html模板

阅读: 评论:0

2024年2月8日发(作者:)

网页版时钟动画效果html模板

font-weight: 300; } strong { font-size: 1.15em; } small { font-size: .85em; } ul, ol, menu { list-style: none; } sub, sup { font-size: .75em; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } abbr[title] { border-bottom: 1px dotted; }

dfn { font-style: italic; }/* ∞∞ form elements ∞∞ */ button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; background: transparent; outline: none; border: none; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

}

button, select { text-transform: none; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; }

fieldset { border: none; margin: 0; padding: 0; min-width: 0; } textarea { resize: none; }/* ∞∞ link styling ∞∞ */ a { display: inline; text-decoration: none; color: inherit; cursor: pointer; } a:active, a:hover { outline: 0; } /* a::before { width: 100%; height: .2rem; position: absolute; bottom: 0; left: 0; background-color: #7ac; } a:hover::before { background-color: #49e; height: .35rem; } *//* ∞∞ hr using box ∞∞ */ hr { border: none; box-sizing: border-box; height: .075rem; }/* ∞∞ hidden ∞∞ */ [hidden], template { display: none; }/* ∞∞ media specific ∞∞ */ audio:not([controls]) { display: none; height: 0;

height: 0; }/* ∞∞ tables ∞∞ */ table { border-collapse: collapse; border-spacing: 0; border: none; } td, th { margin: 0; padding: 0; font-weight: inherit; text-align: inherit; }/*====================================================== ∞∞ browser specific ∞∞ *//* ∞∞ IE ∞∞ */ article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; }

audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } a { background-color: transparent; } button { overflow: visible; } html { -ms-text-size-adjust: 100%; } img { border: none; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }

} legend { border: none; padding: 0; } mark { background: #ff0; color: #000; } svg:not(:root) { overflow: hidden; } textarea { overflow: auto; }/* ∞∞ moz ∞∞ */ body { -moz-osx-font-smoothing: grayscale; } button::-moz-focus-inner, input::-moz-focus-inner { border: none; padding: 0; } input { line-height: normal; }/* ∞∞ webkit ∞∞ */ * { -webkit-margin-before: 0; -webkit-margin-after: 0; } html { -webkit-text-size-adjust: 100%; } body { -webkit-font-smoothing: antialiased !important; } blockquote { -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0; } fieldset { -webkit-margin-start: 0; -webkit-margin-end: 0; -webkit-padding-before: 0; -webkit-padding-start: 0; -webkit-padding-end: 0; -webkit-padding-after: 0; } input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-outer-spin-button {

-webkit-appearance: none;

margin: 0;

height: auto; } input[type="search"] { -webkit-appearance: textfield; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, progress { -webkit-appearance: none; }body{background: -webkit-linear-gradient(180deg, #2FC5BA, #62C6C9, #2FC5BA);background: linear-gradient(-90deg, #2FC5BA, #62C6C9, #2FC5BA)}i { font-style: normal; font-weight: bold; font-size: 14px;}h2, h3 { font-size: 7px; letter-spacing: 1px; font-variant: small-caps; position: absolute; left: 50%; top: 32%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}h2 { font-size: 8px; top: 28%; letter-spacing: 3px; font-weight: bold;}.date { font-size: 8px; width: 50px; height: 12px; background-color: #F6EEE8; border-radius: 2px; text-align: center; position: absolute; left: 50%; bottom: 27%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}-clock { background-color: #EBEB83; width: 300px; height: 300px; border: 10px solid #F4F48E; border-radius: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

box-shadow: 15px 15px 35px -10px #488893;} { width: 272px; height: 272px; background-color: #FDFAF7; border: 2px solid #E5E375; border-radius: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} s, , s { width: 1px; height: 1px; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform-origin: 50% 0; transform-origin: 50% 0;} s { -webkit-transition: -webkit-transform 1s linear; transition: -webkit-transform 1s linear; transition: transform 1s linear; transition: transform 1s linear, -webkit-transform 1s linear} s::before, s::before, ::before { content: ""; position: absolute; bottom: 50%; left: 50%; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: translateX(-50%); transform: translateX(-50%);} s::before { width: 1px; height: 113px; background-color: #EB6444;} s::before { width: 3px; height: 105px; background-color: #68C3D4; border-radius: 3px;} ::before { width: 3px; height: 80px; background-color: #68C3D4; border-radius: 3px;

} .cercle { width: 7px; height: 7px; background-color: #FDFAF7; border: 2px solid #EB6444; border-radius: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} span { display: block; width: 1px; height: 95%; position: absolute; top: 50%; left: 50%;} span::after { content: ""; background-color: #A0A1A4; position: absolute; width: 100%; height: 10px; top: 0; left: 0;} span::before { content: ""; background-color: #A0A1A4; position: absolute; width: 100%; height: 10px; bottom: 0; left: 0;} ::after, ::before { height: 20px} ul { height: 38%; width: 0; position: absolute; bottom: 50%; left: 50%;} ul li { height: 100%; position: absolute; top: 0; left: 0; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}

ul li i { position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);} ul li:nth-child(2) { -webkit-transform: rotate(30deg); transform: rotate(30deg);} ul li:nth-child(2) i { -webkit-transform: translateX(-50%) rotate(-30deg); transform: translateX(-50%) rotate(-30deg)} ul li:nth-child(3) { -webkit-transform: rotate(60deg); transform: rotate(60deg);} ul li:nth-child(3) i { -webkit-transform: translateX(-50%) rotate(-60deg); transform: translateX(-50%) rotate(-60deg)} ul li:nth-child(4) { -webkit-transform: rotate(90deg); transform: rotate(90deg);} ul li:nth-child(4) i { -webkit-transform: translateX(-50%) rotate(-90deg); transform: translateX(-50%) rotate(-90deg)} ul li:nth-child(5) { -webkit-transform: rotate(120deg); transform: rotate(120deg);} ul li:nth-child(5) i { -webkit-transform: translateX(-50%) rotate(-120deg); transform: translateX(-50%) rotate(-120deg)} ul li:nth-child(6) { -webkit-transform: rotate(150deg); transform: rotate(150deg);} ul li:nth-child(6) i { -webkit-transform: translateX(-50%) rotate(-150deg); transform: translateX(-50%) rotate(-150deg)} ul li:nth-child(7) { -webkit-transform: rotate(180deg); transform: rotate(180deg);} ul li:nth-child(7) i {

-webkit-transform: translateX(-50%) rotate(-180deg); transform: translateX(-50%) rotate(-180deg)} ul li:nth-child(8) { -webkit-transform: rotate(210deg); transform: rotate(210deg);} ul li:nth-child(8) i { -webkit-transform: translateX(-50%) rotate(-210deg); transform: translateX(-50%) rotate(-210deg)} ul li:nth-child(9) { -webkit-transform: rotate(240deg); transform: rotate(240deg);} ul li:nth-child(9) i { -webkit-transform: translateX(-50%) rotate(-240deg); transform: translateX(-50%) rotate(-240deg)} ul li:nth-child(10) { -webkit-transform: rotate(270deg); transform: rotate(270deg);} ul li:nth-child(10) i { -webkit-transform: translateX(-50%) rotate(-270deg); transform: translateX(-50%) rotate(-270deg)} ul li:nth-child(11) { -webkit-transform: rotate(300deg); transform: rotate(300deg);} ul li:nth-child(11) i { -webkit-transform: translateX(-50%) rotate(-300deg); transform: translateX(-50%) rotate(-300deg)} ul li:last-child { -webkit-transform: rotate(330deg); transform: rotate(330deg);} ul li:last-child i { -webkit-transform: translateX(-50%) rotate(-330deg); transform: translateX(-50%) rotate(-330deg)}

  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

站长资源

网页版时钟动画效果html模板

本文发布于:2024-02-08 08:46:00,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170735316067084.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:时钟   效果   动画   资源   站长   网页   模板
留言与评论(共有 0 条评论)
   
验证码:
排行榜

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23