39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效

原文地址：https://segmentfault.com/a/1190000015126240

HTML code:

<div class="heart"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>

CSS code:

body {margin: 0;padding: 0;/* vh就是当前屏幕可见高度的1%，也就是说height:100vh == height:100%;但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，但是设置height:100vh，该元素会被撑开屏幕高度一致。*/height: 100vh;display: flex;justify-content: center;align-items: center;background: radial-gradient(circle at center, navy, black);
}
.heart{font-size: 20px;width: 16em;height: 11em;display: flex;justify-content: space-between;
}
.heart span {--c: lightblue;--h: 50%;--t: 25%;width: 1em;height: var(--h);position: relative;top: var(--t);border-radius: 0.5em;background-color: var(--c);animation: beating 5s infinite;
}
@keyframes beating{0%, 30% {top: var(--t);height: var(--h);background-color: var(--c);filter: blur(0);width: 1em;}60%, 70% {height: 50%;top: 25%;background-color: lightblue;filter: blur(5px);width: 0.1em;}
}
/* 配色 */
.heart span:nth-child(1),
.heart span:nth-child(9) {--c: orangered;/* 设置高度 */--h: 3em;--t: 2.2em;
}
.heart span:nth-child(2),
.heart span:nth-child(8) {--c: gold;--h: 6em;--t: 0.6em;
}
.heart span:nth-child(3),
.heart span:nth-child(7) {--c: limegreen;--h: 8em;--t: 0;
}
.heart span:nth-child(4),
.heart span:nth-child(6) {--c: dodgerblue;--h: 9em;--t: 0.8em;
}
.heart span:nth-child(5) {--c: mediumpurple;--h: 9.4em;--t: 1.6em;
}

posted on 2019-02-21 11:29 人生与戏阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/FlyingLiao/p/10411346.html

39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效相关推荐

纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QxbmxJ 可交互视频教 ...
纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效...
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QxbmxJ 可交互视频教 ...
如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
4. 纯 CSS 创作一个金属光泽 3D 按钮特效
4. 纯 CSS 创作一个金属光泽 3D 按钮特效原文地址:https://segmentfault.com/a/1190000014599280 HTML代码: <div class=&qu ...
7.纯 CSS 创作一个 3D 文字跑马灯特效
7.纯 CSS 创作一个 3D 文字跑马灯特效原文地址:https://segmentfault.com/a/1190000014663038 感想:简单的从右到左动画 HTML代码: <di ...
如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览在线演示按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程此视 ...
如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览在线演示按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程此视 ...
如何用纯 CSS 创作一个冒着热气的咖啡杯
效果预览在线演示按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/xjXxoz 可交互视频教程此视 ...
如何用纯 CSS 创作一个渐变色动画边框
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...

39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效

39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效相关推荐

最新文章

热门文章