- 1python写xml文件_pythonxml读取和写入
- 2pyqt5和spyder版本对应_Anaconda (Python3.6) +PyQT5+Eric6 安装成功版
- 3计算机视觉（CV）技术的优势和挑战-AI生成版
- 4自然语言处理库——NLTK_nltk库主要用于处理什么
- 5盘点用ChatGPT建立的私有知识库的开源项目_训练 php chatgpt 本地 知识库
- 6Label Studio简单使用
- 7数据代码分享|Python用NLP自然语言处理LSTM神经网络Twitter推特灾难文本数据、词云可视化与SVM，KNN，多层感知器，朴素贝叶斯，随机森林，GBDT对比_随即森林 svm gbdt对比
- 8静态库引入引起的错误解决方案，ld: warning: ignoring file ”…/XXX.a”, file was built for archive which is not the arc...
- 9对RNN、LSTM、GRU的理解_rnn lstm gru
- 10python3安装及pip3 报ERROR: No matching distribution found for_error: no matching distribution found for trition
css波纹动画在移动端,利用css实现波纹动画效果实例
赞
踩
效果图如下
实例代码如下
body{
background: #000;
}
.box{
width: 100%;
height: 600px;
background: #000;
}
.vr {
display: block;
width: 71px;
height: 71px;
border-radius: 50%;
position: absolute;
left: 18px;
top: 22px;
background:#98FB98 url(../imges/new_img/vr.png) no-repeat left top;
background-size: 100% 100%;
z-index: 99;
}
.vr_wrap {
background: #fff;
opacity: 0.7;
filter: alpha(opacity=70);
width: 71px;
height: 71px;
border-radius: 50%;
position: absolute;
left: 18px;
top: 22px;
box-shadow: 0px 0px 50px 10px #fbfbfb;
animation: mymove 2s infinite;
/*animation-direction:alternate;*/
border-radius: 50%;
}
.vr_wrap2 {
background: #fff;
opacity: 0.9;
filter: alpha(opacity=90);
border-radius: 50%;
width: 71px;
height: 71px;
border-radius: 50%;
position: absolute;
left: 18px;
top: 22px;
box-shadow: 0px 0px 50px 10px #fbfbfb;
animation: mymove1 2s infinite;
/*animation-direction:alternate;*/
}
@keyframes mymove {
0% {
box-shadow: 0px 0px 0px 2px #fff;
height: 71px;
width: 71px;
}
100% {
box-shadow: 0px 0px 0px 20px #fff;
height: 72px;
width: 72px;
}
100% {
opacity: 0;
filter: alpha(opacity=0);
}
}
@keyframes mymove1 {
0% {
box-shadow: 0px 0px 0px 2px #fff;
height: 71px;
width: 71px;
}
50% {
box-shadow: 0px 0px 0px 20px #fff;
height: 72px;
width: 72px;
opacity: 0;
}
100% {
opacity: 0;
filter: alpha(opacity=0);
}
}
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
