html5圆形图片自动旋转,纯CSS3圆形图片鼠标滑过旋转翻盖动画特效

这是一款效果非常炫酷的纯CSS3圆形图片鼠标滑过旋转翻盖特效。该CSS3特效中，当鼠标滑过圆形图片时，图片以顶边的一个定位点为中心向下旋转，显示出下面的圆形说明文本。

使用方法

HTML结构

该特效使用bootstrap网格系统来布局，基本的HTML结构如下：

......

CSS样式

该圆形图片鼠标滑过特效的CSS样式非常简单：每一个.box元素是一张圆形图片，它的定位方式采用相对定位。.pic元素是图片的包裹容器，它的定位方式采用相对定位，并通过transform-origin属性将旋转的原点设置在X轴95%，Y轴50%的地方，这个点是圆形旋转的中心点。效果中通过.pic:after为元素将这个点显示在图片上。

.box-bg{

overflow: hidden;

}

.box{

position:relative;

}

.box .pic{

position: relative;

z-index: 1;

transform-origin: 95% 50% 0;

transition: all 0.5s ease 0s;

}

.box .pic:after{

content: "";

position: absolute;

top: 50%;

left:95%;

width: 8px;

height: 8px;

border-radius: 50%;

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

box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);

margin: -4px 0 0 -4px;

}

在鼠标滑过时，.pic元素被旋转了-140度。

.box:hover .pic{

transform:rotate(-140deg);

}

其它的一些CSS代码是制作圆形图片和文本描述信息的代码。

.box .pic img{

width:100%;

height:auto;

border-radius:50%;

}

.box .content{

position: absolute;

top: 0;

width: 100%;

height: 100%;

border-radius: 50%;

padding: 70px 20px;

background: #b9607e;

}

.box .title{

text-align:center;

margin-bottom:5%;

text-transform:uppercase;

}

.box .title a{

color:#fff;

transition: all 0.3s ease 0s;

}

.box .title a:hover{

color:#333;

}

.box .description{

color:#fff;

text-align:center;

text-transform:uppercase;

}

html5圆形图片自动旋转,纯CSS3圆形图片鼠标滑过旋转翻盖动画特效相关推荐

html 图片自动滚动播放,CSS3实现图片滚动播放效果
CSS3实现图片滚轮效果在平常我们使用一些滚动图片的效果,都是用javascript代码(JQuery)实现,但是在如今Html5和CSS3盛行的时代,可以替代javascript代码来实现一些常见 ...
html背景向四周散开,纯css3圆形从中心向四周扩散动画
查看效果: http://hovertree.com/texiao/css3/37/ 以下为讲解和代码. 可以通过 @keyframes 规则,创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变 ...
css3 3d立体三角形展示图片,纯css3实现图片三角形排列
当今是个读图时代.纯大部分网页或多或少都会用到图片.特别是图片较多的网页.图片的布局和排版就非常重要了.今天要给大写带来一款纯css3实现图片三角形排列.适合一系列的图片.效果图如下: 实现的代码. ...
图片展示html css代码,纯CSS3实现图片展示特效
Web浏览器端的特效越来越让人兴奋,通过CSS和JavaScript,各种意想不到的绚丽效果都能用简单的几句代码完成.本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可 ...
纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览源码下载实现的代码. html代码: < ...
html 鼠标图标做成动画效果,纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 实现的代码. html代码: 复制代码代码如下: css3代 ...
js+css3简易实现2023新年快乐全屏满天星动画特效
目录 ⭐ 前言一.效果图二.代码实现 2.1 html 2.2 CSS 2.3. JS ⭐ 预览 ⭐ 前言 js+css3全屏星星闪烁背景2023新年快乐动画特效,文字还有3D立体效果.其中,利用 ...
html生日快乐爆开烟花,css3+H5炫酷喜庆全屏烟花动画特效
css3+H5炫酷喜庆全屏烟花动画特效 /* basic styles for black background and crosshair cursor */ body { background: ...
html5动态效果随鼠标动,html5跟随鼠标移动银河星系背景动画特效
特效描述:html5 跟随鼠标移动银河星系背景动画特效.html5银河星系背景动画,鼠标的移动.点击会发生相应的变化! 代码结构 1. HTML代码流星雨 body {margin:0;padd ...
纯css3实现图片自动切换
实现图片自动切换需要用到的主要是css3里面的过渡这一节的内容. 大致思路是这样的: 1.将图片设置为li的背景图片: 2.规定一个@keyframes的规则使得图片按照这个规则进行切换: 3.设置每 ...

html5圆形图片自动旋转,纯CSS3圆形图片鼠标滑过旋转翻盖动画特效

......

html5圆形图片自动旋转,纯CSS3圆形图片鼠标滑过旋转翻盖动画特效相关推荐

最新文章

热门文章