HTML5+CSS3练习小实例：发光果冻泡泡动画

练习来自资源

链接: 小红书.

效果图:

代码如下
index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="author" content="txd" /><meta name="generator" content="idea 2022.2" /><meta name="keywords" content="藏升" /><title>发光果冻小泡泡</title><link href="css/index.css" rel="stylesheet">
</head>
<body><div class="container"><!--    泡泡    --><div class="bubble"></div><!--    泡泡投影   --><div class="shadow"></div></div>
</body>
</html>

index.css

*{margin: 0;padding: 0;
}body{/*100%窗口高度*/height: 100vh;/*弹性布局  居中显示*/display: flex;justify-content: center;align-items: center;/*渐变背景*/background: linear-gradient(150deg,#d299c2,#fef9d7);/*溢出隐藏*/overflow: hidden;
}/*泡泡*/
.container{width: 200px;height: 200px;/*径向渐变*/background: radial-gradient(circle at 75% 30%,#fff 5px,#ff21c0 8%,#5b5b5b 60%,#ff21c0 100%);border-radius: 50%;/*阴影*/box-shadow: inset 0 0 20px #fff,inset 10px 0 46px #eaf5fc,inset 80px 0 60px #efcde6,inset -20px -60px 100px #f9f6de,inset 0px 50px 140px #f9f6de,0 0 90px #fff;/*执行动画  动画名    时长   加速后减速   无限次数播放*/animation: bubble 4s ease-in-out infinite;
}/*阴影*/
.shadow{background-color: rgba(0,0,0,0.15);width: 150px;height: 50px;border-radius: 50%;/*绝对定位*/position: absolute;left: 50%;margin-left: -75px;bottom: -120px;/*一点点模糊效果*/filter: blur(1px);/*执行动画  动画名    时长   加速后减速   无限次数播放*/animation: shadow 4s ease-in-out infinite;
}/*定义动画  泡泡投影动画*/
@keyframes  shadow{0%,100%{transform: scale(0.5);}50%{transform: scale(1);}
}/*定义动画  泡泡浮动动画*/
@keyframes  bubble{0%,100%{transform: translateY(0);}50%{transform: translateY(-80px);}
}

HTML5+CSS3练习小实例：发光果冻泡泡动画相关推荐

HTML5+CSS3+JQuery小实例：简单又令人惊艳的hover效果登录界面
今天给大家带来一个小案例,HTML5+CSS3+JQuery实现简单又令人惊艳的hover效果登录界面. 先看效果: 源代码: <div class="container"& ...
HTML5+CSS3+JS小实例：仿制网易云音乐网站的轮播图
实例:仿制网易云音乐网站的轮播图技术栈:HTML+CSS+JS 字体图标库:font-awesome 效果: 源码: <!DOCTYPE html> <html><he ...
HTML5+CSS3+JS小实例：始终飞向鼠标的纸飞机
实例:始终飞向鼠标的纸飞机技术栈:HTML+CSS+JavaScript 效果: 源码: <!DOCTYPE html> <html><head><meta ...
HTML5+CSS3+JS小实例：旋转的圣诞树
实例:旋转的圣诞树技术栈:HTML+CSS+JS 效果: 源码: <!DOCTYPE html> <html><head><meta http-equiv ...
HTML5+CSS3+JS小实例：倒计时动画特效
实例:倒计时动画特效技术栈:HTML+CSS+JS 效果: 源码: [html] <!DOCTYPE html> <html><head><meta htt ...
5个很常用的CSS3网页小实例
5个很常用的CSS3网页小实例第一种效果: 由于录制gif图片会掉帧,所以看起来不流畅,很卡,但其实实际效果还是不错的,有弹性一些. HTML <span class="shake& ...
html 萤火虫特效,html5+CSS3杯子里萤火虫发光动画特效
html5+CSS3杯子里萤火虫发光动画特效 js代码 var numP = 50; TweenMax.set("#content", {transformOrigin:" ...
HTML5+CSS3小实例：篮球弹跳动画
实例:篮球弹跳动画技术栈:HTML+CSS 效果: 源码: <!DOCTYPE html> <html><head><meta http-equiv=&qu ...
HTML5+CSS3小实例：DNA双螺旋动画
实例:DNA双螺旋动画技术栈:HTML+CSS 效果: 源码: <!DOCTYPE html> <html><head><meta http-equiv=& ...
HTML5+CSS3小实例：翻书动画
实例:翻书动画技术栈:HTML+CSS 效果: 源码: <!DOCTYPE html> <html><head><meta http-equiv=" ...

HTML5+CSS3练习小实例：发光果冻泡泡动画

HTML5+CSS3练习小实例：发光果冻泡泡动画

HTML5+CSS3练习小实例：发光果冻泡泡动画相关推荐

最新文章

热门文章