css布局实现一岁生日蛋糕生日快乐代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一岁生日蛋糕生日快乐代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap:400,100,500,300italic,500italic,700italic,900,300"); body { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; margin: 0; padding: 0; font-family: "Poppins"; user-select: none; perspective: 400px; background: #EEEEEE; } main { transform-style: preserve-3D; } form { width: 250px; height: 250px; border-radius: 250px; display: flex; justify-content: center; align-items: center; position: relative; padding: 0; margin: 0; background: radial-gradient(circle, white 15px, transparent 15px), LightSeaGreen; transform: rotateX(-25deg); border: solid 1px DarkCyan; box-shadow: 0 10px 0 1px LightSeaGreen, 0 20px 0 1px LightSeaGreen, 0 30px 0 1px LightSeaGreen, 0 40px 0 1px LightSeaGreen, 0 50px 0 1px LightSeaGreen, 0 60px 0 1px DarkCyan, 0 70px 0 1px DarkCyan, 0 80px 0 1px DarkCyan, 0 90px 0 1px DarkCyan, 0 100px 0 1px DarkCyan, 0 110px 0 1px Teal, 0 120px 0 1px Teal, 0 130px 0 1px Teal, 0 140px 0 1px Teal, 0 150px 0 1px Teal, 0 155px 0 5px rgba(0, 0, 0, 0.25), 0 155px 5px 10px rgba(0, 0, 0, 0.25), 0 155px 10px 15px rgba(0, 0, 0, 0.25); animation: spin 15s linear infinite; } form:before { content: ''; position: absolute; width: 250px; height: 250px; border-radius: 250px; background: radial-gradient(circle, DarkKhaki 50%, transparent 50%), radial-gradient(circle, Violet 50%, transparent 50%), radial-gradient(circle, Red 50%, transparent 50%), radial-gradient(circle, Gold 50%, transparent 50%), radial-gradient(circle, Orange 50%, transparent 50%), radial-gradient(circle, Blue 50%, transparent 50%), radial-gradient(circle, Indigo 50%, transparent 50%), radial-gradient(circle, Violet 50%, transparent 50%), radial-gradient(circle, DeepPink 50%, transparent 50%), radial-gradient(circle, LawnGreen 50%, transparent 50%), radial-gradient(circle, YellowGreen 50%, transparent 50%), radial-gradient(circle, Aquamarine 50%, transparent 50%), radial-gradient(circle, DeepSkyBlue 50%, transparent 50%), radial-gradient(circle, LightSeaGreen 50%, transparent 50%), radial-gradient(circle, DarkSeaGreen 50%, transparent 50%), radial-gradient(circle, RebeccaPurple 50%, transparent 50%), radial-gradient(circle, Tomato 50%, transparent 50%), radial-gradient(circle, Fuchsia 50%, transparent 50%), radial-gradient(circle, DarkViolet 50%, transparent 50%), radial-gradient(circle, Silver 50%, transparent 50%); background-size: 25px 25px, 20px 20px, 15px 15px, 30px 30px, 35px 35px; background-position: 60% 30%, 25% 10%, 80% 15%, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0