css+js实现埃菲尔铁塔亮灯开关夜景效果代码
代码语言:html
所属分类:其他
代码描述:css+js实现埃菲尔铁塔亮灯开关夜景效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 500px; width: 334px; } .switch { position: absolute; bottom: 5px; right: 5px; width: 60px; height: 34px; z-index: 10; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #1b0e06; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: #fff; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #f7d756; } input:focus + .slider { box-shadow: 0 0 1px #f7d756; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } body { background: #111; overflow: hidden; } .img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 500px; width: 334px; /* object-fit: cover;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0