纯CSS制作焦点图-白红宇

强烈建议你试试无所不能的chatGPT，快点击我

纯CSS制作焦点图

阅读量：5768 次

发布时间：2019-06-18

本文共 1967 字，大约阅读时间需要 6 分钟。

css焦点图的思想是：利用顶层的小焦点，调动位于底层的背景的变化：

让我们来想看看效果，一睹为快：

1、先在<body>体中添加如下代码：

2、对小焦点和大背景分别进行样式设置：

/* CSS Document */*{padding:0px; margin:0px;}html,body{height:100%;}.bg{	position:fixed;	width:100%;	z-index:1;	margin:0px;}#kuangjia{	position:absolute;	text-align:center;	width:900px;	height:100px;	left:50%;	margin-left:-450px;	bottom:30px;	z-index:999;}#kuangjia li{	display: inline;}#kuangjia img{	position:relative;	display:inline;	width:100px;	height:100px;	padding:0px;	margin-right:50px;	border:3px solid #FFF;	border-radius:50%;}/*----------------------以下是动作路径----------------------------*/@-webkit-keyframes ONE {	0% { -webkit-transform:translate(-1200px,0px); }	100% { -webkit-transform:translate(0px,0px); }}.one:target {	z-index: 100;	-webkit-animation: ONE 1s;}@-webkit-keyframes TWO {	0% { -webkit-transform:translate(1200px,0px); }	100% { -webkit-transform:translate(0px,0px); }}.two:target {	z-index: 100;	-webkit-animation: TWO 1s;}@-webkit-keyframes THREE {	0% { -webkit-transform:translate(0px,600px); }	100% { -webkit-transform:translate(0px,0px); }}.three:target {	z-index: 100;	-webkit-animation: THREE 1s;}@-webkit-keyframes FOUR {	0% { -webkit-transform:translate(0px,-600px); }	100% { -webkit-transform:translate(0px,0px); }}.four:target {	z-index: 100;	-webkit-animation: FOUR 1s;}@-webkit-keyframes FIVE {	0% { -webkit-transform:translate(-1200px,0px) skew(-60deg,0deg) scale(1,0.6); }	100% { -webkit-transform:translate(0px,0px) skew(0deg,0deg) scale(1,1); }}.five:target {	z-index: 100;	-webkit-animation: FIVE 1s;}@-webkit-keyframes NO {	0% { z-index: 75; }	100% { z-index: 75; }} .bg:not(:target) {	-webkit-animation: NO 1s;}

由于这篇博文重点是讲述焦点图，故对于背景进出的动作路径不进行详细介绍，感兴趣的同学可以在我的其他博文中进行查阅。

转载于:https://my.oschina.net/ListenWater/blog/393336

你可能感兴趣的文章

AS3.0 Bitmap类实现图片3D旋转效果

Eigen ，MKL和 matlab 矩阵乘法速度比较

带三角的面包屑导航栏（新增递增数字）

Web应用程序安全与风险

codeforces 984 A. Game

One Person Game(概率+数学)

CodeForces 258B Little Elephant and Elections ：于1-m中找出七个数，使六个数里面的4和7个数比第七个数严格小：数位dp+dfs...

手把手教你测——上网快鸟

Best Time to Buy and Sell Stock III leetcode java

APP icon 自动来做，photoshop 做圆角图片

Android+Jquery Mobile学习系列(7)-保险人信息

我与网站的日常-webshell命令执行

LVS的DR设置测试

（原）torch7中指定可见的GPU

P1078 文化之旅

pip 更换国内镜像与记录

oracle之 11g RAC R2 体系结构---Grid

定义类和对象

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！

当前时间: 2024-12-20 19:08:27 当前IP: 3.135.183.19 联系邮箱:javaeecc@qq.com Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2

强烈建议你试试无所不能的CHAT-GPT，快点击我

强烈建议你试试无所不能的CHAT-GPT，快点击我