求本课的代码
来源：2-8 动画样式定义（文字视角）
qq_与_7
2018-05-27 14:17
求本课程的代码
写回答
关注
1回答
-
- 举个丶栗子
- 2018-11-12 19:10:53
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/* 动画样式定义 */@-webkit-keyframes rock{0%{ transform: rotate(0deg) }10%{ transform: rotate(3deg) }20%{ transform: rotate(-3deg) }30%{ transform: rotate(2deg) }40%{ transform: rotate(-2deg) }50%{ transform: rotate(1deg) }60%{ transform: rotate(-1deg) }70%{ transform: rotate(0deg) }100%{ transform: rotate(0deg) }}* {padding: 0;margin: 0;}body {background: #000;min-width: 1200px;min-height: 600px;}.main {width: 1200px;height: 600px;/* 设置背景 */background: #000 url(img/bg.jpg);/* 浮动 */position: absolute;/* 右、下50%，在减去margin-右下就可以居中 */left: 50%;top: 50%;margin-left: -600px;margin-top: -300px;/* 如果超出就不需要显示 */overflow: hidden;}/*盒子 */.c_zongzi_box {width: 312px;height: 305px;position: absolute;left: 700px;top: 184px;}/* 定义rock的动画时间，infinite代表着无限执行(没有其他方法影响的话) */.c_zongzi_box_rock{-webkit-animation: rock 2s infinite;}.c_zongzi {width: 312px;height: 305px;background: url(img/zz.png);transition: all 1s;}.c_zongzi_out{opacity: 1;transform: scale(0.5);}/* 绳子 */.c_shengzi_1 {width: 218px;height: 180px;background: url(img/line_1.png);position: absolute;left: 10px;top: 120px;}.c_shengzi_2 {width: 219px;height: 159px;background: url(img/line_2.png);position: absolute;left: 10px;top: 158px;}.c_shengzi_3 {width: 264px;height: 117px;background: url(img/line_3.png);position: absolute;left: 10px;top: 220px;}.c_shengzi_4 {width: 288px;height: 56px;background: url(img/line_4.png);position: absolute;left: 10px;top: 290px;}/* 粽子肉 */.c_zongzirou {width: 288px;height: 206px;background: url(img/zzr_1.png);background-size: 288px 206px;position: absolute;left: 50px;top: 34px;z-index: 101;opacity: 0;/* display: none; */transform-origin: top center;transition: all 1s;transform: scale(0.8);}.c_zongzirou_in{/* display: block; */opacity: 1;transition: scale(1);}/* 左叶 */.c_zuoye {width: 114px;height: 266px;background: url(img/leaf_left.png);position: absolute;left: 0px;top: -30px;z-index: 1;opacity: 0;transform-origin: left bottom;transition: all 1s;}.c_zuoye_in{opacity: 1;transform:rotate(-5deg);}.c_zuoye_out{opacity: 0;transform:rotate(-15deg);}/* 右叶 */.c_youye {width: 318px;height: 338px;background: url(img/leaf_right.png);position: absolute;left: 80px;top: -60px;z-index: 111;opacity: 0;transform-origin: left bottom;transition: all 1s;transform: scale(0.8);}.c_youye_in{opacity: 1;transform:rotate(5deg) scale(0.8);}.c_youye_out{opacity: 0;transform:rotate(15deg) scale(0.8);}.c_diye {width: 618px;height: 468px;background: url(img/leaf_expand.png);position: absolute;left: -150px;top: -45px;z-index: 99;opacity: 0;transition: all 1s;}.c_diye_in{opacity: 1;}/* 字1 */.c_t_1 {width: 180px;height: 100px;background: url(img/t_jixiang.png);position: absolute;left: 50%;top: 50%;margin-left: -70px;margin-top: -50px;z-index: 200;/* 水平垂直居中 */transform-origin: center center;/* 缩放0.8 */transform: scale(0.8);opacity: 0;transition: all 1s;}.c_t_2 {width: 180px;height: 100px;background: url(img/t_ruyi.png);position: absolute;left: 50%;top: 50%;margin-left: -70px;margin-top: -50px;z-index: 200;/* 水平垂直居中 */transform-origin: center center;/* 缩放0.8 */transform: scale(0.8);opacity: 0;transition: all 1s;}.c_t_in{opacity: 1;}/* 祝福语文字 */.text{position: absolute;width: 400px;height: 370px;left: 180px;top: 140px;font-size: 14px;line-height: 20px;color: #333;/* display: none; */}.text_in{/* display: block; */}.text .caption{width: 400px;height: 240px;background: url(img/caption.png) no-repeat;margin-left:40px;opacity: 0;transition: all 1s;}.text .to{width: 400px;margin-top: 10px;margin-left: 40px;opacity: 0;transition: all 1s 0.5s;}.text .msg{width: 400px;margin-top: 10px;margin-left: 40px;opacity: 0;transition: all 1s 1s;}.text .from{width: 400px;margin-top: 10px;margin-left: 40px;text-align: right;opacity: 0;transition: all 1s 1.5s;}.text_in .caption, .text_in .to, .text_in .msg, .text_in .from{opacity: 1;margin-left: 0px;}/* 粽子肉旋转的视角 */.c_zongzirou_view_1{transition:all 0;background-image: url(img/zzr_1.png);}.c_zongzirou_view_2{transition:all 0;background-image: url(img/zzr_2.png);}.c_zongzirou_view_3{transition:all 0;background-image: url(img/zzr_3.png);}.c_zongzirou_view_4{transition:all 0;background-image: url(img/zzr_4.png)}.c_zongzirou_view_0{transition:all 0;background-image: url(img/zzr_1.png);transform:rotateY(180deg)}.c_t_view_1{transform: scale(0.8) rotateY(30deg) translate(-50px, 0) rotate(8deg);}.c_t_view_2{transform: scale(0.7) rotateY(70deg) translate(283px, -15) rotate(-8deg);}.c_t_view_3{transform: scale(0.75) rotateY(49deg) translate(-94px, 0) rotate(15deg);}.c_t_view_4{transform: scale(0.75) rotateY(49deg) translate(118px, 0) rotate(-15deg);}.c_t_view_5{transform: scale(0.8) rotateY(50deg) translate(-196px, 0) rotate(24deg);}.c_t_view_6{transform: scale(0.8) rotateY(30deg) translate(-58px, 0) rotate(-5deg);}.c_t_view_0{transform: scale(0.8);}.c_t_mirror_0{display: none;}.c_t_view_2{transform: scale(0.8) rotateY(30deg) translate(-50px, 0) rotate(8deg);}.c_t_mirror_2{transform: scale(0.7) rotateY(70deg) translate(283px, -15px) rotate(-8deg);}.c_t_view_3{transform: scale(0.75) rotateY(49deg) translate(-94px, 0) rotate(15deg);}.c_t_mirror_3{transform: scale(0.75) rotateY(49deg) translate(118px, 0) rotate(-15deg);}.c_t_view_4{transform: scale(0.6) rotateY(50deg) translate(196px, 10px) rotate(24deg);}.c_t_mirror_4{transform: scale(0.8) rotateY(30deg) translate(58px, 10px) rotate(-5deg);}</style></head><body><div class="main"><div class="c_zongzi_box"><div class="c_zongzi"></div><div class="c_shengzi_1"></div><div class="c_zongzirou"></div><div class="c_zuoye"></div><div class="c_youye"></div><div class="c_diye"></div><div class="c_t_1"></div><div class="c_t_2"></div></div><div class="text"><div class="caption"></div><div class="to">致所有的粽子们</div><div class="msg">其实粽子并不好吃，而且很难消化</div><div class="from">某不知名的</div></div></div></body></html>
JS+CSS3实现“粽情端午”
用JS和CSS3技术实现3D效果粽子特效动画，掌握动画制作过程
39505 学习 · 74 问题
相似问题