脚本宝典收集整理的这篇文章主要介绍了利用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，请注明来意。