You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
3.4 KiB
77 lines
3.4 KiB
3 years ago
|
<style type="text/css">
|
||
|
|
/* don't remove. */
|
||
|
|
.about-cover {
|
||
|
|
height: 75vh;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<%- partial('_partial/bg-cover') %>
|
||
|
|
|
||
|
|
<main class="content">
|
||
|
|
<div id="aboutme" class="container about-container">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-content">
|
||
|
|
<div class="music-player">
|
||
|
|
<% if (theme.musics && theme.musics.enable) { %>
|
||
|
|
<%- partial('_widget/musics') %>
|
||
|
|
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.bubbles > .particle {
|
||
|
|
/*初始透明度为0*/
|
||
|
|
opacity: 0;
|
||
|
|
position: absolute;
|
||
|
|
/*初始颜色为荧光色，透明度为0.7*/
|
||
|
|
background-color: rgba(128,255,0,0.7);
|
||
|
|
/*使用bubbles动画，持续时间18秒，缓慢进入，无限循环*/
|
||
|
|
animation: bubbles 18s ease-in infinite;
|
||
|
|
border-radius: 100%;
|
||
|
|
}
|
||
|
|
/*css keyframes 动画*/
|
||
|
|
@keyframes bubbles {
|
||
|
|
0% {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
5% {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translate(0, -20%);
|
||
|
|
}
|
||
|
|
/*这里-8000%表示是气泡的8000%*/
|
||
|
|
100% {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translate(0, -8000%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<!-- 这里让元素宽度100%（和页面等宽） -->
|
||
|
|
<div style="width: 100%; height: 100%; position: relative; bottom: 0px;" class="particletext bubbles">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||
|
|
<script>
|
||
|
|
function bubbles() {
|
||
|
|
$.each($(".particletext.bubbles"), function(){
|
||
|
|
var bubblecount = ($(this).width()/50)*10;
|
||
|
|
for(var i = 0; i <= bubblecount; i++) {
|
||
|
|
var size = ($.rnd(40,80)/10);
|
||
|
|
//这里的animation-delay很重要，关系到你的特效是否看上去是连续无断层的，上一步中css是18秒，所以这一步中延迟时间就设置成$.rnd(0,180)/10)
|
||
|
|
$(this).append('<span class="particle" style="top:' + $.rnd(20,80) + '%; left:' + $.rnd(0,95) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + ($.rnd(0,180)/10) + 's;"></span>');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
jQuery.rnd = function(m,n) {
|
||
|
|
m = parseInt(m);
|
||
|
|
n = parseInt(n);
|
||
|
|
return Math.floor( Math.random() * (n - m + 1) ) + m;
|
||
|
|
}
|
||
|
|
bubbles();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<% } %>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|