189 8069 5689

CSS如何翻转图片、滚动图片栏、打开大门效果

这篇文章主要介绍CSS如何翻转图片、滚动图片栏、打开大门效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联公司于2013年创立，是专业互联网技术服务公司，拥有项目成都网站建设、网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元耒阳做网站,已为上家服务,为耒阳各地企业和个人服务,联系电话:18982081108

CSS 翻转图片主要用到的技术除了3D翻转和定位 ，还用到了一个属性 backface-visibility：visable|hidden;该属性主要是用来设定元素背面是否可见。

效果图如下：

CSS如何翻转图片、滚动图片栏、打开大门效果

具体的步骤如下：

1、写出页面主体，

                       

2、通过定位使两张图片叠加在一起

div img {             width: 250px;             height: 170px;             position: absolute;             top: 0;             left: 0;             transition: all 1s;         }

3、设置第一张图片背面不可见

div img:first-child {             z-index: 1;             backface-visibility: hidden;         }

4、添加旋转180度

div:hover img {             transform: rotateY(180deg);         }

完整代码：

                      Document            
                       
  

CSS 滚动的图片栏

网站上可以经常看到有一些图片进行持续不断的滚动，这个效果可以通过css的动画效果来实现。

CSS如何翻转图片、滚动图片栏、打开大门效果

主要原理是通过动画向左移动。

首先给出两组一样的图片（同一行上），让整体图片向左移动一组图片的长度，

这样在动画结束时会迅速还原到原来位置，而此时正好与第二组图片交替，看起来就像是一组图片在不断循环向左滚动。

具体步骤如下：

1、设置主体代码各处两组一样的图片

2、设置nav的大小，宽度为一组图片相加的宽度，高度为图片的高度。

 nav {             width: 750px;             height: 170px;             border: 1px solid red;             margin: 100px auto; }

3、设置ul大小，宽度为nav的两倍，高度与nav相同，并指定动画相关属性

ul {             width: 200%;             height: 100%;             animation: picmove 5s linear infinite forwards;         }

4、定义动画，主要是向左移动一组图片的长度

 @keyframes picmove {             from {                 transform: translate(0);             }             to {                 transform: translate(-750px);             }         }

5、增加鼠标悬停，动画暂停的效果

ul:hover {             animation-play-state: paused;         }

6、最后给nav 增加 overflow：hidden 使得超出的部分隐藏，这样整体一组滚动的图片栏就做好了

完整代码如下：

                      Document              

CSS 打开大门

主要运用到了3D旋转和定位技术。

效果如下：

CSS如何翻转图片、滚动图片栏、打开大门效果

具体步骤如下：

1、首先在页面主体加三个很简单的div标签：

 
         
         
     

2、给外层盒子（.door） 加上基本的属性、背景、视距以及相对定位（子盒子要用到绝对定位，所以父盒子最好 加上相对定位）。

.door {             width: 450px;             height: 450px;             border: 1px solid #000000;             margin: 100px auto;             background: url(Images/men.png) no-repeat;             background-size: 100% 100%;             position: relative;             perspective: 1000px;         }

3、给左右的门设置相关属性，这里给出左盒子的 相关属性。右盒子只需将定位改为右边距离为0，以及将旋转轴改为右侧即可。

.door-l {             width: 50%;             height: 100%;             background-color: brown;             position: absolute;             top: 0;             transition: all 0.5s;             left: 0;             border-right: 1px solid #000000;             transform-origin: left;         }

4、添加门上的 小圆环，在这里是使用伪元素 before 进行添加的。

（1）、设置大小与边框

（2）、设置border-radius 为50% 让其变成圆形。

（3）、设置定位 垂直居中并靠里面有一定距离。

.door-l::before {             content: "";             border: 1px solid #000000;             width: 20px;             height: 20px;             position: absolute;             top: 50%;             border-radius: 50%;             transform: translateY(-50%);             right: 5px;         }

5、最后设置旋转度数，我这里是设置了120度（注意度数的正负代表旋转方向）

.door:hover .door-l {             transform: rotateY(-120deg);         }

完整代码如下：

                      Document            
         
         
     
  

以上是“CSS如何翻转图片、滚动图片栏、打开大门效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


分享标题：CSS如何翻转图片、滚动图片栏、打开大门效果
URL标题：http://cdxtjz.cn/article/ggcoco.html

其他资讯