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

2022-05-03 10:19:47

.rotate-demo {
width: 220px;
height: 220px;
margin: 0 auto;
background: no-repeat url("http://images2015.cnblogs.com/blog/171569/201702/171569-20170208151443229-2044520835.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);
}
.img-container {
background-color: #000;
width: 220px;
height: 220px;
margin: 20px auto;
}

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

鼠标悬停，图片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>

<div class="rotate-demo"></div>

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

图片悬停放大

效果：

代码：

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：

<div class="img-container">

            <div class="img">

                <img src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208151443229-2044520835.jpg">

            </div>

        </div>

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

实现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:

<div class="carousel-container">

        <div id="carousel">

            <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155254932-406125762.jpg" alt=""></figure>

            <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155256635-1168577244.jpg" alt=""></figure>

            <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155257354-505827798.jpg" alt=""></figure>

            <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155258072-866130501.jpg" alt=""></figure>

            <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155258697-1207588864.jpg" alt=""></figure>

            <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155259244-459311473.jpg" alt=""></figure>

            <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155300213-66837727.jpg" alt=""></figure>

            <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155300760-2026101054.jpg" alt=""></figure>

            <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155301322-1264968106.jpg" alt=""></figure>

        </div>

    </div>

知识点: 还是凭借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（动画从头到尾的速度是相同的）

刚开工，暂时没有任务，不想码代码，翻了翻以前下载的各种代码，整理整理，发现真的不知道自己怎么有那么多精力收集了那么多乱七八糟的东西，现在整理起来又要花费大量的时间！

感想：

“只要我不醒来，世界就不存在”；

其实我们从来不会错过什么，遇到了是缘，没有遇到，其实相对来说ta就是没有存在过！

2017，简简单单就好！

码农公寓

鼠标悬停，图片360度旋转

图片悬停放大

实现3D图片旋转相册

相关文章