목록html5 (313)

비전공자 개발일기

Mobile Battery percentage Check

Your battery Perctenage is I am Daily Make new content For You ,hope you like this post body { margin: 1rem; padding: 2rem; background-color: #eee; } .battry { font-size: 2rem; color: cornflowerblue; } const BattryLevel = document.querySelector(".battry"); navigator.getBattery().then(function (battery) { const level = battery.level; const status = level * 100 + "%"; BattryLevel.innerHTML = statu..
HTML _CSS 2022. 6. 16. 00:31
Date Calculator

DATE CALCULATOR How many days are there between two dates? (Change a date to automatically calculate the difference) Start date End date Time elapsed: h1 { font-size: 2.5em; font-weight: 700; text-align: center; } header > p { text-align: center; font-size: 1.5rem; font-weight: 700; } div { text-align: center; border: .1em solid #000; } p { font-size: 1.4rem; font-weight: 700; } body { backgroun..
Javascript 2022. 6. 15. 01:30
CSS Input Text Field Animation

First Name Last Name * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; flex-direction: column; gap: 30px; background-color: #1D2B3A; } .inputBox { position: relative; width: 250px; } .inputBox input { width: 100%; padding: 10px; border: 1px solid rgba(255, 255, 255, .25); background-color: #1D2B3A; border-r..
HTML _CSS 2022. 6. 14. 00:22
Reavl Text Animation

You're Awesome! * { background-color: #333; } h1 { width: 30%; margin: 25% 0; } .title span { --total: calc(var(--duration) + var(--delay)); position: relative; display: block; color: transparent; overflow: hidden; animation: revealText 1s var(--total) forwards; } .title span::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleX(0); transform-ori..
HTML _CSS 2022. 6. 13. 00:18
Emoji Animation

.face { width: 100px; height: 100px; border-radius: 50%; background-color: #D8C557; box-shadow: inset -3px 0 0 4px rgba(255, 102, 0, .15); position: relative; } .eye { width: 30px; height: 30px; background-color: #FFF; border-radius: 50%; position: absolute; top: 32px; left: 12px; } .eye:last-child { left: auto; right: 12px; } .eye::after { content: ""; width: 12px; height: 12px; background-colo..
HTML _CSS 2022. 6. 12. 00:50
Heartbeat Loading Animation

body { height: 100vh; background-color: #151515; display: grid; place-items: center; box-sizing: border-box; } .heart-loader { background-color: #F44336; width: 50px; height: 50px; position: relative; transform: rotate(45deg); animation: pulsate 1s infinite; } .heart-loader::before, .heart-loader::after { position: absolute; content: ""; display: inline-block; width: 50px; height: 50px; backgrou..
HTML _CSS 2022. 6. 11. 02:02
Lamp On Off Animation

body { background-color: #2598EB; } .lamp-item { position: absolute; left: 0; right: 0; margin: 0 auto; } .lamp-top { background-color: #2D2D2D; width: 10px; height: 100px; top: 0; } .lamp-middle { background-color: #2D2D2D; border-radius: 50px 50px 0 0; width: 50px; height: 30px; top: 100px; } .lamp-bottom { background-color: #2D2D2D; border-radius: 100px 100px 0 0; width: 150px; height: 80px; ..
HTML _CSS 2022. 6. 9. 00:06
CSS Simple Animation

RED BUTTON YELLOW BUTTON GREEN BUTTON BLUE BUTTON ul li { font-size: 16px; font-weight: 600; display: block; text-align: center; cursor: pointer; border-radius: 15px; padding: 5px 0; margin: 10px 0; transition: all .5s ease-in; } .btn-red { border: 2px solid #F0514E; color: #F0514E; } .btn-red:hover { box-shadow: #F0514E 100px 0 0 2px inset; } .btn-yellow { border: 2px solid #F5E234; color: #F5E..
HTML _CSS 2022. 6. 8. 00:56
이전 Prev 1 ··· 29 30 31 32 33 34 35 ··· 40 Next 다음