内容摘要
在segmentFault上看到有前端每日专栏,觉得不错,正好css基础还不够巩固决定跟着该专栏每天跟着学习一些有趣的纯html+css制作的效果,动画出处:https://segmentfault.com/a/1190000016668903
最终效果预览:https://codepen.io/comehope/pen/KGveaN
内容学习
本人把代码一点一点重新敲了遍,毕竟是初学不久还有很多不懂的地方便自己做了注释和解释,也希望未来自己能好好学好css,尽量能独立创建动画吧~
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>balloon</title>
<style>
body{
margin: 0px;
height: 100vh;
/*弹性布局 项目位于容器的中心*/
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(deepskyblue,skyblue,lightblue 20%);
}
.balloon{
width: 12em;
height: 19em;
font-size: 16px;
display: flex;
/*列显示*/
flex-direction: column;
/*位于容器中心*/
align-items: center;
}
/*定义伞盖*/
.envelope{
position: relative;
width: inherit;
height: 16em;
/*border: 5px solid blue ;*/
/*隐藏超出容器外部的部分*/
overflow: hidden;
}
/*绘制伞上端圆形*/
.envelope span{
position: absolute;
width: inherit;
height: 12em;
border-radius: 50%;
color: orange;
/*currentColor表示继承字体color的颜色*/
background-color: currentColor;
}
/*利用伪元素插入,border法绘制三角形*/
.envelope span::before{
content:'';
position: absolute;
width: 0;
height: 0;
border-width: 10em 5.5em 0em 5.5em;
border-style: solid;
border-color: currentColor transparent transparent transparent;
top: 8.45em;
left: calc(50% - 5.5em);
}
.envelope span:nth-child(2){
/*通过设置 X 轴的值来定义缩放转换。*/
transform: scaleX(0.4);
/*图像滤波处理,提亮和调整对比度*/
filter: brightness(0.85) contrast(1.4);
}
.basket{
position: relative;
width: 2em;
height: 3em;
}
.basket::before{
content: "";
position: absolute;
width: inherit;
height: 1.6em;
background-color: peru;
bottom: 0;
border-radius: 0 0 0.5em 0.5em;
/*border: 2px solid blue;*/
}
.basket::after{
content: "";
position: absolute;
width: 105%;
height: 0.3em;
background-color: saddlebrown;
left: calc((100% - 105%)/2);
top : 1.3em;
border-radius: 0.3em;
}
.basket span{
position: absolute;
width: 0.1em;
height: 1.5em;
background-color: burlywood;
left: calc((var(--n) - 1) * 0.6em);
transform-origin: bottom ;
transform: rotate(calc(var(--r) * 7deg));
}
.basket span:nth-child(1){
--n:1;--r:-2;
}
.basket span:nth-child(2){
--n:2;--r:-1;
}
.basket span:nth-child(3){
--n:3;--r:1;
}
.basket span:nth-child(4){
--n:4;--r:2;
}
.balloon{
animation: drift 2s infinite alternate;
}
/*定义浮动动画*/
@keyframes drift{
to{
transform: translateY(-5%);
}
}
</style>
</head>
<body>
<figure class = "balloon">
<!--<figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。!–>-->
<div class="envelope">
<span></span>
<span></span>
</div>
<div class="basket">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</figure>
</body>
</html>