<!DOCTYPE html>

<html>

    <head>

        <meta charset="gb2312">

        <title>放大旋转动画DEMO演示</title>

        <style type="text/css">

            *{

                padding: 0;

                margin: 0;

            }

            body{

            /* background: url(../images/bodyBg.jpg) repeat;     */

            }

            .nav{

                width: 90%;

                margin: 0 auto;

                margin-top: 100px;

                height: 255px;

                overflow: hidden;

            }

            .nav ul{

            }

            .nav ul li{

                position: relative;

                float: left;

                width: 210px;

                margin-top: 70px;

                height: 120px;

                text-align: center;

                list-style: none;

                margin-left: 20px;

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

            }

            .nav ul li:before{

                content: "";

                width: 210px;

                height: 120px;

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

                position: absolute;

                top: 0;

                left: 0;

                transform: rotate(60deg);

                -webkit-transform: rotate(60deg);

                z-index:-1;

            }

            .nav ul li:after{

                content: "";

                width: 210px;

                height: 120px;

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

                position: absolute;

                top: 0;

                left: 0;

                transform: rotate(-60deg);

                -webkit-transform: rotate(-60deg);

                z-index:-1;

            }

            .nav ul li img{

                transition: 1s;

                -webkit-transition: 1s;

                display: block;

                margin: 21px auto;

                z-index:2;

            }

            .nav ul li img:hover{

                transform:rotate(360deg) acale(1.5);

                -webkit-transform:rotate(360deg) scale(1.5);

                -moz-transform:rotate(360deg) acale(1.5);

                -ms-transform:rotate(360deg) acale(1.5);

            }

        </style>

    </head>

    <body>

        <div class="nav">

            <ul>

            <li><img src="data:images/1.png"/></li>

            <!-- <li><img src="data:images/2.png"/></li>

            <li><img src="data:images/3.png"/></li>

            <li><img src="data:images/4.png"/></li>

            <li><img src="data:images/5.png"/></li> -->

            </ul>

        </div>

    </body>

</html>

鼠标移到中间图片会有放大旋转效果

css3 一个六边形 和 放大旋转动画DEMO演示的更多相关文章

  1. CSS3 skew倾斜、rotate旋转动画

    css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jque ...

  2. 适应手机端的jQuery图片滑块动画DEMO演示

    在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  3. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  4. [css3]圆盘旋转动画

    效果:打开只能看到logo,鼠标放上去,圆盘渐显放大旋转展示出来 知识点: [html+css] 1.logo水平垂直居中于圆盘内,用到的样式 position: absolute; left: 0; ...

  5. 超绚丽CSS3多色彩发光立方体旋转动画

    CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.css3动画的属性主要分为三类:transform.transition以及anim ...

  6. css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)

    源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...

  7. CSS3实现3D木块旋转动画

    CSS3实现3D木块旋转动画,css3特效,旋转动画,3D,立体效果,CSS3实现3D木块旋转动画是一款迷人的HTML5+CSS3实现的3D旋转动画. 代码下载:http://www.huiyi8.c ...

  8. css3通过scale()实现放大功能、通过rotate()实现旋转功能

    css3通过scale()实现放大功能.通过rotate()实现旋转功能,下面有个示例,大家可以参考下 通过scale()实现放大功能 通过rotate()实现旋转功能 而transition则可设置 ...

  9. 如何用纯 CSS 创作一个方块旋转动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 ...

随机推荐

  1. leetcode.位运算.136只出现一次的元素-Java

    1. 具体题目 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明:你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗? 示例 1 ...

  2. 《Javascript权威指南》学习笔记之十七：BOM新成就（1）--client存储数据（Storage实现）

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u011043843/article/details/30255899     数据构成了web网站的 ...

  3. ERROR 1290 (HY000): Unknown error 1290

    如有需要可以加我Q群[308742428]大家一起讨论技术,提供有偿服务. 后面会不定时为大家更新文章,敬请期待. 喜欢的朋友可以关注下. 记录一次在连接数据库报的一个错误信息: 原因是MySQL正使 ...

  4. Java中date和calendar的用法

    获取现在系统的时间和日期看起来是一件非常神奇的事情,但是当使用date和calendar之后发现仍然非常神奇. 1.date 使用date日期之前需要导入包: import java.text.Sim ...

  5. 项目案例之GitLab的数据迁移

    项目案例之GitLab的数据迁移 链接:https://pan.baidu.com/s/1CgaEv12cwfbs5RxcNpxdAg 提取码:fytm 复制这段内容后打开百度网盘手机App,操作更方 ...

  6. iptables 防火墙（上）

    iptables 防火墙(上) 1. 防火墙概述 1.1 概念与作用 网络中的防火墙是一种将内部网络和外部网络分开的方法,是一种隔离技术.防火墙在内网与外网通信时进行访问控制,依据所设置的规则对数据包 ...

  7. MHA-Atlas-MySQL高可用（下）

    MHA-Atlas-MySQL高可用(下) 链接:https://pan.baidu.com/s/17Av92KQnJ81Gc0EmxSO7gA 提取码:a8mq 复制这段内容后打开百度网盘手机App ...

  8. 2018-2019 ACM-ICPC, Asia Seoul Regional Contest K TV Show Game 2-sat

    题目传送门 题意: 有n个人,k盏灯,灯有红蓝两种颜色,每个人都猜了三种灯的颜色,问如何安排灯的颜色,使得每个人猜的灯至少有两个是对的. 思路: 很容易想到2-sat,但是显然枚举每个人猜对的情况是不 ...

  9. ANdroid手机屏幕反横向等参数设定

    经过我一番百度和看Android文档,我才发现,Android对旋转屏,特别是只有横屏或者竖屏虽重力旋转的支持是到Android4.3.1才有完美支持的 unspecified - 默认值,由系统选择 ...

  10. org.springframework.web.servlet.DispatcherServlet异常

    org.springframework.web.servlet.DispatcherServlet: No mapping found for HTTP request with URI [/] in ...