整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

CSS3图片翻页动画（10种动画特效源码）

果图

今天给大家带来的是 CSS3图片翻页动画（10种动画）！

丰富一下列位的特效储备库！

文件版源码获取，请看评论区！

废话不多说，上源码！

CSS源码：

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

@font-face {

font-family: 'codropsicons';

src:url('../fonts/codropsicons/codropsicons.eot');

src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),

url('../fonts/codropsicons/codropsicons.woff') format('woff'),

url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),

url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');

font-weight: normal;

font-style: normal;

}

body {

background: #81c439;

color: #fff;

font-family: 'Lato', Arial, sans-serif;

}

.clearfix:before,

.clearfix:after {

content: '';

display: table;

}

.clearfix:after {

clear: both;

}

a {

color: rgba(255,255,255,0.7);

text-decoration: none;

outline: none;

}

a:hover,

a:focus {

color: #fff

}

.container > header {

margin: 0 auto;

padding: 2em 15% 0;

text-align: center;

}

.container > header h1 {

font-size: 1.8em;

line-height: 1.3;

margin: 0;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 2px;

word-spacing: 5px;

}

.container > header span {

display: block;

font-size: 60%;

opacity: 0.7;

padding: 0 0 0.6em 0.1em;

}

/* To Navigation Style */

.codrops-top {

background: rgba(255, 255, 255, 0.1);

text-transform: uppercase;

width: 100%;

font-size: 0.69em;

line-height: 2.2;

font-weight: 700;

}

.codrops-top a {

text-decoration: none;

padding: 0 1em;

letter-spacing: 0.1em;

display: inline-block;

}

.codrops-top a:hover {

background: rgba(255,255,255,0.95);

color: #81c439;

}

.codrops-top span.right {

float: right;

}

.codrops-top span.right a {

float: left;

display: block;

}

.codrops-icon:before {

font-family: 'codropsicons';

margin: 0 4px;

speak: none;

font-style: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

line-height: 1;

-webkit-font-smoothing: antialiased;

}

.codrops-icon-drop:before {

content: "\e001";

}

.codrops-icon-prev:before {

content: "\e004";

}

/* Demo Buttons Style */

.codrops-demos {

padding-top: 1em;

max-width: 700px;

margin: 0 auto;

}

.codrops-demos a {

text-decoration: none;

outline: none;

display: inline-block;

font-weight: 700;

text-transform: uppercase;

font-size: 0.8em;

margin: 0.5em 0.4em;

letter-spacing: 1px;

background: rgba(0,0,0,0.1);

padding: 0.4em 0.9em;

-webkit-transition: all 0.2s;

transition: all 0.2s;

}

.codrops-demos a.current-demo,

.codrops-demos a:hover,

.codrops-demos a:focus {

opacity: 1;

background: rgba(0,0,0,0.25);

}

section {

text-align: center;

font-size: 150%;

padding: 1em 1% 2em;

}

@media screen and (max-width: 25em) {

.codrops-icon span {

display: none;

}

}

index源码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Animations for Thumbnail Grids | Demo 1</title>

<link rel="stylesheet" type="text/css" href="css/normalize.css" />

<link rel="stylesheet" type="text/css" href="css/demo.css" />

<!--必要样式-->

<link rel="stylesheet" type="text/css" href="css/component.css" />

<script src="js/modernizr.custom.js"></script>

</head>

<body>

<div>

<header>

<h1>网格缩略图动画</h1>

<nav>

<a href="index.html">Fall</a>

<a href="index2.html">Slide</a>

<a href="index3.html">Rotate Fall</a>

<a href="index4.html">Rotate Scale</a>

<a href="index5.html">Stack</a>

<a href="index6.html">3d Flip</a>

<a href="index7.html">Bring back</a>

<a href="index8.html">Superscale</a>

<a href="index9.html">Center Flip</a>

<a href="index10.html">Front Row</a>

</nav>

</header>

<section>

<ul class="tt-grid tt-effect-fall tt-effect-delay">

<li><a href="#"><img src="img/1.jpg" alt="img01"/></a></li>

