<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 三角杯和夏日鸡尾酒</title>
<style>
html {
height: 100%;
}
body {
position: relative;
margin: 0;
height: 100%;
background: linear-gradient(steelblue, beige);
font-family: 'Lato', sans-serif;
font-weight: 300;
text-align: center;
}
.container {
position: relative;
margin: 0 auto;
margin-top: 30px;
width: 60%;
height: 90%;
}
.table {
position: absolute;
background-color: #6b1b1b;
bottom: 10px;
height: 20px;
width: 100%;
border-radius: 20%;
}
.glassFoot {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 12px;
border-radius: 60% 60% 10% 10%;
background: linear-gradient(to left top, #eee, #dcd0d0);
}
.glassBar {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 70px;
background: linear-gradient(to left top, #eee, #dcd0d0);
}
.glassHead {
position: absolute;
bottom: 90px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 100px 100px 0 100px;
border-color: #dcd0d0 transparent #eee transparent;
}
.liquid {
position: absolute;
bottom: 90px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 50px 50px 0 50px;
border-color: #a6d1ff transparent #eee transparent;
animation-duration: 3s;
animation-name: changeBorderWidth;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.liquid2 {
position: absolute;
bottom: 90px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-style: solid;
border-color: #fff17c transparent #eee transparent;
animation-duration: 3s;
animation-name: changeBorderWidth2;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.strawContainer {
position: relative;
width: 20px;
height: 20px;
}
.straw {
position: absolute;
bottom: 90px;
right: 300%;
bottom: 100%;
width: 10px;
height: 150px;
transform: rotate(-45deg);
background: linear-gradient(to left top, #eee, #dcd0d0);
}
.straw::before {
position: absolute;
width: 10px;
content: "";
height: 70px;
border-radius: 70% 70% 0% 0%;
transform: rotate(80deg);
background: linear-gradient(to left top, #eee, #dcd0d0);
right: 30px;
top: -30px;
}
.ice {
position: absolute;
bottom: 350%;
right: 30%;
transform: rotate(30deg);
box-shadow: 5px 0px 49px 0px rgba(170, 169, 169, 0.3);
width: 40px;
height: 40px;
background-color: rgb(242, 241, 227);
opacity: 0.4;
border-radius: 30%;
animation-duration: 3s;
animation-name: changeRotateIce2;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.ice.ice2 {
left: 70%;
transform: rotate(10deg);
}
.ice.ice3 {
left: 0%;
bottom: 500%;
transform: rotate(-20deg);
animation-duration: 3s;
animation-name: changeRotateIce;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes changeBorderWidth {
from {
border-width: 70px 70px 0 70px;
}
to {
border-width: 30px 30px 0 30px;
}
}
@keyframes changeBorderWidth2 {
from {
border-width: 90px 90px 0 90px;
}
to {
border-width: 50px 50px 0 50px;
}
}
.lemon {
border: 5px solid #dbdb00;
width: 50px;
height: 20px;
background: #ff0;
border-radius: 0 0 100px 100px;
z-index: 1;
margin: 0 auto;
position: relative;
left: 60px;
bottom: 120px;
-webkit-transform: rotate(230deg);
transform: rotate(230deg);
}
@keyframes changeRotateIce {
from {
transform: rotate(-20deg);
}
to {
transform: rotate(-40deg);
}
}
@keyframes changeRotateIce2 {
from {
transform: rotate(-30deg);
}
to {
transform: rotate(30deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="table">
<div class="glassHead">
<div class="strawContainer">
<div class="straw">
</div>
<div class="lemon">
</div>
<div class="ice">
</div>
<div class="ice ice2">
</div>
<div class="ice ice3">
</div>
</div>
</div>
<div class="liquid2">
</div>
<div class="liquid">
</div>
<div class="glassBar">
</div>
<div class="glassFoot">
</div>
</div>
</div>
</body>
</html>
纯CSS3实现的三角杯和夏日鸡尾酒动画效果源码.zip （1个子文件） 
132692130701231939 
index.html 5KB资源评论
易小侠
- 粉丝: 6639
- 资源: 9万+
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减4.47元 开通VIP
最新资源
- 三菱FX3U PLC与台达DT330温控器通信实现温度监控的详细指南：基于昆仑通态触摸屏的实用方案,三菱FX3U PLC与台达DT330温控器通讯控制系统设计与实现,三菱FX3U与3台台达DT330温
- 基于Simulink的风储联合调频与光伏变压减载仿真模型研究：虚拟惯量调频与储能下垂控制探讨（附文献与参考文献）,基于Simulink的风储联合调频与光伏变压减载仿真模型研究（附文献）,风储联合调频+
- 基于三菱PLC与触摸屏的三层电梯智能控制设计详解：梯形图程序、接线图与组态画面,三菱PLC与触摸屏三层电梯智能控制组态设计：详细梯形图、接线图与组态画面,基于三菱PLC和三菱触摸屏的三层电梯控制组态设
- 基于Java的Vue+JavaScript+HTML+Shell多语言混合开发打印功能设计源码
- 基于JavaScript的HTML+CSS飞机大战小游戏设计源码
- 基于Vue、TypeScript的电子设备商城VueShopping设计源码
- 双Buck电路并联下的下垂控制与VDCM协同控制策略：增强直流微电网稳定性仿真研究,双Buck电路并联：结合下垂控制与VDCM控制策略下的电压电流稳定性仿真分析（2018b版本及以上）,双buck电路
- 基于Python语言的学习笔记及C语言辅助设计源码整理
- 基于Vue框架的招标网网站设计源码
- 非线性磁链观测器与PLL源码研究：VESC无感观测器的深度调试与simulink仿真体验,非线性磁链观测器与PLL源码详解：VESC无感观测器代码调试入门、文献出处及Simulink仿真模型体验,非线
- 基于Java开发的理发店会员管理系统设计源码
- 基于粒子群算法的离网风光储能系统容量优化配置研究：以全生命周期成本最小化为目标，超级电容优先放电并随迭代调整惯性权重的实践与参考,基于离网环境下的混合储能系统容量优化配置：以全生命周期成本最小为目标
- Hyperworks MotionView下的发动机激励噪声仿真与车内噪声识别技术,Hyperworks MotionView下的发动机激励噪声仿真与车内噪声识别技术,发动机激励噪声仿真 使用软件为h
- 微环谐振腔中的光学频率梳：基于Matlab的LLE方程仿真研究，涵盖色散、克尔非线性与外部泵浦因素,微环谐振腔光学频率梳仿真：探究LLE方程求解与色散、克尔非线性及外部泵浦影响的分析,微环谐振腔的光学
- 基于Simulink的四旋翼无人机运动学和动力学建模与PD控制仿真研究,基于Simulink的四旋翼无人机运动学和动力学建模与PD控制仿真研究,四旋翼无人机，进行simulink建模与仿真，对它的运动
- 基于Java、HTML、JavaScript的毕设设计源码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
