全部栏目

首页 旅游资讯 线路攻略 景点大全 国内游 境外游 美食特产
您的当前位置：首页正文

纯Css3手工打造网页图片效果

2020-11-27 来源：爱站旅游

  1. 鼠标悬停，图片360度旋转


    效果：


    代码：


    <style>
     .rotate-demo {
     width: 220px;
     height: 220px;
     margin: 0 auto;
     background: no-repeat url("images/author.jpg") left top;
     -webkit-background-size: 220px 220px;
     -moz-background-size: 220px 220px;
     background-size: 220px 220px;
     -webkit-border-radius: 110px;
     border-radius: 110px;
     -webkit-transition: -webkit-transform 2s ease-out;
     -moz-transition: -moz-transform 2s ease-out;
     -o-transition: -o-transform 2s ease-out;
     -ms-transition: -ms-transform 2s ease-out;
     }
     
     .rotate-demo:hover {
     -webkit-transform: rotateZ(360deg);
     -moz-transform: rotateZ(360deg);
     -o-transform: rotateZ(360deg);
     -ms-transform: rotateZ(360deg);
     transform: rotateZ(360deg);
     }
     </style>
     
    <p class="rotate-demo"></p>


    知识点：CSS3 的transform 属性可以向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。设置为rotateZ(angle) 实现DOM元素沿着 Z 轴的 3D 旋转，相关的设置还有rotate、rotate3d、rotateX、rotateY。

  2. 图片悬停放大

    效果：


    纯Css3手工打造网页图片效果


    代码：


    CSS3：
    <style type="text/css">
     .img-container {
     background-color: #000;
     width: 220px;
     height: 220px;
     margin: 20px 50px;
     }
     
     .img {
     -webkit-transform: scale(0.6);
     -moz-transform: scale(0.6);
     -o-transform: scale(0.6);
     -webkit-transition-duration: 0.5s;
     -moz-transition-duration: 0.5s;
     -o-transition-duration: 0.5s;
     }
     
     .img img {
     padding: 1px;
     border-radius: 10px;
     border: 1px solid #fff;
     }
     
     .img:hover {
     -webkit-transform: scale(0.8);
     -webkit-box-shadow: 0px 0px 30px #ccc;
     -moz-transform: scale(0.8);
     -moz-box-shadow: 0px 0px 30px #ccc;
     -o-transform: scale(0.8);
     -o-box-shadow: 0px 0px 30px #ccc;
     }
    </style>
     
    HTML：
    <p class="img-container">
     <p class="img">
     <img src="/Uploads-s/new/2019-09-27-201927/91ad2d958c7d97417c4d740b2c80e27a-0.jpg">
     </p>
     </p>


    知识点： 同样用到CSS3的transform属性，设置scale(x,y)，实现DOM元素的2D缩放转换，相关的还有scale3d、scaleX、scaleY、scaleZ

  3. 实现3D图片旋转相册

    效果:



    代码:


    CSS:
    <style>
     .carousel-container {
     margin: 20px auto;
     width: 210px;
     height: 140px;
     position: relative;
     }
     
     #carousel {
     width: 100%;
     height: 100%;
     position: absolute;
     transform-style: preserve-3d;
     animation: rotation 20s infinite linear;
     }
     
     #carousel:hover {
     animation-play-state: paused;
     }
     
     #carousel figure {
     display: block;
     position: absolute;
     width: 186px;
     height: 116px;
     left: 10px;
     top: 10px;
     background: black;
     overflow: hidden;
     border: solid 1px black;
     }
     
     #carousel figure:nth-child(1) {
     transform: rotateY(0deg) translateZ(288px);
     }
     
     #carousel figure:nth-child(2) {
     transform: rotateY(40deg) translateZ(288px);
     }
     
     #carousel figure:nth-child(3) {
     transform: rotateY(80deg) translateZ(288px);
     }
     
     #carousel figure:nth-child(4) {
     transform: rotateY(120deg) translateZ(288px);
     }
     
     #carousel figure:nth-child(5) {
     transform: rotateY(160deg) translateZ(288px);
     }
     
     #carousel figure:nth-child(6) {
     transform: rotateY(200deg) translateZ(288px);
     }
     
     #carousel figure:nth-child(7) {
     transform: rotateY(240deg) translateZ(288px);
     }
     
     #carousel figure:nth-child(8) {
     transform: rotateY(280deg) translateZ(288px);
     }
     
     #carousel figure:nth-child(9) {
     transform: rotateY(320deg) translateZ(288px);
     }
     
     #carousel .carousel-img {
     -webkit-filter: grayscale(1);
     cursor: pointer;
     transition: all .5s ease;
     border: none;
     }
     
     #carousel .carousel-img:hover {
     -webkit-filter: grayscale(0);
     transform: scale(1.2,1.2);
     }
     
     @keyframes rotation {
     from {
     transform: rotateY(0deg);
     }
     
     to {
     transform: rotateY(360deg);
     }
     }
     </style>
     
    HTML:
     
    <p class="carousel-container">
     <p id="carousel">
     <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-1.jpg" alt=""></figure>
     <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-2.jpg" alt=""></figure>
     <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-3.jpg" alt=""></figure>
     <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-4.jpg" alt=""></figure>
     <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-5.jpg" alt=""></figure>
     <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-6.jpg" alt=""></figure>
     <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-7.jpg" alt=""></figure>
     <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-8.jpg" alt=""></figure>
     <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-9.jpg" alt=""></figure>
     </p>
     </p>


    知识点: 还是凭借CSS3的transform属性以及animation属性，使用rotateY定义元素沿着 Y 轴的进行 3D 旋转，使用translateZ定义元素沿着Z轴进行 3D 转换；
    同时设置元素的animation属性实现动画效果，本文中定义如下：


    animation: rotation 20s infinite linear;


    animation-name（需要绑定到选择器的 keyframe 名称）：rotation的动画
    animation-duration（完成动画所花费的时间）：20s
    animation-iteration-count（动画应该播放的次数）：infinite（无限次）
    animation-timing-function(动画的速度曲线)：linear（动画从头到尾的速度是相同的）

更多纯Css3手工打造网页图片效果 相关文章请关注PHP中文网！

显示全文