css3样式总结

  1. css(鼠标悬停时,图片缓缓变大)
.templatelist .content a.logo >img {
    transition: all 0.6s;
    width: 432px;
    height: 280px;
    overflow: hidden;
}

.templatelist .content a.logo >img:hover {
    transform: scale(1.05);
}
  1. css、vue、jQuery(鼠标悬停时,显示遮照层)

html


css

.logolist .content a.logo span {
   position: absolute;
   background: rgba(0,0,0,0.6);
   width: 210px;
   height: 190px;
   top: 0;
   padding-top: 70px;
   margin: 0 auto;
   text-align: center;
   transition: opacity 1s,transform 1s;
}

vue

methods: {


   	    changeMask: function(event){
   	    	$(event.currentTarget).find('span').toggle();      
   	    },
}

你可能感兴趣的:(前端开发,VUE)