示例

HTML

.container.fish.fish__body.spot.spot.spot.spot.eye.left.eye.right.fish__transparent.snout.upperfin.fin.left.fin.right.tail.tail-left.tail-right

CSS

$background: #7690B5;
$fish: #FBFBF2;
$koi: #F6B543;*, *::before, *::after{box-sizing: border-box;
}%pseudo_base{content: '';display: block;position: absolute;
}body{background: $background;width: 100%;min-height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;.container{position: relative;width: 15rem;height: 15rem;animation: swim 5s cubic-bezier(.17,.78,.8,.28) infinite;}
}.fish{position: relative;background: $background;width: 15rem;height: 15rem;border-radius: 50%;overflow: hidden;& > *{position: absolute;}&__transparent{width: 50%;height: 100%;background: $background;right: 0;&::before{@extend %pseudo_base;width: 7.75rem;height: 7.75rem;background: $background;border-radius: 50%;top: 0;left: -4.5rem;}}&__body{width: 50%;height: 100%;background: linear-gradient(200deg, transparent 24%, $fish 24%);&::before{z-index: 5;@extend %pseudo_base;width: 7.75rem;height: 7.75rem;background-color: $fish;border-radius: 0% 126% 0% 54%;right: -4.5rem;bottom: -0.75rem;}&::after{z-index: 8;@extend %pseudo_base;height: 6.5rem;width: 2.5rem;background-color: $background;border-radius: 0% 144%;right: -28px;bottom: 61px;transform: rotate(-52deg);}.eye{z-index: 6;position: absolute;width: 0.75rem;height: 0.5rem;border-radius: 50%;background: #121212;&.left{top: 11rem;left: 9.5rem;transform: rotate(20deg);}&.right{top: 14rem;left: 9.25rem;transform: rotate(-20deg);}}.spot{position: absolute;border-radius: 50%;background: $koi;}.spot:nth-of-type(1){width: 3.5rem;height: 3.5rem;top: 3.75rem;left: 2rem;}.spot:nth-of-type(2){z-index: 6;width: 4rem;height: 3rem;top: 14rem;left: 7rem;}.spot:nth-of-type(3){z-index: 6;width: 5rem;height: 5rem;top: 9.5rem;left: -2rem;}.spot:nth-of-type(4){z-index: 2;width: 5rem;height: 5rem;top: 6.75rem;left: -3.5rem;}}
}
.snout{position: absolute;z-index: 5;width: 1rem;height: 2.75rem;border-radius: 0.5rem 100% 50% 0.5rem;background: $fish;right: 3.3rem;bottom: 0.9rem;transform: rotate(-7deg);}
.upperfin{z-index: 5;position: absolute;top: 4rem;left: 1.5rem;width: 8rem;height: 8rem;transform: rotate(-90deg);border-radius: 50%;background-color: transparent;background-image: radial-gradient(transparent 65%, transparentize($koi, 0.7) 65%); background-size: 12rem 12rem;
}.fin{position: absolute;width: 3rem;height: 3rem;background: $fish;border-radius: 20% 100% 5% 100%;&.left{z-index: 10;transform: rotate(19deg);top: 6.75rem;left: 6rem;box-shadow: inset 5px -3px 0 #80808047;}&.right{z-index: -2;transform: rotate(-53deg);bottom: -0.5rem;left: 3.25rem;box-shadow: inset 5px 5px 0 #80808047;}
}.tail{position: absolute;width: 7rem;height: 5rem;top: 0rem;left: -1rem;transform: rotate(45deg);&-left, &-right{position: absolute;width: 4rem;height: 4rem;border-radius: 0.5rem 100%;background: $fish;}&-left{transform-origin: bottom center;transform: rotate(0deg);top: 0;left: 0;animation: left-t 1s ease infinite;}&-right{transform: rotate(90deg);top: 0;right: 0;animation: right-t 1s ease infinite;}
}@keyframes swim{0%{transform: rotate(0deg);}100%{transform: rotate(-360deg);}
}@keyframes left-t {0%{transform: rotate(0deg);}50%{transform: rotate(-10deg);}100%{transform: rotate(0deg)}
}@keyframes right-t {0%{transform: rotate(90deg);}50%{transform: rotate(100deg);}100%{transform: rotate(90deg)}
}

转运锦鲤（Transport of Koi Carp）相关推荐

分子生物学总结完整版
分子生物学第一章绪论分子生物学研究内容有哪些方面? 1.结构分子生物学: 2.基因表达的调节与控制: 3.DNA重组技术及其应用: 4.结构基因组学.功能基因组学.生物信息学.系统生物学第二章 ...
为什么有人的人生跟开了挂一样？
转载知乎:<为什么有人的人生跟开了挂一样> 知乎超10000赞文章!为什么有人的人生跟开了挂一样? Aug.25 灼见(微信号:penetratingview) 作者丨另维来源丨另维和Y ...
React生命周期函数-生命周期回调函数
面试的时候问到了如何运用,这里再回顾一下. 也叫生命周期钩子函数(生命周期钩子) 生命周期大概分成三个阶段:初始化阶段,更新阶段,卸载将组件放入页面的过程中,React会在合适的时间进行函数的调用. ...
位于东京丰洲“可在水中穿行的展览馆”teamLab Planets现已成为秋季展览空间。水面游动的锦鲤碰到参观者后会变成秋叶。
在限定期间内,联营餐厅供应用直接从丰洲市场采购的鲜鱼制作的热门美食. 东京--(美国商业资讯)--艺术团体teamLab位于东京丰洲"可在水中穿行的展览馆"teamLab Plan ...
MCE公司：抗真菌新策略：抑制线粒体磷酸盐转运
最新一项研究,报道了一种新型小分子抑制剂,可以抑制真菌中线粒体磷酸盐载体Mir1,在纳摩尔浓度下即可杀死耐药念珠菌. 线粒体磷酸盐载体 (PiC) 属于线粒体载体家族中的一员,位于线粒体内膜上,PiC ...
计算机三级锦鲤,论啥样的锦鲤惹人爱，《吐槽3》杨超越亲身示范！
先问一句,前天最后两小时剁手大家把握住了吗? 如果没有,那可能是对前天的打开方式出了问题.前天是<吐槽大会3>第二期播出的日子,据说如果晚上8点先看由腾讯微视冠名的<吐槽大会3> ...
vs打开sln是空白_周末惊喜版块 | 新文速递强推全息网游无限流鬼怪文/软妹身大佬心锦鲤女主VS阴郁暴躁倒霉蛋男主【言情】01.20...
点点关注,本萝莉就亲亲你目录 <无限求生>作者:轻云淡 [红金] [强推全息网游无限流鬼怪文] <娇宠天成(重生)>作者:沈青鲤 [金] <(仙侠)我是系统>作者: ...
ecshop transport.js/run() error:undefined
在使用ECshop的AJAX(即:transport.js) IE有时候会出现:ReferenceError: process_request is not defined,FF则出现:transpo ...
警惕！新版Net Transport（影音传送带）安装有猫腻
http://article.pcpop.com/show.aspx?topic_id=1317935 由于早些时候FlashGet和NetAnts(网络蚂蚁)迟迟没有新版本发布,Net Transp ...

转运锦鲤（Transport of Koi Carp）

转运锦鲤

示例

HTML

CSS

转运锦鲤（Transport of Koi Carp）相关推荐

最新文章

热门文章