css代码部分
body{ background-color: #DEB887; } #container{ width: 900px; background-color: #B5B5B5; border: 1px solid black; padding: 50px; } .sep{ width: 100%; border: 1px solid; } .image-hover{ width: 350px; height: 200px; display: inline-block; border: 10px solid #FFFFCC; overflow: hidden; margin-left: 50px; margin-bottom: 30px; box-shadow: 10px 10px 5px gray; -webkit-box-shadow: 10px 10px 5px gray; } h3{ text-align: center; } .image-hover img{ margin: -80px 0px 0px -100px; } /***zoom in ***/ .img-Zoom-in img{ transform: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .img-Zoom-in:hover img{ transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -webkit-transform: scale(0.8); } /***zoom 0ut ***/ .img-Zoom-out img{ transform: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .img-Zoom-out:hover img{ transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); } /***Rotate right ***/ .img-rotate-right img{ transform: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .img-rotate-right:hover img{ transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -webkit-transform: rotate(20deg); } /***Rotate left ***/ .img-rotate-left img{ transform: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .img-rotate-left:hover img{ transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); } /***origin ***/ .img-origin{ transform: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .img-origin:hover { transform: skew(20deg); -moz-transform: skew(20deg); -ms-transform: skew(20deg); -webkit-transform: skew(20deg); } /***square-elipes ***/ .img-square-elipes{ transform: all 2.2s ease-in-out; -webkit-transition: all 2.2s ease-in-out; -moz-transition: all 2.2s ease-in-out; -o-transition: all 2.2s ease-in-out; } .img-square-elipes:hover{ border-radius: 50%; -moz-border-radius: 50%; -webbit-border-radius:50%; } /***elipes-square ***/ .img-elipes-square{ transform: all 2.2s ease-in-out; -webkit-transition: all 2.2s ease-in-out; -moz-transition: all 2.2s ease-in-out; -o-transition: all 2.2s ease-in-out; border-radius: 50%; -moz-border-radius: 50%; -webbit-border-radius:50%; } .img-elipes-square:hover{ border-radius: 0%; -moz-border-radius: 0%; -webbit-border-radius:0%; } /***rotate-scale ***/ .img-rotate-scale{ transform: all 2.2s ease-in-out; -webkit-transition: all 2.2s ease-in-out; -moz-transition: all 2.2s ease-in-out; -o-transition: all 2.2s ease-in-out; } .img-rotate-scale:hover{ transform: rotate(720deg) scale(2.2); -webkit-transition: rotate(720deg) scale(2.2); -moz-transition: rotate(720deg) scale(2.2); -o-transition: rotate(720deg) scale(2.2); } /***Rotate:X; ***/ .img-rotatex{ transform: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .img-rotatex:hover{ transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); } /***Rotate:Y; ***/ .img-rotatey{ transform: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .img-rotatey:hover{ transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); } /***Rotate:Z; ***/ .img-rotatez{ transform: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .img-rotatez:hover{ transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); } /***grayscale; ***/ .img-grayscale{ transform: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .img-grayscale:hover{ filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -webkit-filter: grayscale(100%); } /***blur; ***/ .img-blur{ transform: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } .img-blur:hover{ filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -webkit-filter: blur(5px); } /***effect - image roll ***/ .img-roll{ background: #000; position: relative; } .img-roll img{ position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; float: left; } .img-roll .img-1{ left: 0px; } .img-roll .img-2{ left: 130%; } .img-roll:hover .img-1{ left: 130%; } .img-roll:hover .img-2{ left: 0%; } .img-roll img{ transform: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; } .img-roll:hover img{ transform: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; }效果图
