今天是我的生日,我準備為自己制作一個特別的CSS3生日動畫,讓我的生日更加有趣和難忘。
/*CSS3生日動畫*/ /*設置背景顏色為紫色*/ body{ background-color: purple; } /*設置生日蠟燭*/ .candle{ width: 10px; height: 150px; background-color: yellow; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); animation: candle 1s ease-in-out infinite; } /*設置生日蠟燭火焰*/ .flame{ width: 50px; height: 50px; background-color: orange; position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); border-radius: 50%; animation: flame 1s ease-in-out infinite; } /*定義生日蠟燭和火焰的動畫*/ @keyframes candle{ 0%, 100%{ top: -20px; } 50%{ top: 0px; } } @keyframes flame{ 0%, 100%{ box-shadow: 0px 0px 20px 10px rgba(255, 165, 0, 0.7); } 50%{ box-shadow: 0px 0px 40px 20px rgba(255, 165, 0, 0.7); } } /*生成生日蠟燭和火焰的HTML代碼*/
通過上面的CSS3代碼,我成功制作了一個生日蠟燭和火焰的動畫,讓我的生日更加有趣和難忘。如果你想為自己或者你的朋友制作一個特別的生日動畫,只需掌握CSS3的基本知識和動畫制作方法,就可以輕松搞定。