<li><a href="#"><img src="img/2.jpg" alt="img02"/></a></li>

<li><a href="#"><img src="img/3.jpg" alt="img03"/></a></li>

<li><a href="#"><img src="img/4.jpg" alt="img04"/></a></li>

<li><a href="#"><img src="img/5.jpg" alt="img05"/></a></li>

<li><a href="#"><img src="img/6.jpg" alt="img06"/></a></li>

</ul>

<nav>

<a></a><a></a><a></a><a></a>

</nav>

</section>

</div><!-- /container -->

<script src="js/classie.js"></script>

<script src="js/thumbnailGridEffects.js"></script>

</body>

</html>

、创建项目

1、创建Maven项目

2、添加依赖

在pom.xml中添加依赖配置，具体如下：

[html] view plain copy

  1. <dependencies>
  2. <dependency>
  3. <groupId>org.bytedeco</groupId>
  4. <artifactId>javacv-platform</artifactId>
  5. <version>1.3.1</version>
  6. </dependency>
  7. </dependencies>

二、具体实现

1、获取视频中间的帧作为缩略图，并返回缩略图实际存放地址

[java] view plain copy

  1. package com.lyz.medis.image;
  3. import java.awt.image.BufferedImage;
  4. import java.io.File;
  5. import java.io.IOException;
  6. import java.util.ArrayList;
  7. import java.util.Collections;
  8. import java.util.List;
  10. import javax.imageio.ImageIO;
  12. import org.bytedeco.javacpp.opencv_core;
  13. import org.bytedeco.javacpp.opencv_core.IplImage;
  14. import org.bytedeco.javacv.FFmpegFrameGrabber;
  15. import org.bytedeco.javacv.Frame;
  16. import org.bytedeco.javacv.FrameGrabber.Exception;
  17. import org.bytedeco.javacv.Java2DFrameConverter;
  18. import org.bytedeco.javacv.OpenCVFrameConverter;
  20. /**
  21. * 获取视频缩略图
  22. * @author liuyazhuang
  23. *
  24. */
  25. public class VideoImage {
  27. private static final String IMAGEMAT = "png";
  28. private static final String ROTATE = "rotate";
  30. /**
  31. * 默认截取视频的中间帧为封面
  32. */
  33. public static final int MOD = 2;
  35. public static void main(String[] args) throws Exception {
  36. System.out.println(randomGrabberFFmpegImage("C:/lyz/1522372294724_79583.mov", 2));
  37. }
  39. /**
  40. * 获取视频缩略图
  41. * @param filePath：视频路径
  42. * @param mod：视频长度/mod获取第几帧
  43. * @throws Exception
  44. */
  45. public static String randomGrabberFFmpegImage(String filePath, int mod) throws Exception {
  46. String targetFilePath = "";
  47. FFmpegFrameGrabber ff = FFmpegFrameGrabber.createDefault(filePath);
  48. ff.start();
  49. String rotate = ff.getVideoMetadata(ROTATE);
  50. int ffLength = ff.getLengthInFrames();
  51. Frame f;
  52. int i = 0;
  53. int index = ffLength / mod;
  54. while (i < ffLength) {
  55. f = ff.grabImage();
  56. if(i == index){
  57. if (null != rotate && rotate.length() > 1) {
  58. OpenCVFrameConverter.ToIplImage converter = new OpenCVFrameConverter.ToIplImage();
  59. IplImage src = converter.convert(f);
  60. f = converter.convert(rotate(src, Integer.valueOf(rotate)));
  61. }
  62. targetFilePath = getImagePath(filePath, i);
  63. doExecuteFrame(f, targetFilePath);
  64. break;
  65. }
  66. i++;
  67. }
  68. ff.stop();
  69. return targetFilePath;
  70. }
  72. /**
  73. * 根据视频路径生成缩略图存放路径
  74. * @param filePath：视频路径
  75. * @param index：第几帧
  76. * @return：缩略图的存放路径
  77. */
  78. private static String getImagePath(String filePath, int index){
  79. if(filePath.contains(".") && filePath.lastIndexOf(".") < filePath.length() - 1){
  80. filePath = filePath.substring(0, filePath.lastIndexOf(".")).concat("_").concat(String.valueOf(index)).concat(".").concat(IMAGEMAT);
  81. }
  82. return filePath;
  83. }
  85. /**
  86. * 旋转图片
  87. * @param src
  88. * @param angle
  89. * @return
  90. */
  91. public static IplImage rotate(IplImage src, int angle) {
  92. IplImage img = IplImage.create(src.height(), src.width(), src.depth(), src.nChannels());
  93. opencv_core.cvTranspose(src, img);
  94. opencv_core.cvFlip(img, img, angle);
  95. return img;
  96. }
  98. /**
  99. * 截取缩略图
  100. * @param f
  101. * @param targerFilePath:封面图片
  102. */
  103. public static void doExecuteFrame(Frame f, String targerFilePath) {
  104. if (null == f || null == f.image) {
  105. return;
  106. }
  107. Java2DFrameConverter converter = new Java2DFrameConverter();
  108. BufferedImage bi = converter.getBufferedImage(f);
  109. File output = new File(targerFilePath);
  110. try {
  111. ImageIO.write(bi, IMAGEMAT, output);
  112. } catch (IOException e) {
  113. e.printStackTrace();
  114. }
  115. }
  117. /**
  118. * 根据视频长度随机生成随机数集合
  119. * @param baseNum:基础数字，此处为视频长度
  120. * @param length：随机数集合长度
  121. * @return:随机数集合
  122. */
  123. public static List<Integer> random(int baseNum, int length) {
  124. List<Integer> list = new ArrayList<Integer>(length);
  125. while (list.size() < length) {
  126. Integer next = (int) (Math.random() * baseNum);
  127. if (list.contains(next)) {
  128. continue;
  129. }
  130. list.add(next);
  131. }
  132. Collections.sort(list);
  133. return list;
  134. }
  135. }

