CSS3手机屏幕背景和页面背景图片同时切换特效
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。<div class="workspace"> <div class="bg-content"></div> <div class="mobile-body"> <div class="top-bar"> <div class="camera"></div> <div class="speaker"></div> </div> <div class="button volume-up"></div> <div class="button volume-down"></div> <div class="button silent"></div> <div class="button power"></div> <div class="layer-2"></div> <div class="layer-1"></div> <div class="layer-gradient-1"></div> <div class="layer-gradient-2"></div> </div> <div class="gallery-content"> <div class="gallery-content__img active" data-img="images/bg-1.jpg"><img src="images/bg-1.jpg"></div> <div class="gallery-content__img" data-img="images/bg-2.jpg"><img src="images/bg-2.jpg"></div> <div class="gallery-content__img" data-img="images/bg-3.jpg"><img src="images/bg-3.jpg"></div> <div class="gallery-content__img" data-img="images/bg-4.jpg"><img src="images/bg-4.jpg"></div> <div class="gallery-content__img" data-img="images/bg-5.jpg"><img src="images/bg-5.jpg"></div> <div class="gallery-content__img" data-img="images/bg-6.jpg"><img src="images/bg-6.jpg"></div> <div class="gallery-content__img" data-img="images/bg-7.jpg"><img src="images/bg-7.jpg"></div> </div></div>
4、书写css代码。html { font-size: 62.5%; }body { background: lightgray; font-size: 1.4rem; }body ul { list-style: none; }body a { text-decoration: none !important; outline: none !important; color: inherit; }*, h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; font-weight: normal; box-sizing: border-box; outline: none; }.workspace { display: -web kit-box; display: -ms-flexbox; display: flex; height: 100vh; -web kit-box-pack: center; -ms-flex-pack: center; justify-content: center; -web kit-box-align: center; -ms-flex-align: center; align-items: center; background-color: white; }.workspace.active .gallery-content { -web kit-transform: translateY(0); transform: translateY(0); }.workspace.active .mobile-body { -web kit-transform: scale(1); transform: scale(1); opacity: 1; box-shadow: 0 0 2rem 1rem rgba(0, 0, 0, 0.1); }.bg-content { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: url("bg-1.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; -web kit-filter: blur(1rem); filter: blur(1rem); -web kit-transition: all .5s; transition: all .5s; }.gallery-content { position: fixed; bottom: 0; border-top-left-radius: 4rem; border-top-right-radius: 4rem; box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2); z-index: 1; background-color: black; height: 7.5rem; display: -web kit-box; display: -ms-flexbox; display: flex; -web kit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 3rem; -web kit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; align-items: center; -web kit-transform: translateY(7.5rem); transform: translateY(7.5rem); -web kit-transition: all 1s; transition: all 1s; overflow: auto; }.gallery-content__img { width: 4.5rem; height: 4.5rem; -ms-flex-negative: 0; flex-shrink: 0; margin-right: 2rem; border: .1rem solid white;cursor: pointer; -web kit-transition: all .5s; transition: all .5s; }.gallery-content__img.active {border-width: .2rem; border-color: purple; }.gallery-content__img:last-child { margin-right: 0; }
5、书写并添加js代码。<script src="js/index.js"></script>
6、代码整体结构。
7、查看效果。
