写点什么

原来 css 也能这么炫酷(二)

  • 2020-01-07
  • 本文字数:4938 字

    阅读完需:约 16 分钟

原来css也能这么炫酷(二)

有没有炫到呢?先贴完整的代码再讲解:

Html:


(温馨提示:左右/上下滑动可查看全部代码)


<section class="container-fluid">       <div id="HD-pictures">           <div class="row pic-banner">               <div class="col-md-6 col-md-offset-3 hidden-sm hidden-xs">                   <div class="img-box">                       <div class="img-mask"></div>                   </div>               </div>           </div>           <div class="pic-content">               <span class="toLeft glyphicon glyphicon-chevron-left"></span>               <span class="toRight glyphicon glyphicon-chevron-right"></span>               <ul class="img-list clearfix">                   <li>                       <div class="ac-img"></div>                       <img width="100%" src="images/section/img-list-1.jpg" alt=""/>                   </li>                   <li>                       <img width="100%" src="images/section/img-list-2.jpg" alt=""/>                   </li>                   <li>                       <img width="100%" src="images/section/img-list-3.jpg" alt=""/>                   </li>                   <li>                       <img width="100%" src="images/section/img-list-4.jpg" alt=""/>                   </li>                   <li>                       <img width="100%" src="images/section/img-list-5.jpg" alt=""/>                   </li>                   <li>                       <img width="100%" src="images/section/img-list-6.jpg" alt=""/>                   </li>                   <li>                       <img width="100%" src="images/section/img-list-7.jpg" alt=""/>                   </li>                   <li>                       <img width="100%" src="images/section/img-list-8.jpg" alt=""/>                   </li>               </ul>           </div>       </div>   </section>
复制代码


Css:


(温馨提示:左右/上下滑动可查看全部代码)


