温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-10-15 14:11:41 来源:亿速云 阅读:120 作者:小新 栏目:web开发

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

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

效果图如下:

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

具体的步骤如下:

1、写出页面主体,

<div>         <img src="Images/b.jpg" alt="">         <img src="Images/c.jpg" alt="">     </div>

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);         }

完整代码:

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title>     <style>         /* backface-visibility */                  div {             width: 250px;             height: 170px;             margin: 100px auto;             position: relative;         }                  div img {             width: 250px;             height: 170px;             position: absolute;             top: 0;             left: 0;             transition: all 1s;         }                  div img:first-child {             z-index: 1;             backface-visibility: hidden;         }                  div:hover img {             transform: rotateY(180deg);         }     </style> </head> <body>     <div>         <img src="Images/b.jpg" alt="">         <img src="Images/c.jpg" alt="">     </div> </body> </html>

CSS 滚动的图片栏

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

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

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

首先给出两组一样的图片(同一行上),让整体图片向左移动一组图片的长度,

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

具体步骤如下:

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

<nav>         <ul>             <li><img src="Images/1 (2).jpg" alt=""></li>             <li><img src="Images/2 (2).jpg" alt=""></li>             <li><img src="Images/3 (2).jpg" alt=""></li>             <li><img src="Images/1 (2).jpg" alt=""></li>             <li><img src="Images/2 (2).jpg" alt=""></li>             <li><img src="Images/3 (2).jpg" alt=""></li>         </ul>     </nav>

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 使得超出的部分隐藏,这样整体一组滚动的图片栏就做好了

完整代码如下:

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title>     <style>         * {             margin: 0;             padding: 0;         }                  ul {             list-style: none;         }                  nav {             width: 750px;             height: 170px;             border: 1px solid red;             margin: 100px auto;             overflow: hidden;         }                  ul {             width: 200%;             height: 100%;             animation: picmove 5s linear infinite forwards;         }                  @keyframes picmove {             from {                 transform: translate(0);             }             to {                 transform: translate(-750px);             }         }                  img {             width: 250px;             height: 170px;             float: left;         }                  ul:hover {             animation-play-state: paused;         }     </style> </head> <body>     <nav>         <ul>             <li><img src="Images/1 (2).jpg" alt=""></li>             <li><img src="Images/2 (2).jpg" alt=""></li>             <li><img src="Images/3 (2).jpg" alt=""></li>             <li><img src="Images/1 (2).jpg" alt=""></li>             <li><img src="Images/2 (2).jpg" alt=""></li>             <li><img src="Images/3 (2).jpg" alt=""></li>         </ul>     </nav> </body> </html>

CSS 打开大门

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

效果如下:

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

具体步骤如下:

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

 <div>         <div></div>         <div></div>     </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);         }

完整代码如下:

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title>     <style>         .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;         }                  .door-l,         .door-r {             width: 50%;             height: 100%;             background-color: brown;             position: absolute;             top: 0;             transition: all 0.5s;         }                  .door-l {             left: 0;             border-right: 1px solid #000000;             transform-origin: left;         }                  .door-r {             right: 0;             border-left: 1px solid #000000;             transform-origin: right;         }                  .door-l::before,         .door-r::before {             content: "";             border: 1px solid #000000;             width: 20px;             height: 20px;             position: absolute;             top: 50%;             border-radius: 50%;             transform: translateY(-50%);         }                  .door-l::before {             right: 5px;         }                  .door-r::before {             left: 5px;         }                  .door:hover .door-l {             transform: rotateY(-120deg);         }                  .door:hover .door-r {             transform: rotateY(120deg);         }     </style> </head> <body>     <div>         <div></div>         <div></div>     </div> </body> </html>

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI