CSS是一个非常强大的设计工具,除了可以制作静态网页之外,还可以用来制作动态的效果,比如制作一棵好看的圣诞树。下面我们来看一下如何使用CSS来实现这样一个动态效果。
<div class="tree"> <div class="tree-trunk"></div> <div class="tree-top"> <div class="tree-star"></div> <div class="tree-layer"></div> <div class="tree-layer"></div> <div class="tree-layer"></div> <div class="tree-layer"></div> <div class="tree-layer"></div> </div> </div>
.tree { position: relative; width: 200px; height: 300px; margin: 0 auto; } .tree-trunk { position: absolute; width: 30px; height: 80px; background: brown; bottom: 0; left: 85px; z-index: 1; } .tree-top { position: absolute; width: 160px; height: 220px; top: 0; left: 20px; } .tree-star { position: absolute; width: 40px; height: 40px; background: yellow; border-radius: 50%; top: -10px; left: 60px; z-index: 2; } .tree-layer { position: absolute; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #0c6613; bottom: 0; } .tree-layer:nth-child(2) { transform: rotate(60deg); } .tree-layer:nth-child(3) { transform: rotate(120deg); } .tree-layer:nth-child(4) { transform: rotate(180deg); } .tree-layer:nth-child(5) { transform: rotate(240deg); } .tree-layer:nth-child(6) { transform: rotate(300deg); }
.tree-layer { animation: swing 1.5s ease-in-out infinite alternate; } @keyframes swing { 0% { transform: rotate(0deg); } 100% { transform: rotate(10deg); } } .tree-star { animation: twinkle 1s ease-in-out infinite; } @keyframes twinkle { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
这样一个漂亮的圣诞树就制作完成了,你可以在浏览器中查看效果,也可以根据自己的喜好来调整样式和动态效果。CSS的强大之处就在于可以让你用各种方式来创造出个性化的设计效果。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。