前端特效： 使用CSS生成的闪光照相机效果

使用纯CSS生成的照相机效果， 相关CSS代码如下：

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 5px;
  box-shadow: 0px 30px 50px -20px rgba(0, 0, 0, 0.7);
  -webkit-animation: 5s angle infinite;
          animation: 5s angle infinite;
}
.camera-top,
.camera-mid,
.camera-bottom {
  width: 360px;
}
.camera-top {
  height: 60px;
  background: -webkit-linear-gradient(left, #e2e2e2 0%, #f5f5f5 10%, #f5f5f5 90%, #e2e2e2 100%);
  background: linear-gradient(to right, #e2e2e2 0%, #f5f5f5 10%, #f5f5f5 90%, #e2e2e2 100%);
  border: 1px solid #DCDCDC;
  border-top-left-radius: 5px;
}
.camera-top:before {
  display: block;
  content: ‘‘;
  position: absolute;
  top: -20px;
  right: 0;
  width: 210px;
  height: 20px;
  background: -webkit-linear-gradient(left, #f5f5f5 0%, #f5f5f5 174px, #e2e2e2 100%);
  background: linear-gradient(to right, #f5f5f5 0%, #f5f5f5 174px, #e2e2e2 100%);
  border: 1px solid #DCDCDC;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: none;
  box-shadow: inset 0 15px 15px -15px #FDFDFD;
}
.camera-top .zoom {
  position: absolute;
  top: -15px;
  left: 30px;
  width: 42px;
  height: 9px;
  background: -webkit-linear-gradient(left, #b0b0b0 0%, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%);
  background: linear-gradient(to right, #b0b0b0 0%, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%);
  border: 1px solid #A3A3A3;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  box-shadow: inset 0 15px 15px -15px #FDFDFD;
}
.camera-top .zoom:before {
  display: block;
  content: ‘‘;
  position: relative;
  top: -6px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 20px;
  height: 4px;
  background: -webkit-linear-gradient(left, #b0b0b0 0%, #e2e2e2 50%, #b0b0b0 100%);
  background: linear-gradient(to right, #b0b0b0 0%, #e2e2e2 50%, #b0b0b0 100%);
  border: 1px solid #A3A3A3;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.camera-top .zoom:after {
  display: block;
  content: ‘‘;
  position: relative;
  top: 3px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 46px;
  height: 4px;
  background: -webkit-linear-gradient(left, #b0b0b0 0%, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%);
  background: linear-gradient(to right, #b0b0b0 0%, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%);
  border: 1px solid #A3A3A3;
  border-bottom: none;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.camera-top .mode-changer {
  position: absolute;
  top: -20px;
  left: 82px;
  width: 60px;
  height: 16px;
  background: -webkit-linear-gradient(left, #b0b0b0 0%, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%);
  background: linear-gradient(to right, #b0b0b0 0%, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%);
  border: 1px solid #A3A3A3;
  border-radius: 3px;
  box-shadow: inset 0 15px 15px -15px #FDFDFD;
}
.camera-top .mode-changer:after {
  display: block;
  content: ‘‘;
  position: absolute;
  top: 16px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 50px;
  height: 2px;
  background: -webkit-linear-gradient(left, #b0b0b0 0%, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%);
  background: linear-gradient(to right, #b0b0b0 0%, #e2e2e2 30%, #e2e2e2 50%, #e2e2e2 70%, #b0b0b0 100%);
  border: 1px solid #A3A3A3;
  border-bottom: none;
}
.camera-top .sides {
  width: 100%;
}
.camera-top .sides:before,
.camera-top .sides:after {
  display: block;
  content: ‘‘;
  position: absolute;
  top: 24px;
  width: 8px;
  height: 30px;
  background: -webkit-linear-gradient(top, #828181 0%, #696767 10%, #4f4d4d 50%, #403e3f 100%);
  background: linear-gradient(to bottom, #828181 0%, #696767 10%, #4f4d4d 50%, #403e3f 100%);
  border: 1px solid #3E3C3D;
  border-radius: 2px;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.5);
}
.camera-top .sides:before {
  left: -4px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.camera-top .sides:after {
  right: -4px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.camera-top .range-finder {
  position: absolute;
  top: 10px;
  left: 105px;
  width: 30px;
  height: 20px;
  background: #3E3C3D;
  border-radius: 3px;
  box-shadow: inset 0 0 5px 3px #333132;
}
.camera-top .range-finder:before {
  display: block;
  content: ‘‘;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: #797878;
  border-radius: 100%;
}
.camera-top .focus {
  position: absolute;
  top: -14px;
  left: 156px;
  width: 15px;
  height: 15px;
  background: #3F3D3E;
  border-radius: 100%;
  box-shadow: inset 0 0 4px 3px #2D2B2B, inset 0 4px 5px 0 #F5F5F5, inset 0 -3px 4px -2px #A3A2A2;
}
.camera-top .red {
  position: absolute;
  top: 5px;
  left: 165px;
  width: 30px;
  height: 30px;
  background: #DC2839;
  border-radius: 100%;
}
.camera-top .view-finder {
  position: absolute;
  left: 210px;
  width: 48px;
  height: 30px;
  background: -webkit-radial-gradient(center ellipse, #828181 0%, #403e3f 85%, #403e3f 100%);
  background: radial-gradient(ellipse at center, #828181 0%, #403e3f 85%, #403e3f 100%);
  border: 3px solid #312F2F;
  border-radius: 4px;
  box-shadow: inset 0 8px 8px -8px #FDFDFD;
}
.camera-top .flash {
  position: absolute;
  top: -6px;
  right: 20px;
  width: 58px;
  height: 46px;
  background: -webkit-radial-gradient(center ellipse, #828181 0%, #403e3f 70%, #403e3f 100%);
  background: radial-gradient(ellipse at center, #828181 0%, #403e3f 70%, #403e3f 100%);
  border: 2px solid #312F2F;
  border-radius: 3px;
  box-shadow: inset 0 8px 8px -8px #FDFDFD;
}
.camera-top .flash:before,
.camera-top .flash:after {
  display: block;
  content: ‘‘;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.camera-top .flash:before {
  width: 90%;
  height: 70%;
  background: -webkit-radial-gradient(center ellipse, #696767 0%, #1e1e1e 50%, #1e1e1e 100%);
  background: radial-gradient(ellipse at center, #696767 0%, #1e1e1e 50%, #1e1e1e 100%);
}
.camera-top .flash:after {
  width: 16px;
  height: 14px;
  background: #797979;
  border-top-left-radius: 8px 2px;
  border-top-right-radius: 8px 2px;
  border-bottom-left-radius: 8px 2px;
  border-bottom-right-radius: 8px 2px;
}
.camera-top .flash .light {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: -webkit-radial-gradient(center ellipse, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  background: radial-gradient(ellipse at center, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 100%;
  z-index: 2;
  -webkit-animation: 1s flash infinite;
          animation: 1s flash infinite;
}
.camera-mid {
  position: relative;
  height: 130px;
  background: -webkit-linear-gradient(left, #e4e4e4 0%, #fafafa 10%, #fafafa 90%, #e4e4e4 100%);
  background: linear-gradient(to right, #e4e4e4 0%, #fafafa 10%, #fafafa 90%, #e4e4e4 100%);
  border: 1px solid #DCDCDC;
  border-top: none;
  border-bottom: none;
  box-shadow: inset 0 15px 15px -15px #FDFDFD;
}
.camera-mid .sensor {
  position: absolute;
  top: 40px;
  left: 105px;
  width: 30px;
  height: 30px;
  background: #545252;
  border: 2px solid #545252;
  border-radius: 100%;
  box-shadow: inset 0 12px 12px -10px #FDFDFD, 0 2px 5px 1px rgba(0, 0, 0, 0.3);
}
.camera-mid .sensor:before,
.camera-mid .sensor:after {
  display: block;
  content: ‘‘;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.camera-mid .sensor:before {
  width: 20px;
  height: 20px;
  background: -webkit-linear-gradient(top, #E9E9E9 0%, #BDBDBD 100%);
  background: linear-gradient(to bottom, #E9E9E9 0%, #BDBDBD 100%);
  border-radius: 100%;
}
.camera-mid .sensor:after {
  width: 12px;
  height: 12px;
  background: #FAFAFA;
  border-radius: 100%;
  box-shadow: 0 2px 3px 0 #747474;
}
.camera-mid .lens {
  position: absolute;
  top: -20px;
  left: 130px;
  width: 155px;
  height: 155px;
  background: -webkit-radial-gradient(center ellipse, #000000 0%, #000000 15%, #272525 30%, #403e3f 30%, #403e3f 31%, #403e3f 40%, #e9ebec 41%, #e9ebec 44%, #b0b1b2 48%, #e8e9ea 50%, #e8e9ea 60%, #f7f8f8 60%, #787979 65%, #ffffff 66%, #ffffff 100%);
  background: radial-gradient(ellipse at center, #000000 0%, #000000 15%, #272525 30%, #403e3f 30%, #403e3f 31%, #403e3f 40%, #e9ebec 41%, #e9ebec 44%, #b0b1b2 48%, #e8e9ea 50%, #e8e9ea 60%, #f7f8f8 60%, #787979 65%, #ffffff 66%, #ffffff 100%);
  border: 1px solid #B6B7B8;
  border-radius: 100%;
  box-sizing: border-box;
  box-shadow: 0 7px 15px -2px rgba(0, 0, 0, 0.4), inset 0 -2px 15px -2px rgba(0, 0, 0, 0.2), inset 0 7px 15px -2px #FFF;
}
.camera-mid .lens:before {
  display: block;
  content: ‘‘;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 100%;
  box-shadow: inset 0 5px 3px -2px rgba(255, 255, 255, 0.5), inset 0 -5px 20px -8px rgba(255, 255, 255, 0.5);
}
.camera-bottom {
  height: 16px;
  background: -webkit-linear-gradient(left, #e2e2e2 0%, #f5f5f5 10%, #f5f5f5 90%, #e2e2e2 100%);
  background: linear-gradient(to right, #e2e2e2 0%, #f5f5f5 10%, #f5f5f5 90%, #e2e2e2 100%);
  border: 1px solid #DCDCDC;
  border-bottom: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: inset 0 15px 15px -15px #FDFDFD, inset 0 -12px 12px -10px #797979;
}
@-webkit-keyframes flash {
  0% {
    width: 0;
    height: 0;
  }
  20% {
    width: 200px;
    height: 200px;
  }
  25% {
    width: 0;
    height: 0;
  }
  45% {
    width: 200px;
    height: 200px;
  }
  50% {
    width: 0;
    height: 0;
  }
  100% {
    width: 0;
    height: 0;
  }
}
@keyframes flash {
  0% {
    width: 0;
    height: 0;
  }
  20% {
    width: 200px;
    height: 200px;
  }
  25% {
    width: 0;
    height: 0;
  }
  45% {
    width: 200px;
    height: 200px;
  }
  50% {
    width: 0;
    height: 0;
  }
  100% {
    width: 0;
    height: 0;
  }
}
@-webkit-keyframes angle {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
    box-shadow: 0px 30px 50px -20px rgba(0, 0, 0, 0.7);
  }
  25% {
    -webkit-transform: translate(-50%, -50%) rotate(2deg);
            transform: translate(-50%, -50%) rotate(2deg);
    box-shadow: 10px 30px 50px -20px rgba(0, 0, 0, 0.7);
  }
  75% {
    -webkit-transform: translate(-50%, -50%) rotate(-2deg);
            transform: translate(-50%, -50%) rotate(-2deg);
    box-shadow: -10px 30px 50px -20px rgba(0, 0, 0, 0.7);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
    box-shadow: 0px 30px 50px -20px rgba(0, 0, 0, 0.7);
  }
}
@keyframes angle {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
    box-shadow: 0px 30px 50px -20px rgba(0, 0, 0, 0.7);
  }
  25% {
    -webkit-transform: translate(-50%, -50%) rotate(2deg);
            transform: translate(-50%, -50%) rotate(2deg);
    box-shadow: 10px 30px 50px -20px rgba(0, 0, 0, 0.7);
  }
  75% {
    -webkit-transform: translate(-50%, -50%) rotate(-2deg);
            transform: translate(-50%, -50%) rotate(-2deg);
    box-shadow: -10px 30px 50px -20px rgba(0, 0, 0, 0.7);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
    box-shadow: 0px 30px 50px -20px rgba(0, 0, 0, 0.7);
  }
}

在线预览：  http://igeekbar.com/igclass/code/af644b88-36ea-4987-ac87-19dbef222f34.htm

时间： 2024-11-12 16:07:02

前端特效： 使用CSS生成的闪光照相机效果的相关文章

作为一个前端工程师，CSS是最基本的入门课，你都能做出来吗？

CSS在很多程序员看来那只不过是雕虫小技, 实际上CSS3发展到今天已经强大到超乎你的想象, 当然对于低端浏览器使用者来说,还是以前那样——囧 有时候搞CSS开发确实需要很多想象力,下面一组纯CSS3特效足以描述这一点 以下内容转载自[http://design.yesky.com/show/466/11497966_3.shtml] 设计欣赏:纯CSS3「绘制」的图形图标 IE 标志 作者: Andreas Jacob 在 Firefox 3.6+ 以及Safari 5 上显示最佳.使用了圆角

前端基础之CSS补充

目录 选择器优先级 CSS属性相关 宽和高 字体属性 背景属性 字重(粗细) 文本颜色 文字属性 文字对齐 文字装饰 背景属性 支持简写 边框 border-radius 圆形 display属性 display:"none"与visibility:hidden的区别:** CSS盒子模型 margin (行距)*** padding (内容填充) *** Border(边框) Content**(内容) float 浮动 三种取值 浮动的简单引用 clear 浮动带的影响 清除浮动

前端技术之CSS实现图片垂直居中

前端技术之CSS实现图片垂直居中技术 maybe yes 发表于2015-03-14 18:52 原文链接 : http://blog.lmlphp.com/archives/86/The_front-end_technology_pure_CSS_to_achieve_image_vertically  来自 : LMLPHP后院 让 图片实现水平居中比较简单,只需要在父级容器中添加属性 text-align 为 center 即可.使用纯 CSS 实现图片的垂直居中,可以将图片包裹容器的 d

前端必会css整理

1.设置css样式的三种方式? 外部样式表,引入一个外部css文件 内部样式表,将css代码放在<head>标签内部 内联样式,将css样式直接定义在html元素内部 2.css有哪些选择器? id选择器 类选择器 标签选择器 又可以细分为: 派生选择器(包括后代选择器.子元素选择器.相邻兄弟选择器) 伪元素选择器 属性选择器 群组选择器 通配符选择器 css优先级定义? 一般而言,选择器越特殊指向越准确,优先级越高: 计算方法: 标签选择器优先级为1 类选择器优先级为10 id选择器优先级为

前端开发：css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

分享一款jQuery创意字体特效 js+css+html5 qhttl.com

分享一款jQuery创意字体特效,字体超级棒 共八种效果,下面先上图: 预览地址:http://www.qhttl.com/content/view/2014/07/19/jiaoben71/jiaoben71/index.html 下载地址:jQuery创意字体特效 分享一款jQuery创意字体特效 js+css+html5 qhttl.com,布布扣,bubuko.com

前端之DIV+CSS布局

刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识也不可逃避,之前总觉的前端是记忆的东西,遵循常规套路即可,总感觉繁琐,现在逼着自己学习了DIV+CSS,感觉是自己以前多虑了,什么东西只要你肯学,就不是问题,任何困难在坚持的态度下都会迎刃而解.现在来讲下前端的DIV+CSS: 1.之前的网页布局设计 以前我们依赖于强大的Dreamweaver图形化

前端基础之css复习

!/usr/bin/env python# -*- coding: utf-8 -*-#前端基础之CSS#CSS 语法#CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.''' selector { #选择器 property: value; #属性:值 property: value; ... property: value } '''#例如:#h1 {color:red; font-size:14px;}# css的四种引入方式#1.行内式# 行内式是在标记的style属性中设定

【译】设计师/后端工程师也能马上实践！前端设计（CSS设计）的技巧

本文是我在众成翻译平台上认领并翻译的:设计师/后端工程师也能马上实践!前端设计(CSS设计)的技巧 ,正文内容如下: 大家好,我是2015年的应届毕业生小原,职位是前端工程师.不久前我加入了新业务的开发,负责前端的设计和实现.我想在回顾当时做法的同时,总结出一套能够轻松实现的前端编程设计方法. 什么是高灵活性的前端开发设计 不论开发什么样的业务,都可能面临界面样式没有完全确定,或者今后还需要增加或改变功能点的情况.因此代码开发与业务构思一样,都需要具备高度的灵活性,对变化频繁的前端来说更是如此.