脚本宝典收集整理的这篇文章主要介绍了利用html和css写一个手机充电特效,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
这是html代码:
<div class="battery"> <div class="cover"></div></div>这是css代码:
*{ margin: 0px; padding: 0px;}body{ height: 100vh; display: flex; justify-content: center; align-items: center; //这是渐变色代码,也可以用单一色代码 background: #C9D6FF; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #E2E2E2, #C9D6FF); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #E2E2E2, #C9D6FF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}.battery{ width: 200px; height: 320px; /**/ border-radius: 10px 10px 5px 5px; border: 1px solid red; overflow: hidden;}.cover{ width: 100%; height: 100%; //这里也是渐变色代码
background: #F2994A; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #F2C94C, #F2994A); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #F2C94C, #F2994A); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ border-radius: 10px 10px 5px 5px; border: 1px solid yellow; margin-top: 320px; animation: rotate 3s infinite linear;}@keyframes rotate { from{ margin-top: 320px; } to{ margin-top: 0; }}
以上是脚本宝典为你收集整理的利用html和css写一个手机充电特效全部内容,希望文章能够帮你解决利用html和css写一个手机充电特效所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。