css实现复古雪花点经典电视机效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现复古雪花点经典电视机效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; } html, body { background: linear-gradient(135deg, #ffd65e 0%, #febf04 100%); } #unit { width: 350px; height: 240px; background: linear-gradient(135deg, #777266 0%, #2c2522 100%); position: absolute; left: 50%; margin-left: -170px; top: 50%; margin-top: -120px; border-radius: 5px; border-top: 1px solid #898378; box-shadow: inset 0px -4px 10px rgba(0, 0, 0, 0.2), 0px 10px 12px rgba(0, 0, 0, 0.6); } #frame { width: 270px; height: 220px; background: linear-gradient(135deg, #d2cebf 0%, #655d4f 100%); top: 8px; left: 8px; position: absolute; border-radius: 15px; box-shadow: inset 0px 0px 5px black; border: 2px solid rgba(0, 0, 0, 0.6); } #panel { position: absolute; width: 53px; height: 216px; background: linear-gradient(135deg, #d2cebf 0%, #655d4f 100%); right: 8px; top: 12px; border-radius: 2px; } #dial1 { width: 38px; height: 38px; box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5); top: 10px; left: 8px; border-bottom: 2px solid #2c2522; border-top: 2px solid #ada598; position: absolute; background: linear-gradient(135deg, #777266 0%, #2c2522 100%); border-radius: 50px; } #dial2 { width: 38px; height: 38px; box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.5); top: 60px; left: 8px; border-bottom: 2px solid #2c2522; border-top: 2px solid #ada598; position: absolute; background: linear-gradient(135deg, #777266 0%, #2c2522 100%); border-radius: 50px; } #speaker { width: 38px; height: 88px; box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.5); top: 114px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0