蜡烛燃烧效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CodePen - CSS Candle Flame Animation</title> <style> @import url('https://fonts.googleapis.com/css?family=Ubuntu:400,400i,700,700i'); *, *:before, *:after { margin: 0; padding: 0; word-break: break-all; box-sizing: border-box; scroll-behavior: smooth; } html { font-size: 10px; } body { font-family: 'Ubuntu', sans-serif; color: #6e6e6e; font-size: 1.6rem; background: black; } header, footer { display: block; } a, a:link, a:visited { text-decoration: none; } img { border: 0; } ul { list-style: none; } .center { width: 1170px; margin: 20px auto 0; } .holder { margin: 12rem auto 0; width: 150px; height: 400px; position: relative; } .holder *, .holder *:before, .holder *:after { position: absolute; content: ""; } .candle { bottom: 0; width: 150px; height: 300px; border-radius: 150px / 40px; box-shadow: inset 20px -30px 50px 0 rgba(0, 0, 0, 0.4), inset -20px 0 50px 0 rgba(0, 0, 0, 0.4); background: #190f02; background: -moz-linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900); background: -webkit-linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900); background: -o-linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900); background: -ms-linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900); background: linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900); } .candle:before { width: 100%; height: 40px; border-radius: 50%; border: 2px solid #d47401; background: #b86409; background: -moz-radial-gradient(#eaa121, #8e4901 45%, #b86409 80%); background: -webkit-radial-gradient(#eaa121, #8e4901 45%, #b86409 80%); background: -o-radial-gradient(#eaa121, #8e4901 45%, #b86409 80%); background: -ms-radial-gradient(#eaa121, #8e4901 45%, #b86409 80%); background: radial-gradient(#ffef80, #b86409 60%); background: radial-gradient(#eaa121, #8e4901 45%, #b86409 80%); } .candle:after { width: 34px; height: 10px; left: 50%; transform: translateX(-50%); border-radius: 50%; top: 14px; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5); background: -moz-radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%); background: -webkit-radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%); background: -o-radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%); background: -ms-radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%); background: radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%); } .thread { width: 6px; height: 36px; top: -17px; left: 50%; z-index: 1; border-radius: 40% 40%.........完整代码请登录后点击上方下载按钮下载查看
网友评论0