<style type="text/css">   body {     background: #333   }   ul {     padding:0;   }   section #HD-pictures .pic-content {     margin: 0 50px;     overflow: hidden ;     position: relative;   }   section #HD-pictures .pic-content .toLeft,   section #HD-pictures .pic-content .toRight {       position: absolute;       top: 35%;     z-index: 300;     font-size: 50px;     color: rgba(245, 234, 8, 0.2);     cursor: pointer;     transition: .3s;   }   section #HD-pictures .pic-content .toLeft {       left: 0;   }   section #HD-pictures .pic-content .toRight {       right: 0;   }   section #HD-pictures .pic-content .toLeft:hover,   section #HD-pictures .pic-content .toRight:hover {       color: rgba(235, 43, 4, 0.8);   }   section .img-list {     margin: 0;     position: relative;     left: 0px;     transition: .5s;     cursor: pointer;   }   section .img-list > li {       position: relative;       float: left;   }   section .pic-banner > .hidden-sm {       margin-top: 20px;       margin-bottom: 20px;       position: relative;   }   section .img-box {       position: relative;   }   section .img-box > .obj {      position: absolute;   }   section .img-mask {       position: absolute;       width: 100%;       height: 100%;       top: 0;       left: 0;       z-index: 100;   } </style>
复制代码


Js:


(温馨提示:左右/上下滑动可查看全部代码)


$(function () {     +function () {         var ulList = $(".img-list");         var acImg = $('.img-list .ac-img');         var imgBox = $('.img-box');         var moved = 0;//位移数         var movedAimg = 0;//activeIMG的位移数         var liWidth = parseFloat(layout()[0]);         //左右播图         $('.pic-content>span').click(function () {             var sizes = layout();             liWidth = parseFloat(sizes);             if ($(this).hasClass('toRight')) {                 if (moved > -4) {                     moved--;                     ulList.css('left', moved * liWidth + 'px');                 }                 if (movedAimg < 7) {                     movedAimg++;                     acImg.css('left', movedAimg * liWidth + 'px');                     splitShowImg(movedAimg);                 }                 //right             } else {                 //left                 if (moved < 0) {                     moved++;                     ulList.css('left', moved * liWidth + 'px');                 }                 if (movedAimg > 0) {                     movedAimg--;                     acImg.css('left', movedAimg * liWidth + 'px');                     splitShowImg(movedAimg);                 }             }         });
var k = 0; $('.img-list>li>div.ac-img').click(function (e) { e.stopPropagation(); k = parseFloat($('.img-list>li>.ac-img').css('left')) / liWidth; k = parseInt(k, 10); movedAimg = k; }); $('.img-list>li').click(function () { k = $('.img-list>li').index($(this)); movedAimg = k; acImg.css('left', k * liWidth + 'px'); splitShowImg(k); });
var xCount = 10;//水平分割数 var yCount = 6; var animateBase = ['bounce', 'flash', 'pulse', 'rubberBand', 'shake', 'swing', 'tada', 'wobble', 'jello', 'bounceIn', 'bounceInLeft', 'bounceInRight', 'lightSpeedIn', 'flip', 'rollIn', 'bounceInUp'];
function splitShowImg(movedAimg) { var frag = document.createDocumentFragment(); var parentW = parseFloat(imgBox.parent().css('width')).toFixed(4); imgBox.css({ 'width': parentW + 'px', 'height': (parentW * 9 / 16) + 'px' }); var selfH = parseFloat(imgBox.css('height')); for (var m = 0; m < xCount; m++) { for (var n = 0; n < yCount; n++) { var no = parseInt(Math.random()*(animateBase.length), 10); var div = $(`<div class="obj animated ${animateBase[no]}"></div>`); div.css({ 'width': (parentW / xCount).toFixed(0) + 'px', 'height': (parseFloat(imgBox.css('height')) / yCount).toFixed(0) + 'px' }); var l = m * parseFloat(div.css('width')).toFixed(0); var t = n * parseFloat(div.css('height')).toFixed(0); var bannerImg = $('.img-list img').eq(movedAimg); var url = bannerImg.attr('src'); div.css({ 'top': t + 'px', 'left': l + 'px' }); div.css({ 'background': `url("${url}") no-repeat -${l}px -${t}px / ${parentW}px ${selfH}px` }); $(frag).append(div[0]); } } $('.img-box').append($(frag)); }
splitShowImg(movedAimg); }(); //布局 function layout() { var boxW = parseFloat($(".pic-content").css('width')); var lis = $(".img-list>li"); lis.css('width', boxW * 0.25 + 'px'); var ulW = parseFloat(lis.eq(0).css('width')) * lis.length + 10 + 'px'; $(".img-list").css('width', ulW); return lis.eq(0).css('width'); }});
复制代码


大家看了代码是否觉得实现起来很简单呢,这个是一个精简版的,最初设计的是一个响应式的轮播,每个小方块都会按不同的屏幕宽度去排列,不过这不是重点,我们只需要关注 splitShowImg 这个函数,他接受一个 img,然后就可以分割这个 img 为我们指定数量的小方块,然后每个小方块以随机漂移的动画从分散状态组装为一个完整的大图。我们这里分为了 60 个小方块。


关键实现点:


(温馨提示:左右/上下滑动可查看全部代码)


var animateBase = ['bounce', 'flash', 'pulse', 'rubberBand', 'shake',             'swing', 'tada', 'wobble', 'jello', 'bounceIn', 'bounceInLeft',             'bounceInRight', 'lightSpeedIn', 'flip', 'rollIn','bounceInUp'   ];

复制代码


这里我们定义一个‘动画库’,里面的每一个元素都是 animate 这个动画库提供的类名,然后我们生成一个 0 到数组长度的随机数


(温馨提示:左右/上下滑动可查看全部代码)


var no = parseInt(Math.random()*(animateBase.length), 10);
复制代码


接下来要生成一个小方块:


(温馨提示:左右/上下滑动可查看全部代码)


var div = $(`<div class="obj animated ${animateBase[no]}"></div>`); div.css({            'width': (fatherW / xCount).toFixed(0) + 'px',         'height': (parseFloat(imgBox.css('height')) / yCount).toFixed(0) + 'px'        }); var l = m * parseFloat(div.css('width')).toFixed(0); var t = n * parseFloat(div.css('height')).toFixed(0); var bannerImg = $('.img-list img').eq(movedAimg); var url = bannerImg.attr('src'); div.css({             'top': t + 'px',             'left': l + 'px'        }); div.css({              'background': `url("${url}") no-repeat -${l}px -${t}px / ${fatherW}px ${selfH}px`        });
复制代码


这里就是重点所在了,我们根据展示大图区域的大小计算出每个小方块的尺寸,然后再利用绝对定位的偏移量结合自身尺寸做排列,这样就完成了小方块的布局,最后最关键的就是 background 了,我们这里用简写,规则如下:


background: img_url repeat position / size


也就是background-img、background-repeat、background-position、background-size
复制代码


看到这里你是不是就很明白了呢?简单来说就是利用 background-position、background-size 和定位来实现,background-size 是关键点,它可以保证整个背景图片的大小和布局区域相同,这样就可以等比的赋予每一个小方块对应位置的背景图片,这是 css3 的新属性,详细请参考(如无法打开,请复制链接到浏览器) http://www.w3school.com.cn/css3/css3_background.asp


写了这么久的 css 是不是现在才发现,原来简单的背景图片和绝对定位也可以这样玩?


最后,虽然这种做法看着很炫,但是实际项目中我们却很少这样做,一方面是因为很多样式都是 css3 的新特性,浏览器兼容问题难以解决,更重要的一方面就是这样大量的操作 dom 带来的性能问题是十分严重的,我们只是切了 60 份已经很明显的感觉到切图时略微卡顿,要是再多,页面直接就崩溃了。


我想要表达的其实是很多特效只要我们有想法,肯大胆去创新,最普通的样式组合起来就有可能成为最炫酷的效果。


本转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/U9sFGG6ZWzh9E4kKUm41ZA


2020-01-07 15:39656

评论

发布
暂无评论
发现更多内容

选择排序&插入排序 - DAY 15

Qien Z.

排序算法 插入排序 5月日更

掌握学习方法,成为技术大牛

实力程序员

腾讯云实名认证流程

三掌柜

5月日更

聊聊数据分析

数据社

数据分析 5月日更

网络攻防学习笔记 Day25

穿过生命散发芬芳

5月日更 网络攻防

Go 并发编程 — 深度剖析 sync.Pool 源码级原理

奇伢云存储

并发编程 云存储 Go 语言

密码学系列之:memory-hard函数

程序那些事

加密解密 密码学 程序那些事

k8s 集群下微服务 pod 的各种指标信息监控

Damon

微服务 5月日更

小傅哥,一个有“副业”的码农!

小傅哥

Java 小傅哥 技术成长 码农副业

Bzz算力挖矿系统开发节点部署

薇電13242772558

数字货币 算力

320万开发者在用的飞桨,全新发布推理部署导航图:打通AI应用最后一公里

百度大脑

人工智能 飞桨

5分钟速读之Rust权威指南(九)

wzx

rust

把数字人民币打造成全球最佳的央行数字货币

CECBC

金融

Nginx调试必备的几种技能

运维研习社

nginx 运维 实用技巧 5月日更

“丝绸之舟”创新区块链帮扶模式

CECBC

区块链 丝路

架构学习笔记:微服务架构与SOA架构

风翱

微服务 SOA 5月日更

通用连接池帮你解决资源管理难题

万俊峰Kevin

MySQL redis mongodb pool Go 语言

ThreadLocal内存溢出代码演示和原因分析!

王磊

Java 多线程

华为推送踩坑记录

mengxn

Dubbo 路由规则之标签路由

青年IT男

dubbo

从寻人到航天,科技与公益的下一个交汇点正在“星辰”中诞生

脑极体

Feed流系统重构-架构篇

勇哥java实战分享

架构 RocketMQ 分库分表 ShardingJDBC redisson

CG行业云渲染服务的演进之路

华为云开发者联盟

公有云 CG 渲染 云渲染 影视动画

微服务注册中心:Consul——概念与基础操作

程序员架构进阶

微服务 Consul 注册中心 28天写作 5月日更

访问控制

escray

学习 极客时间 安全 5月日更 安全攻防技能30讲

redis在微服务领域的贡献

捉虫大师

redis dubbo RPC 协议 注册中心

记一次与写作朋友的线下沙龙

架构精进之路

技术交流 杂记 5月日更

python 常用模块详解

若尘

模块 Python编程 5月日更

☕【JVM 技术之旅】攻克技术盲点之“JVM常量池们“

洛神灬殇

JVM 5月日更 字符串常量池 静态常量池 运行时常量池

Java设置Filter过滤了CSS等静态文件的问题

空城机

Java 5月日更

【Flutter 专题】120 Flutter & 腾讯移动通讯 TPNS~

阿策小和尚

5月日更 Flutter 小菜 0 基础学习 Flutter Android 小菜鸟

原来css也能这么炫酷(二)_语言 & 开发_Think体验设计_InfoQ精选文章