ello大家好，今天广州蓝景跟大家分享一些html的使用技巧。

1. 使用capture属性打开设备摄像头

正如input标签具有email、text和password属性一样，我们也可以通过一些属性打开移动设备的摄像头以捕获图像。

那就是capture属性，属性值有两个：

  • user用于前置摄像头
  • environment用于后置摄像头
<input type="file" capture="user" accept="image/*">

2. 网站自动刷新

你可以在head标签中将网站设置为定时刷新！

<head>
    <meta http-equiv="refresh" content="10">
</head>

此代码段可以实现每10秒刷新一次网站。

3. 激活拼写检查

你可以使用HTML的spellcheck属性并将其设置为true以激活拼写检查。使用lang属性指定待检查的语言。

<input type="text" spellcheck="true" lang="en">

这是一个标准属性，得到了大多数浏览器的支持。

4. 指定要上传的文件类型

你可以使用accept属性在input标签中指定允许用户上传的文件类型。

<input type="file" accept=".jpeg,.png">

5. 阻止浏览器翻译

将translate属性设置为no会阻止浏览器翻译该内容。如果你不想翻译某个短语或单词，例如logo、公司或品牌名称，那就可以应用这个属性。

<p translate="no">Brand name</p>

6. 在input标签中输入多个项目

这可以通过multiple属性来完成。

<input type="file" multiple>

适用于文件和电子邮件。如果是电子邮件，则可以用逗号分隔。

7. 为视频创建海报（缩略图）

使用poster属性，我们可以在视频加载时，或者在用户点击播放按钮之前，显示指定的缩略图。

如果不指定图片，则默认使用视频的第一帧作为缩略图。

<video poster="picture.png"></video>

8. 点击链接自动下载

如果你希望在单击目标资源的链接时下载特定资源，那就添加download属性。

<a href="image.png" download>

今天就分享到这里，想要了解更多前端技术知识，可以关注我们广州蓝景。


在线咨询
上一篇：JavaScript基础语法（一）
下一篇：ul 下的li标签都浮动，那么ul的高度用两个css搞定

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 金川区 河北区 耿马傣族佤族自治县 平乡县 榕江县 桦川县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服