示例

HTML

HTML SCSSResult Skip Results Iframe
<div class="ripple"><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="ripple"><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="ripple"><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<div class="rockWrapper"><div class="rock"></div><div class="shadow"></div>
</div>Resources1× 0.5× 0.25×Rerun

SCSS

HTML SCSSResult Skip Results Iframe
*, *::before, *::after {padding: 0;margin: 0 auto;box-sizing: border-box;
}$size: 100vw;
$speed: 3s;
$color: #246;body {background-color: $color;min-height: 100vh;perspective: $size * 1;perspective-origin: 50% calc(50% - #{$size * 0.25});overflow: hidden;
}.ripple {position: absolute;top: 50%;transform: translate(-50%, -50%);transform-style: preserve-3d;&:nth-child(1) {width: 250px; height: 250px;left: 14%;--rippleDelay: #{$speed * 0.60};}&:nth-child(2) {width: 200px; height: 200px;left: 50%;--rippleDelay: #{$speed * 0.27};}&:nth-child(3) {width: 150px; height: 150px;left: 86%;--rippleDelay: #{$speed * 0.94};}& > div {position: absolute;top: 0; left: 0;width: 100%; height: 100%;border-radius: 50%;box-shadow: 0 -10px 20px darken($color, 25%),0 10px 20px darken($color, 25%) inset,0 10px 20px lighten($color, 25%),0 -10px 20px lighten($color, 25%) inset,;transform: rotateX(90deg);animation: ripple $speed infinite linear;&:nth-child(even) { --ripAngle: 90deg}&:nth-child(odd) { --ripAngle: -90deg}@for $i from 0 to 6 {&:nth-child(#{$i + 1}) {animation-delay: calc(#{$i * $speed * -0.05} - var(--rippleDelay));}}@keyframes ripple {0% { transform: rotateX(var(--ripAngle)) scale(0); opacity: 1; }50%, 100% { transform: rotateX(var(--ripAngle)) scale(2); opacity: 0; }}
}
}.rockWrapper {position: absolute;bottom: 50%;transform: translateX(-50%);transform-style: preserve-3d;animation: rockHeight $speed infinite linear;@keyframes rockHeight {from { height: 120px; left: -4%; }to { height: 20px; left: 104%; }}.rock {position: absolute;width: 50px; height: 25px;background-color: #fff;background-image: radial-gradient(100% 125% at top, #fff, #000);transform: translate(-50%, -90%);border-radius: 50%;animation: rockBounce $speed / 6 infinite alternate ease-in;@keyframes rockBounce {from { top: 0%; }to { top: 100%; }}}.shadow {position: absolute;bottom: 0; left: 50%;transform: translate(-50%, 50%) rotateX(90deg) scale(1);width: 250px; height: 250px;background-image: radial-gradient(#000, #0000 66%);animation: rockShadow $speed / 6 infinite alternate ease-in;@keyframes rockShadow {from { transform: translate(-50%, 50%) rotateX(90deg) scale(1); opacity: 0.1; }to { transform: translate(-50%, 50%) rotateX(90deg) scale(0.3); opacity: 0.2; }}}
}
View CompiledResources1× 0.5× 0.25×Rerun

跳石（Skipping stone）相关推荐

跳一跳python源码下载_《跳》字意思读音、组词解释及笔画数 - 新华字典 - 911查询...
基本词义 ◎ 跳 tiào 〈动〉 (1) (形声.从足,兆声.本义:跃) (2) 同本义 [jump:leap:spring] 跳,-一曰跃也.--<说文> 特跳此者.--<左传· ...
饥荒控制台指令【转自Steam社区】
饥荒基本指令: 这个很简单,你也许也听过别人说过按"~"键("1"的左边)就可以打开控制台界面了或者作为新手某一天不小心按到那个键结果蹦出来一堆英文求助怎么关 ...
人月神话贯彻执行_上古神话知识梳理，精华帖
参考书: 山海经笺疏清郝懿行巴蜀书社中国古代神话袁珂校编商务印书馆山海经校注袁珂校注上海古籍出版社神话选译百题袁珂编上海古籍出版社一.神话的概念.产生和功能: 1.神话的概念. ...
形容人的内核是什么意思_成语雪泥鸿爪是形容什么的？雪泥鸿爪什么意思？蚂蚁庄园2020年12月10日答案...
斑马线和斑马什么关系?大家都知道斑马和斑马线,但是两者之间有什么关系?蚂蚁庄园12月10日提到了这个问题,我们一起来看看正确答案吧. 问题:斑马线和斑马有什么关系? 答案:横线酷似斑马纹答案解析:斑 ...
梦中香巴拉——云南游记
终于狠心给自己放了个长假,游览了向往已久的梦中香巴拉--云南. 这次行程经过的地方有:昆明.大理.丽江.香格里拉(迪庆藏族自治州).一路阳光明媚,有山有水,空气好得不得了. 但需要注意下的是: 1)高 ...
我的AI之路(55)--如何获取kinetics数据集和如何制作自己的kinetics数据集
近来做行为动作识别,根据近两年的CVPR.ICCV.ECCV论文实验了一序列的动作识别方面的模型,很多都用到了kinetics数据集或者something-something数据集,但是后者的官网目前 ...
Jyutping（粵拼）詳細教程
<香港語言學學會粵語拼音方案> ── 一個簡單又專業的粵語羅馬拼音方案香港語言學學會在1993年設計和公佈了<香港語言學學會粵語拼音方案>(簡稱<粵拼>).< ...
行为识别数据集 Kinetics
文章目录 0. 前言 1. 数据集介绍附录-分类目录 Kinetics-400 分类 Kinetics-600 分类 Kinetics-700 分类 0. 前言行为识别中重要的benchmark, ...
计算机博弈大赛php,全国计算机博弈大赛
序号棋种冠军亚军季军 1 中国象棋蒋志敏,张闽象棋名手 (XQMS) 张志富先知象棋 (OracleXQ) 沈阳工业大学沈工大象棋 (Chinese Chess) 2 围棋东北大学 ...

跳石（Skipping stone）

跳石（Skipping stone）

示例

HTML

SCSS

跳石（Skipping stone）相关推荐

最新文章

热门文章