首页 / CSS3 / 纯Css3手工打造网页图片效果
纯Css3手工打造网页图片效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了纯Css3手工打造网页图片效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6852字，纯文字阅读大概需要10分钟。
内容图文
鼠标悬停，图片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。图片悬停放大
效果：
代码：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="/upload/getfiles/0001/2021/4/23/20210423095333076.jpg">
</p>
</p>
知识点： 同样用到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:
<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中文网！
内容总结
以上是互联网集市为您收集整理的纯Css3手工打造网页图片效果全部内容，希望文章能够帮你解决纯Css3手工打造网页图片效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。